Event Loop In JavaScript

As a web developer we have knowledge about the JavaScript because in modern era almost all the dynamic websites use JavaScript for better user interface. But due to complex design it’s a bit difficult to understand the execution process. Event Loop is a most popular process in JavaScript but it is not easy to understand the working process of this.

Today I want to share my knowledge about Event Loop in JavaScript and I hope this blog help you to understand the Event Loop process in JavaScript.

As we know JavaScript runs code step by step means second line code execute just after finish the first line code. JavaScript always adds each line of code in a call stack.

Call stack is like a shopping bag like first item that enters into the shopping bag is the last item to goes out from the shopping bag and vice versa. We can also say call stack is like a Data Structure that defines and identifies our position in the program.

 

Example

function add(num1, num2) {
   console.log(num1 + num2);
}

function sub(num1, num2) {
   console.log(num1 - num2);
}

function mul(num1, num2) {
   console.log(num1 * num2);
}

function div(num1, num2) {
   console.log(num1 / num2);
}
       
(function () {
   var num1 = 2;
   var num2 = 3;

   add(num1, num2);

   sub(num1, num2);

   mul(num1, num2);

   div(num1, num2);

}) ();

when we execute the above file in which above code is written, then let’s see what happens in the Call stack.

1 . main function (anonymous function) of the file is pushed to the call stack.

 

2 . Then Self invoking function is pushed to the call stack.

 

3 . Then div() function will go to the call stack.

Then mul(), sub() and add() functions are entered to the call stack.

After all the functions enter to the call stack now call stack executes all the function one by one from top to the bottom. means add() function will execute first which entered last into the call stack. After execution of add() function it will be removed from the call stack. And this process will continue until completion of all the functions execution. After completion call stack will be empty.

Result will be –

5

-1

6

0.66666

Now let’s bring some twists on this above code

we know very well about setTimeout() function right? In setTimeout() function we can call function. setTimeout() itself is an asynchronous callback function.

Let’s have a look at the below example –

function add(num1, num2) {
   console.log(num1 + num2);
}

function sub(num1, num2) {
   console.log(num1 - num2);
}

function mul(num1, num2) {
   console.log(num1 * num2);
}

function div(num1, num2) {
   console.log(num1 / num2);
}
       
(function () {
  var num1 = 2;
  var num2 = 3;

  add(num1, num2);

  setTimeout(function () {
     sub(num1, num2);
  }, 3000);

  mul(num1, num2);

  setTimeout(function () {
     div(num1, num2);
  }, 3000);

})();

Now let’s see what happens in call stack. All the function will enter into the call stack one by one but at the time of execution there will be some little change.

1 . First add() function will be executed then you must think sub() function will be execute but actually not because sub() function is in callback function, so it will be executed after 3 second. But you can see mul() function will be executed after the add() function.

Here event loop comes in on concurrency.

means some how sub() function is removed from the call stack that’s why mul() function executes because JavaScript executes codes one by one in call stack. But it will execute after 3 seconds.

2 . Then div() function will be removed from the call stack and in the end main function (Anonymous function ()) and after 3 second sub() function will be invoked and then after 3 seconds div() function will be invoked.

Result –

5

6

-1

0.66666

This whole process is called as Event Loop In JavaScript.

Hope, this blog can help you to understand the Event Loop process. Thanks