Beginner to Advanced JavaScript Roadmap

Share

let’s take a look at the roadmap to learn javascript in 2022. javascript is essential if you want to be a front-end developer or even a back-end developer working on the node. if you’ve learned HTML and CSS, javascript is the next step for you. it is the most important technology from an interview point of view and is something you’ll spend most of your time learning.

so in this article, I want to provide a learning path for anyone who is starting with javascript in 2022

let’s get started, I’ve broken down the learning path into four sections:

  1. Fundamentals
  2. Advance Concepts
  3. Web APIs
  4. Tooling and Misc.

let’s start with the first section which is the fundamentals of javascript.

#Section 1: Fundamentals of JavaScript

Now, this section is for you, if you are a complete beginner. you need to start by learning how to run javascript. you could use:

  • 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.

1. Variables

The first concept is to learn about variables. variables let you store data in javascript. though there are a few nuances that you need to learn that differ from variables in other programming languages.

Start with variable declarations, learn to declare with: var, let or the const keyword and understand the differences. then learn about the concept of scope. when it comes to variables you have:– global scope, function scope, and block scope in javascript.

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

what you have to keep in mind is that javascript is a loosely typed dynamic language. so variables in javascript are not directly associated with any particular value type. any variable can be assigned values of all types. the latest specification defines nine data types:– six of them are primitive types. you have:

  • undefined
  • boolean
  • number
  • bigint
  • string
  • symbol

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

like any other language javascript also has a few built-in data structures that you can make use of. you’ll learn about:

  • arrays
  • 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

when writing code you’ll find yourself having to convert data from one type to the other. you can convert it yourself using a few methods that are available like to string to boolean and so on. that is called explicit type conversion. on the other hand, there’s also implicit type conversion where javascript itself will automatically convert the type to be able to run the code you have written this has both advantages and disadvantages but type conversion is definitely a topic to read about in detail.

4. Equality

The next beginner topic is about equality you must understand the difference between double equals ( == ) and triple equals (===) in javascript. it is also a popular interview question for a beginner.

5. Loops

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:

  • assignment
  • arithmetic
  • logical
  • conditional
  • comparison
  • relational
  • bitwise
  • string
  • comma
  • unary

8. Functions

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.

finally, learn about arrow functions that offer a more concise syntax to write functions in javascript.


if you’ve made it this far that is awesome. unfortunately, if you’re a javascript developer, just the fundamentals are not sufficient. so let’s now move on to the second section which focuses on learning the advanced topics in javascript.

#Section 2: Advance concepts of JavaScript

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

2. Closure

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

next, you have the all-important yet confusing topic in javascript which is this keyword. you learned that this keyword is basically the execution context and introduces sort of a dynamic scope in the sense that you can call the same function with different values of 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.

5. Prototype

you learned that every function in javascript has an object called prototype which allows you to have shareable methods when creating instances of a function.

6. Inheritance

you’ll then learn about inheritance in javascript which is possible because of the prototype and prototype chain.

7. Class

next, you can learn about classes in javascript which is pretty much a syntactical sugar around functions and prototypes.

8. Iterators

then move on to the concept of iterators and generators.

9. Event Loop

next, you will learn about the event loop in javascript. if you ask me every single javascript developer must know about the event loop in javascript. it is what will help you create a mental model of the other advanced concepts and is key to understanding how the code you write will execute.

10. Asynchronous JS

the next topic to understand is async javascript. this knowledge is especially required when you’re making that move from a junior developer to a senior developer role. first, you learn about the traditional methods javascript has available for running code asynchronously:

  • 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

11. 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

the last advanced topic you would want to learn is about the module system in javascript. you will learn how to split javascript programs into separate modules that can be imported when needed. you learn about model systems like:

  • common js ( CJS )
  • es modules ( ESM )
  • how to export and import modules
  • the distinction between default and named exports

with these topics in your pocket, you’ll have a good grip on advanced javascript.


#Section 3: Web APIs

the third section deals with client-side web APIs. these are topics you need to study along with the fundamentals and the advanced topics. however, I’ve created this as a separate section to let you know these APIs are not part of the javascript language itself. rather they’re built on top of the core javascript language.

1. DOM

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

next, you have XHR and fetch which are APIs dealing with fetching data from a server. learn this along with the advanced topics, especially async javascript.

3. Storage

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:

  1. linters: linters are tools that check through your code and tell you about any errors that are present. what error types they are and what code lines they are present on eslint which is highly configurable is the recommended javascript linter to learn about. a good second choice which is more recent is rome.

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

TypeScript

now, a nice to have tool in your arsenal is typescript. typescript is a typed superset of javascript which compiles down to javascript that browsers can understand. with typescript, you get the benefit of not only writing your code with the latest features but you get to add types to your code this static type checking can save you from countless hours of debugging code and help you identify bugs that otherwise would have been found only at run time.

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.


But this pretty much is my take on the javascript roadmap for 2022. hopefully, you find it helpful, and if you found this article helpful please share the article with your friends and colleagues.

Practice material along with examples and notes: https://github.com/CodewithSudeep/Tutorial-Basic-JS-Edition

Share
Sudeep Mishra

Sudeep Mishra

Healing

%d bloggers like this: