What is Event Loop and what happened behind it?

What is Event loop?

The event loop in JavaScript is a handy feature that helps us to handle code execution in an asynchronous and non-blocking way.

With the help of event loop, we can schedule the execution of various tasks such as code snippets, network requests, and other events after a certain amount of time.

console.log('Start')


setTimeout(() => {
? console.log('Inside timeout');
}, 2000);


console.log('End');

;

OutPut: 
Start
End
Inside timeout // after 2 second with block else code        

That’s play very essential role in improving the speed of our web applications without blocking any other code. In this we can also trigger a piece of code, call back function on event occurs.

Example:

Imagine you're a chef working in a restaurant. The kitchen represents your JavaScript environment, and you are the event loop.

The orders placed by customers are like the events in JavaScript. Instead of cooking each order as it comes, you write it down on a notepad (the event queue) and keep an eye on it while working on other tasks.

You continuously check your notepad, and as soon as an order appears (event occur), you start preparing it. This allows you to handle multiple orders and tasks efficiently.

What the Scenario behind the Event Loop in JS?

In JavaScript, how event loop manages the execution of code, lets explore. It consists of two primary components: the first is call stack and the second is event queue.

Call Stack: The call stack is a data structure that keeps track of function calls. When a function is called, it is added to the top of the stack. Each function executes in a last-in, first-out (LIFO) order. When a function completes, it is removed from the stack, allowing the next function to run.

Event Queue: The event queue is a queue-like data structure that holds events and their associated callback functions. Events can include user interactions, timers, network requests, and more. When an event occurs, its corresponding callback function is added to the event queue.

Event Loop: The event loop is responsible for continuously monitoring the call stack and event queue. It checks if the call stack is empty and if there are any events in the queue. If the call stack is empty, it takes the first event from the queue and pushes its callback function onto the call stack for execution. This process repeats, allowing asynchronous code to run alongside synchronous code.

Conclusion

Event Stack is just like container that store all function call, it execute all function according to LIFO order until all functions executed.After executing all functions from call stack, it takes callback function or other function from event queue ( if it have) to execute. This process running until all functions executed.

This all process monitor by event loop, it work with out blocking any other part of synchronous code.

Thanks for reading pleas share your feedback... and tell it really full fill your doubts and confusions. Follow me for useful information and my experience.

Share it in your circle if you find useful.