JavaScript programming from scratch in 2022: Roadmap

To make learning JavaScript programming from scratch effective, we have compiled a roadmap:

The JavaScript learning roadmap is divided into the following blocks:

The basics
Advanced concepts
Web API
Tools
Conclusions

Let’s analyze each of the blocks in more detail.

JavaScript Basics

Like any programming language, JavaScript starts with basic knowledge, such as understanding variables, operators, data types, functions, loops, etc.

Syntax

JavaScript borrowed most of the syntax from Java, but Python, Perl, and Awk also influenced it. JavaScript is case-sensitive and uses Unicode character encoding.

Var and let variables

The keyword is often used to create a variable in JS let. This directive allows you to declare a local variable whose scope is limited by the block of code in which it is declared.

But for var there is no block scope: global variables var they are also available outside the block. Also var allows repeated declaration, whereas for let that would be a mistake. Try it yourself:

var siteName = "Tproger";
var siteName;

And this option:

let siteName;
let siteName; //SyntaxError: 'siteName' has already been declared

Data Types

The ECMAScript standard defines eight types:

undefined — undefined type;
boolean — logical type;
number —
number;
bigint — a number of arbitrary length;
string — string;
symbol — symbol;
null — null or empty value;
object — a structure for storing data and creating other structures using the keyword new: new Object, new Map, new Date, etc.

You can read more about data types and data structures in JavaScript here.

Cycles

There are several types of loops in JavaScript:

for— a cycle with a counter, the use of which in most cases implies that the number of repetitions is known.
while— repeated execution of instructions exactly as long as the condition is true.
do ... while— the same as while, only here the condition is checked after the instructions are executed, so the loop is executed at least once.
for ... in— a loop for iterating through the enumerated properties of an object.
for ... of— iterating over iterated objects in which the method is implemented Symbol.iterator (String, Array, Set, etc.).

At the same time, as in other programming languages, instructions can be used in JS break and continue.

Functions

Well, to learn JavaScript programming from scratch, you can’t ignore the functions.

You can pass arguments to functions, return results from them, assign them as values or properties. The function call performs the designated actions with the specified parameters. Example:

function showMessage() {
  alert('Привет, Типичный программист!');
}

The execution of this function looks like this:

showMessage();

Learn more about functions in JavaScript.

Advanced concepts

Moving on. Understanding more complex JavaScript concepts allows you to write full-fledged programs devoid of spaghetti code and mismatched crutches.

Closure

In JavaScript, functions can be inside other functions. In this case, the internal function has access to the external variables, and the mechanism for providing such access is called closure.

Let ‘s take an example:

function outer() {
  var outerVar;

  var func = function() {
    var innerVar
    ...
    x = innerVar + outerVar
  }
  return func
}

Currying functions

This technique of working with functions is very useful for JavaScript development from scratch. Currying is the transformation of functions so that they take arguments as func(a)(b)(c), not in the format func(a, b, c).

To better understand what we are talking about, let’s look at a simple example. Let’s create an auxiliary function curry(func), which performs currying func with two arguments:

function curry(func) {
  return function(a) {
    return function(b) {
      return func(a, b);
    };
  };
}

//После карирования используем:
function sum(a, b) {
  return a + b;
}
let curriedSum = curry(sum);
alert(curriedSum(1)(2)); //Вывод: 3

Keyword this

Context this varies depending on its use:

If you refer to this in the global scope, we automatically access the object window in the browser.
Using this keyword inside the object, we refer to the object itself.
this nested objects can create confusion. Remember that this refers to the object whose method is used.
If the constructor function is called using the keyword new, then this it will point to a new object.

Prototypes

In JavaScript, objects have a special hidden property [[Prototype]], which is either equal to null, or refers to another object. This object is called a prototype:

If you plan to take the missing property from Object, but it is missing, JavaScript will automatically take this property from the prototype. This is prototypical inheritance.

