Themes Hive

JavaScript development from scratch in 2022: roadmap

• Dorian Kingi
• September 13, 2022
• 0

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, let and const
To create a variable in JS, the let keyword is often used. This directive allows you to declare a local variable whose scope is limited by the block of code in which it is declared.

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

var siteName = “Tproger”;
var siteName;

And this option:

let siteName;
let siteName; //SyntaxError: ‘siteName’ has already been declared

What about const? This is a constant that obeys the scope of the block level according to the same rules as the let variables. But the difference is that the const value cannot be reassigned. Example:

const siteName = “Tproger”;
siteName = “Typical programmer”; //TypeError: Assignment to constant

Data Types
The ECMAScript standard defines eight types:

undefined — undefined type;
boolean — boolean 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 is a loop 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 .
do condition is true … while is 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— loop for iterating through the enumerated properties of an object.
for … of— iterating over iterated objects that implement the Symbol.iterator method (String, Array, Set, etc.).
At the same time, as in other programming languages, you can use break and continue instructions in JS.

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(‘Hello, Typical programmer!’);
}

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 accept arguments as func(a)(b)(c), and not in the func(a, b, c) format.

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:

Keyword this
The context of this changes depending on its usage:

If we access this in the global scope, we automatically access the window object in the browser. In strict mode (“use strict”), if the value of this is not set in the execution context, it remains undefined.
Using this keyword inside the object, we refer to the object itself.
this in nested objects can create confusion. Remember that this refers to the object in which the method is used.
If the constructor function is called using the new keyword, then this in it will point to a new object.
In arrow functions, this is bound to the environment in which the function was created. In the global scope, this will point to a global object.
Prototypes
In JavaScript, objects have a special hidden property [[Prototype]], which is either null or refers to another object. This object is called a prototype:

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

The [[Prototype]] property is internal and hidden, but there are many ways to set it. One way to set the hidden property [[Prototype]] is to use proto: