DEV Community: Ejjraifi Hamza

JavaScript Event Loop

Ejjraifi Hamza — Sat, 01 Jan 2022 21:37:11 +0000

JavaScript single-threaded model

everyone knows that JavaScript is a single-threaded programming language. In other words, JavaScript can do only one thing at a single point in time.

The JavaScript engine executes a script from the top of the file and works its way down. JavaScript creates the execution contexts and pushes and pops functions onto and off the call stack in the execution process.

If a function takes a long time to execute, you cannot interact with the web browser during the function’s execution because the page hangs.

A function that takes a long time to complete is called a blocking function. Technically, a blocking function blocks all the interactions of the webpage, such as mouse click.

A blocking function can be a function that downloads a file from a remote server or calls an API from an external server.

Example of blocking function

function task(message) {
    // emulate time consuming task
    let n = 10000000000;
    while (n > 0){
        n--;
    }
    console.log(message);
}

console.log('Start script...');
task('Download a file.');
console.log('Done!');

So what we have here is a big while loop inside the task() function to emulates a time-consuming task, the task() function is a blocking function, why ? because it takes a long time to complete.

And therefore the script will hangs for a few seconds (depending on how fast the computer is) and issues the following output

Start script...
Download a file.
Done!

to execute the script, the JavaScript engine places the first call console.log() on top of the stack and executes it. Then, JavaScript places the task() function on top of the call stack and executes the function.

However, it’ll take a while to complete the task() function. Therefore, you’ll see the message 'Download a file.' a little time later. After the task() function completes, the JavaScript engine pops it off the call stack.

Finally, the JavaScript engine places the last call to the console.log('Done!') function and executes it, which will be very fast.

The following figure illustrates this

Callbacks to the rescue

To prevent a blocking function from blocking other activities, you typically put it in a callback function for execution later

function task(message) {
    // emulate time consuming task
    let n = 10000000000;
    while (n > 0){
        n--;
    }
    console.log(message);
}

console.log('Start script...');

setTimeout(() => {
    task('Download a file.');
}, 1000);

console.log('Done!');

In this example, you’ll see the message 'Start script...' and 'Done!' immediately. And after that, you’ll see the message 'Download a file'.

Here’s the output:

Start script...
Done!
Download a file.

When you call the setTimeout() function, make a fetch request or click a button, the web browser can do these activities concurrently and asynchronously.

The setTimeout(), fetch requests, and DOM events are parts of the Web APIs of the web browser.

In our example, when you call the setTimeout() function, the JavaScript engine places it on the call stack, and the Web API creates a timer that expires in 1 second.

Then JavaScript engine place the task() function is into a queue called a callback queue or a task queue.

The following figure illustrates this

The event loop is a constantly running process that monitors both the callback queue and the call stack.

The event loop before move task() from the callback queue, first ask call stack if empty, if not the event loop waits until it is, however if empty then he moves task() to the call stack.

that's it for event loop, next post will be about hoisting

Summary

In this post, you have learned about the JavaScript event loop, a constantly running process that coordinates the tasks between the call stack and callback queue to achieve concurrency.

JavaScript Call Stack

Ejjraifi Hamza — Sat, 01 Jan 2022 20:44:40 +0000

JavaScript engine uses a call stack to manage execution contexts: the Global Execution Context and Function Execution Contexts.

The call stack works based on the LIFO principle i.e., last-in-first-out.

When you execute a script, the JavaScript engine creates a Global Execution Context and pushes it on top of the call stack.

Whenever a function is called, the JavaScript engine creates a Function Execution Context for the function, pushes it on top of the Call Stack, and starts executing the function.

If a function calls another function, the JavaScript engine creates a new Function Execution Context for the function that is being called and pushes it on top of the call stack.

When the current function completes, the JavaScript engine pops it off the call stack and resumes the execution where it left off in the last code listing.

The script will stop when the call stack is empty.

JavaScript call stack

start with this code below

function add(a, b) {
  return a + b;
}

function average(a, b) {
  return add(a, b) / 2;
}

var x = average(10, 20);

JavaScript engine execute the code above, and right after the calling of average() function, he will take the function call and put it inside call stack, since average() function calling add() function, the same thing will happen again, he will take the function call add() and put it inside call stack

The following figure illustrates this

Stack overflow

The call stack has a fixed size, depending on the implementation of the host environment, either the web browser or Node.js.

If the number of the execution contexts exceeds the size of the stack, a stack overflow will occur.

consider this code below

function foo() {
  foo();
}

foo();

when you execute a recursive function that has no exit condition, it will result in a stack overflow error:

The following figure illustrates this

that's it for call stack, next post will be about event loop

Summary

In this post, you have learned about the JavaScript call stack that helps keep track of the execution contexts or function calls.

JavaScript Runtime

Ejjraifi Hamza — Tue, 28 Dec 2021 20:11:02 +0000

