let’s get started, I’ve broken down the learning path into four sections:
- Advance Concepts
- Web APIs
- Tooling and Misc.
- The script tag in an HTML file
- Link an external file
- Run it in the browser console
- In the terminal with node
But the first step is to learn how to run the code you write. personally, I recommend an HTML file with a script tag and a console.log() statement that says hello world.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> console.log("Hello World"); </script> </body> </html>
once you learn to run your code you can get started with the different concepts.
you learn that:
- var declarations are function scoped
- let and const declarations are block-scoped
another important concept is that of variable hoisting.
Although var, let, and const declarations are all hoisted we learned that only var declarations are also initialized with undefined. this lets you use a var declared variable even before it is declared. let and const declarations however throw a reference error under a similar situation.
once you have a good understanding of variables, you then move on to data types and data structures.
2. Data Types and Data Structure
you then have:
- null which is a special primitive type
- an object which is not a data type but a structural type with which you can construct other data structures
- finally, you have a function: function again is not a data structure but it does answer the type of operator and hence made it into the list
- maps and weak maps
- sets and weak sets
- date object
a proper understanding of these will help you write better code. once you understand the different data types the next topic to focus on is type conversion.
3. Type Conversion
The next set of topics is common to other programming languages. so I’m going to quickly go over them you have loops like, while, do-while, and for-loop. you of course have the break and continue keywords that go hand in hand. you then have two more loops namely for-in and for-of which are helpful when iterating over a certain type of data.
looping is pretty fundamental to any language so make sure you understand how they work.
6. Control Flow
The next topic is about control flow which again is nothing new if you have some programming experience you have if-else, switch, and the try-catch-throw statements for error handling.
7. Expressions and Operators
next, you have expressions and operators here you’re going to learn about the different operators like:
The last fundamental topic to learn is about functions. start by understanding the difference between function declarations and function expressions.then understand how to call a function and learn about function parameters and arguments.
when dealing with arguments learning about the structuring and the rest operator which were introduced in 2015 is highly recommended
Then learn about scope when it comes to functions. how variables declared inside a function are not accessible in the global scope. the var keyword does not agree with that statement but nothing to worry about in 2022.
we’re going to start from where you left off in the fundamentals section which is about functions and scope.
1. Advanced Scope
you will now learn about the scope when dealing with:
- nested functions
- lexical scoping
- immediately invoked function expressions ( IIFE )
- revealing module pattern
once you have a good understanding of the scope you can then move on to the concept of closures
you will understand that closure gives you access to an outer function’s scope from an inner function. once you understand closures a good tool to have in your pocket is function carrying.
3. Function Carrying
it is one of those advanced techniques of working with functions that could definitely help you write better code.
4. this Keyword
we’ll also learn how to determine the value of this keyword using five simple rules. the rules are:
- implicit binding
- explicit binding
- new binding
- lexical binding
- default binding
once you understand the rules all confusion about this keyword will be cleared. something that goes hand in hand with this keyword is the concept of the prototype.
then move on to the concept of iterators and generators.
9. Event Loop
10. Asynchronous JS
- setTimeout to run code after a set time
- setInterval to run at regular intervals of time
next, we learn about callback functions which are basically functions passed into other functions as arguments and are invoked after some operation has been completed by the parent function you will learn the drawbacks and about callback health which will introduce you to the concept of promises
promises are a comparatively new feature that allows you to defer further actions until after the previous action has been completed or respond to its failure.
for example: wait till data is fetched from an API and then perform some action on the data received.
finally, you will learn about async functions and the await operator which makes chaining promises simpler and easier to read.
12. Module System
- common js ( CJS )
- es modules ( ESM )
- how to export and import modules
- the distinction between default and named exports
#Section 3: Web APIs
first, you have the DOM when writing web pages and apps one of the most common things you’ll want to do is manipulate web documents in some way this is usually done by using the document object model which is DOM for short. DOM is a set of APIs for controlling HTML and styling information that makes heavy use of the document object.
This is something you should learn along with the fundamentals as quite a few front encoding rounds during your interview relies on your knowledge of the DOM.
2. XHR & Fetch
the third set of APIs deal with client-side storage. modern web browsers have several different technologies that allow you to store data related to websites and retrieve it when necessary allowing you to persist data long term.
we’ll get to learn about cookies, local and session storage, index DB, and so on.
#Section 4: Tooling & Miscellaneous
let’s now take a look at the last section which is to do with tooling and miscellaneous. there are a few tools that help you with your development and are required when working in a team.
you need to learn about:
2. code formatters: code formatters are somewhat related to linters except that rather than pointing out errors in your code they usually tend to make sure your code is formatted correctly according to your style rules. ideally automatically fixing errors that they find. I would recommend prettier as a good formatter for you to get started with.
3. bundlers: are tools that get your code ready for production they aim at optimizing your builds making them as small as possible before being uploaded to the server. you can learn about webpack/rollup/parcel which has existed for quite some time now. or you can start with the more recent ones like snowpack, esbuild, or vite
with that, we come to the end of this learning path from here there are a few parts that you can take you could travel the road of the front end with libraries like React, Vue, Angular, or even travel the road of backend with node.js.
Practice material along with examples and notes: https://github.com/CodewithSudeep/Tutorial-Basic-JS-Edition