Event Loop in JavaScript

Hello readers, in this blog we'll be going to learn about the event loop which is responsible for executing the code, managing events and performing various tasks in javascript.

Before we continue let us understand some important things about javascript

Javascript is a synchronous and single-threaded language which means it will execute one command at a time in synchronous order and single-threaded implies it has only one call stack in which the whole program runs.

Every web browser has a Javascript engine inside it that executes and compiles javascript code. It has a call stack that has a Global execution context and some additional features like local storage, setTimeout, etc. JavaScript uses these features with the help of various web APIs.

Let's understand above things with the help of code:

console.log("start...");
setTimeout(function callBackFn() {
    console.log("I'm timer");
}, 3000);
console.log("end...");

When this code will run first a Global execution context(GEC) is created and put this code in the call stack.

console.log("Start..."); // this calls the console web API which prints Start in the console.

setTimeout(function callBackFn() 
{
 console.log("I'm Timer");
}, 3000); //this calls the setTimeout web API which gives access to timer feature of web browser. It stores the callback callBackFn() and starts timer

console.log("End..."); // calls console API and logs in console . After this GEC gets deleted from the call stack.

While all this is happening, the timer is constantly running. After it reaches 0, the callback callBackFn() has to run.

Now we need this callBackFn to go into the call stack. Only then will it be executed. Here comes Event Loop.

Since cbcallBackFn() cannot directly go into the callstack for execution. So It goes through the callback queue when the timer expires(i.e. after 3 seconds).

Every time the Event loop keeps checking the callback queue, and if it has any element then it sends it into the call stack. In our code, once cbcallBackFn() get into the callback queue, the event loop pushes it into call stack and it gets executed.

Summary:

EVENT LOOP: It is a process that checks whether the call stack is empty or not and also checks that the callback queue contains a pending task to process. If it is then it calls the top event handler and removes it from the queue.

Call Stack: It is a stack that contains all called functions. When we call a function, we push it into the stack. It gets popped out from the stack when the function execution is completed.

WEB APIs: These are responsible for serving the callback queue, providing many features such as the network calls, setTimeout, DOM events.

CALLBACK QUEUE: It is also known as, Event Queue. With this queue, we have the callbacks like setTimeout, setInterval, setImmediate , etc. These functions wait to be dequeued and put on the Call Stack by event loop.