Exploring Event Loops: Key Concepts Explained

Before understanding the event loop, you need to know how a browser works and how JavaScript code runs inside it. Let’s dive deep into this.

To execute JavaScript code inside the browser, a browser needs an engine, similar to how other programming languages use a compiler or interpreter. For JavaScript, the Chrome browser uses the V8 Engine, Firefox uses SpiderMonkey, Microsoft's Edge browser uses the Chakra engine, and Apple's Safari browser uses JavaScriptCore, among others.

Every browser has its own JavaScript engine to run JavaScript code. Browsers also come with many features.

So, the browser have a lot of stuff like local storage, Timer, web API’s and more.

Whenever JavaScript code runs, it is sent to the call stack. The main job of the call stack is to execute everything inside it. The call stack doesn't have access to timers, so it doesn't wait for anything. Whatever is inside the call stack will execute immediately. And this call Synchronous execution of code(One by One).

Ahh, wait a second, what if i need to execute any block of code after the 5 second, it can’t do that. Because everything that given to inside the call stack will execute immediately. Call stack does not have Timer.

If we want to execute code after a certain amount of time, we need a "superpower," and that superpower is the Timer. So, how can we get that superpower? Let's find out.

As I explained above, the JavaScript engine is inside the browser, and the browser has the power of timers, web APIs, local storage, and much more. To access all these "superpowers," we need to use the web APIs.

Everything that are inside the web API’s are not the Part of JS Engine. Browser gives all the super power to the JS Engine. Browser wraps all the super power in the Window object and give it to the JS Engine.

To execute the code Asynchronous, here the two Things come into the Picture. Event Loop and Callback queue.

So now, whatever the code that we want to execute after some time. that is not going to the Call Stack, instead of this thet Async code send to the Callback Queue after the timer end, after the completion of the timer that callback send to the Callback Queue.

So the Event Loop is like a gate keeper that continuously checks the callback queue.

After Completing the Timer the callbacks send to the callback queue, And the Event Loop check the Call stack. If the Call stack Empty then the Event Loop send the Callback Queue to the Call Stack for the Execution.

Here's another Queue that helps execute fetch requests from Web APIs. This queue is the Microtask Queue, and it has a higher priority than the Callback Queue. The Microtask Queue holds promises (callback functions). So, what types of callbacks go inside the Microtask Queue? The answer is that all the callback functions that come through promises go inside the Microtask Queue.
If the Call stack is empty and both the Microtask Queue and Callback Queue have callbacks ready, the Event Loop sends the Microtask Queue code to the Call stack first because of its high priority.

As shown in the code snippet above, Line 1 and Line 4 are sent directly to the Call stack, so they will print first. Then, Line 2 is sent to the Callback queue, and Line 3 is sent to the Microtask queue. Because of its higher priority, Line 3 will print before Line 2.

The Event Loop's job is to continuously check the Microtask Queue, Callback Queue, and Call Stack. If the Call Stack is empty, the Event Loop sends the callback functions from the Microtask Queue and Callback Queue based on their priority.
That’s it.

I hope you now understand the concept of the Event Loop, as well as the Call Stack, Callback Queue, and Microtask Queue.

Happy Coding 😊😊