What is Event loop in JavaScript?
Tags: javascript, eventloop
Published: 2021-08-30 12:55:30

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 **L**ast  **I**n **F**irst **O**ut.
 ```
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** (**F**irst  **I**n **F**irst **O**ut ) 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.