How javascript Event Loop works?

Hi, the Javascript run-time environment is included in the browsers and they have extra things: the Javascript Engine, Web API, Callback Queue and Event loop.

So the browser give us some methods to use like AJAX, timeOut, DOM, and more.

Check this image:

Let’s see this code example and figure out how the Javascript Run-time environment works:

As JS go from top to bottom reading the code line by line (Synchronous), first go through line the console.log(‘1’) insert into the the Call Stack and execute that code:

console.log('1'); // 1 synchronous

setTimeout(()=> {
  console.log('2');
}, 4000)

console.log('3');

/*---------JUST FOR EXPLANATION----------------*/

console.log('1'); // Inserted into the call stack, execute and removed
// CALL STACK

// WEB API

// CALLBACK QUEUE

// EVENT LOOP

Following the same example …

Then go to the next line setTimeout and insert that setTimeout code into the Call Stack:

console.log('1');

setTimeout(()=> { // 2
  console.log('2');
}, 4000)

console.log('3');

/*---------JUST FOR EXPLANATION----------------*/

setTimeout(()=> {
  console.log('2');
}, 4000)
// CALL STACK

// WEB API

// CALLBACK QUEUE

// EVENT LOOP

And because the timeout is part of the Web API so it triggers the Web API and say: hey setTimeout it has been call!

So, it’s removed from the Call Stack and inserted into the Web API

Following the same example …

console.log('1');

setTimeout(()=> { // 2
  console.log('2');
}, 4000)

console.log('3');

/*---------JUST FOR EXPLANATION----------------*/

// CALL STACK

setTimeout, 4000 // execute this code in 4 seconds
// WEB API

// CALLBACK QUEUE

// EVENT LOOP

And because the Call Stack is empty then the Javascript engine goes to the next line console.log(‘3’) and insert that line of code in the Call Stack and will execute that line:

Following the same example …

console.log('1');

setTimeout(()=> {
  console.log('2');
}, 4000)

console.log('3'); // 3

/*---------JUST FOR EXPLANATION----------------*/

console.log('3'); // Inserted into the call stack, execute and removed
// CALL STACK

setTimeout, 4000 // execute this code in 4 seconds
// WEB API

// CALLBACK QUEUE

// EVENT LOOP

Then the setTimeout is done (after 4 seconds) and removed from Web API, but the callback function that is inside the setTimeout(() => {…..} will be inserted into the Callback Queue.

Remember that a callback is a function that is to be executed after another function has finished executing.

Following the same example …

console.log('1');

setTimeout(()=> {
  console.log('2');
}, 4000)

console.log('3');

/*---------JUST FOR EXPLANATION----------------*/

// CALL STACK

// WEB API

callback() // function that is inside the setTimeout
// CALLBACK QUEUE

// EVENT LOOP

The Event loop is checking all the time if the Call Stack is empty, so if is empty and nothing is running right now then the Javascript Engine is going to say: hey do we have any callbacks in the call back queue?

In this case because now the Call Stack is empty then the callback function will be moving into the Call Stack, like this:

Following the same example …

console.log('1');

setTimeout(()=> {
  console.log('2');
}, 4000)

console.log('3');

/*-------------------------*/

console.log('2') // Inserted into the call stack, execute and removed
callback() // Because we are done with the callback, the will be removed
// CALL STACK

// WEB API

// CALLBACK QUEUE

// EVENT LOOP

Result:

So because setTimeout method is Asynchronous it will follow in the entire process of the Call Stack, Web API, Callback Queue, Event Loop.

Result:

By Cristina Rojas.