What is Event loop in JavaScript?

#javascript #eventloop

Let's look into JavaScript Event loop from a different angle. Sounds interesting, right? It is! So, sit tight and let's dive into it!
The concept of event loop is very simple. But in order to understand that, first we need to be clear about some concepts related to event loop.

Inside Browser, there is a Javascript engine (we are considering V8 for chrome.) and an environment to run javascript properly. Javascript engine has two parts, Heap and Call Stack. And the engine has some assistant named Web APIs and Callback Queue.

Heaps

It's an unstructured memory block. Our code's memory allocation happens here. As a programmer we don't have to worry much about heaps.

Call Stack

We can consider Call Stack as a kitchen where all our code executed or cooked. Whenever we try to run a piece of code, it goes to call stack first and then executed. It works in LIFO style. That is Last In First Out.

const lunch = () => console.log("It's time for lunch!");

const dinner = () => console.log("It's time for dinner!");

const breakfast = () => {
  console.log("Time to breakfast!");
  setTimeout(lunch, 3000);
  dinner();
};

breakfast();

If we run the code above, The global execution context main() runs on the browser, and JS engine will start to read the code from the first line and will search for tasks. On the last line, one function is called. So, this function will go to the Call Stack and will execute the tasks. First it will print Time to breakfast! , then goes to the next line, where we have an asynchronous block of code.
As we know, JavaScript is synchronous and single-threaded language, this asynchronous block of code goes to the call stack and suddenly pops out. Here JS engine takes help from it's assistant, Web API. The setTimeout() waits on the Web API and after it's timer runs out (In this case, 3 seconds), After 3 seconds the callback function goes to the Callback Queue and waits for Call stack to be free. By this time, Call stack runs the other piece of codes. Prints

It's time for dinner!

Web APIs

Web API works as JS engines assistant. When JS engine have to deal with asynchronous code, it takes the help of Web API. Web API handles the blocking behavior of JavaScript code.
In this case, from our code above, we can say Web API will take the callback function

setTimeout(lunch, 3000);

, run it's timer, and pass it to Callback Queue after 3 seconds.

Callback Queue

It's a guard who monitors the stack of asynchronous callback functions who just completed the task of waiting and passed the gate of Web API. Callback Queue works using FIFO (First In First Out ) method. And now, they waits here to go back to Call Stack. But how will Call Stack know that there's some callback functions waiting in Callback Queue?
Here comes the star, Event Loop!

Event Loop

Event loop is just a guardian who keeps a good communication with Call Stack and Callback Queue. It checks if the call stack is free, then lets know the callback queue. Then Callback queue passes the callback function to Call stack to be executed. When all the callback functions are executed, the call stack is out and global execution context is free.

See! it was not complex at all! 😄
Thanks for reading.