So many javascript developers, a senior developers with more than 5 years of experience, and trust me, they really don't know what really happen behind the scene when they executing a javascript code.
Not because it's hard to learn, But they think it's not worth wasting time for, as an answer to them, how can you call yourself a javascript web developer if you don't know how your code is implemented or how javascript engine execute your code.
This post will be devided into five articles and this is the first one, i will cover everthing about javascript runtime, we will see:

Execution Context
Call Stack
Event Loop
Hoisting
Variables Scopes

So without further preamble, let's start.

JavaScript Execution Context

start with this code below

var x = 10

function addOne(a){
return a++
}

var y = addOne(x)

console.log(y) // 11

It's straightforward code. However, behind the scene, JavaScript does many things.
So when a JavaScript engine executes a script, it creates execution contexts. Each execution context has two phases: the creation phase and the execution phase.

The creation phase

When a script executes for the first time, the JavaScript engine creates a Global Execution Context. During this creation phase, it performs some tasks:

Create a global object i.e., window in the web browser or global in Node.js.
Create a this object binding which points to the global object above.
Setup a memory heap for storing variables and function
Store the function declarations in the memory heap and variables within the global execution context with the initial values as undefined.

The following figure illustrates this

In our example, during the creation phase, the JavaScript engine stores the variables x and y and the function declaration addOne() in the Global Execution Context. Besides, it initializes the variables x and y to undefined.
Now when creation phase has finished, JavaScript engine make the global execution context moves automatically to the execution phase

The Execution Phase

During the execution phase, the JavaScript engine executes the code line by line. In this phase, it assigns values to variables and executes the function calls.

The following figure illustrates this

For every function call, the JavaScript engine creates a new Function Execution Context.

Function Execution Context

The Function Execution Context is similar to the Global Execution Context, but instead of creating the global object, it creates the arguments object that contains a reference to all the parameters passed into the function:

The following figure illustrates this (creation phase)

During the execution phase of the function execution context, it assigns 10 to the parameter a and returns the result (11) to the Global Execution Context:

The following figure illustrates this (execution phase)

That's all for execution context, next post will be about call stack

Summary

In this post, you have learned about the JavaScript execution contexts, including the Global Execution Context and Function Execution Contexts.

JavaScript Hoisting

Ejjraifi Hamza — Wed, 15 Dec 2021 11:11:19 +0000

In this post i will try to give you full understanding about an important concept which is Javascript Hoisting, and how it works behind the scenes.

So without further preamble, let's start by this picture below

Now you thinking Why did you bring this crane here 😕.
Just take a minute and think about it, Isn't it the job of a crane to hoist something?
In our case its hoist variable and function declarations to the top of your code.

Variable hoisting

console.log(number); // undefined
var number = 12;

Why giving me undefined, isn't it supposed to giving me an error like

Uncaught ReferenceError: Cannot access 'number' before initialization.

However, the first line of code doesn’t cause an error because the JavaScript engine moves the variable declaration to the top of the script, The following figure illustrates this

Technically speaking, the JavaScript engine places the variable number in the memory and initializes its value to undefined.
Now you get it 😎

The let keyword

The following declares the variable number with the let keyword:

console.log(number);
let number = 12;

Now it don't giving me undefined, instead throw me an error

Uncaught ReferenceError: Cannot access 'number' before initialization.

The error message explains that the number variable is already in the heap memory. However, it hasn’t initialized.
Behind the scenes, the JavaScript engine hoists the variable declarations that use the let keyword. However, it doesn’t initialize those variables.
Notice that if you access a variable that doesn’t exist, the JavaScript will throw a different error:

console.log(name);
let number = 12;

Here is the error:

"ReferenceError: name is not defined

Function hoisting

Like variables, the JavaScript engine also hoists the function declarations. It moves the function declarations to the top of the script. For example:

let x = 20,
    y = 10;

let result = add(x,y);
console.log(result); // 30

function add(a, b){
return a + b;
}

This give me 30 because of hoisting , The following figure illustrates this

During the creation phase of the execution context, the JavaScript engine places the add() function declaration in the heap memory.
To be precise, the JavaScript engine creates an object of the function type and a function reference called add that refers to the function object.

Function expressions

The following example changes the add from a regular function to a function expression:

let x = 20,
    y = 10;

let result = add(x,y);
console.log(result); // 30

var add = function(x, y){
return a + b;
}

If you execute the code, the following error will occur:

"TypeError: add is not a function

During the creation phase of the global execution context, the JavaScript Engine creates the add variable in the memory and initializes its value to undefined.
When executing the following code, the add is undefined, hence, it isn’t a function.

Arrow functions

The following example changes the add function expression to the arrow function:

let x = 20,
    y = 10;

let result = add(x,y);
console.log(result);

var add = (x, y) => x + y;

The code also issues the same error as the function expression example because arrow functions are syntactic sugar for defining function expressions.

"TypeError: add is not a function

Similar to the functions expressions, the arrow functions aren’t hoisted.

Summary

JavaScript hoisting occurs during the creation phase of the execution context that moves the variable and function declarations to the top of the script.
The JavaScript engine hoists the variables declared using the let keyword, but it doesn’t initialize them as the variables declared with the var keyword.
Function expressions and arrow functions aren’t hoisted.