Property [[Prototype]] it is internal and hidden, but there are many ways to set it. One of the ways to set a hidden property is [[Prototype]] is the use of __proto__:

let animal = {
  eats: true
};
let rabbit = {
  jumps: true
};

rabbit.__proto__ = animal;

//Теперь мы можем найти оба свойства в rabbit:
alert( rabbit.eats ); //true
alert( rabbit.jumps ); //true

Inheritance

In terms of inheritance, JavaScript works with only one entity: objects. Each object has an internal reference to another object, called its prototype. The prototype object also has its own prototype, and so on until the chain ends with an object that has the property [[Prototype]] equally null.

Iterators and Generators

Iterators and generators introduce the concept of iteration directly into the core of the language and provide a mechanism for customizing behavior for ... of cycles.

An iterator is an object that is able to access the elements of a certain collection one at a time, and at the same time can track its current position within the designated sequence. In JavaScript, an iterator is an object that provides a method next(), which returns the next element of the sequence with the property done or value.

function makeIterator(array){
    var nextIndex = 0;

    return {
       next: function(){
           return nextIndex < array.length ?
               {value: array[nextIndex++], done: false} :
               {done: true};
       }
    }
}

next() can be called for alternate access to key-value pairs:

var it = makeIterator(['yo', 'ya']);
console.log(it.next().value); // 'yo'
console.log(it.next().value); // 'ya'
console.log(it.next().done);  // true

Generators also allow you to define a search algorithm by writing one function that is able to maintain its own state. A generator is a special type of function that works like an iterator factory. A function becomes a generator if it contains one or more yield operators and uses function syntax.

function* idMaker(){
  var index = 0;
  while(true)
    yield index++;
}

var it = idMaker();
console.log(it.next().value); // 0
console.log(it.next().value); // 1
console.log(it.next().value); // 2

Asynchronous programming

With asynchronous programming, the result of the functions is not available immediately, but after a while. So, when an asynchronous function is called, the application continues to work, since the function immediately performs a return.

In general, asynchronous programming in JavaScript from scratch is not easy, and one section of the article cannot do here. To understand, study the basic concepts of asynchronous programming and proceed to an introduction to asynchronous JavaScript.

Modular system

As the application grows, it is usually divided into many files, which are modules. A module usually contains a class or library with functions.

For a long time, JavaScript lacked the syntax of modules at the language level. This wasn’t a problem because the first scripts were small and simple. But over time, this has changed, scripts have become much more complex, and several ways of organizing code into modules have been invented.

This is how special libraries for dynamic loading of modules appeared. The system of modules at the language level appeared in the JavaScript standard in 2015 and gradually evolved. At the moment it is supported by most browsers and Node.js .

Read more about the modular system here.

Web API

For programming in JavaScript, understanding the Web API is not just desirable, but mandatory. You will encounter the Application Programming Interfaces in JS everywhere.

Browser API — these are constructions that are built into the browser and designed to facilitate the development of functionality.
Third-party APIs — designs embedded in third-party platforms such as Twitter, Zendesk, Trello, etc. With their help, the functionality of these platforms can be used in their web applications. If the API is provided in the platform, instructions must be attached to it.

The topic of the web API is extensive and complex. To understand the issue, we recommend reading the introduction to web APIs, and we also advise you to watch the available lecture:

Tools for JavaScript development from scratch

Popular linters and formatters for JavaScript:

Also pay attention to the bundlers listed in the map: choose a tool based on its convenience specifically for your needs.

As for libraries and frameworks, we advise you to familiarize yourself with our React roadmaps and Vue.js .

And here lies a detailed introductory course on TypeScript.

Conclusions

This material does not carry a significant training load, but only demonstrates the path of development of a JS developer, explaining some basics in parallel. Use this roadmap to learn JavaScript programming from scratch in a short time and successfully move on to the practical application of the acquired knowledge.

Development Outsourcing | Unreal Outsourcing