JS Event LOOP, How this code works

Hey there! Today, let's dive into the fascinating world of the JavaScript event loop. It's a crucial concept to grasp if you want to build smooth and responsive web applications. So, let's get started!

What is the Event Loop?

The event loop is a mechanism in JavaScript that handles asynchronous operations, ensuring that they are executed in an orderly and efficient manner. It plays a vital role in maintaining the responsiveness of your web application.

How Does the Event Loop Work?

To understand the event loop, we need to talk about two main components: the call stack and the event queue.

Call Stack

The call stack is a data structure that keeps track of function calls in your code. Whenever a function is called, it's added to the top of the call stack. The JavaScript engine executes functions in a last-in, first-out (LIFO) manner. When a function completes, it's removed from the stack, and the execution continues with the function below it.

Callback Queue & Microtask Queue

Each callback queue and microtask queue holds a list of events or tasks that are ready to be executed. These events can include user interactions (like clicks or keyboard input) or other asynchronous operations, such as API requests or timer callbacks. Each event in the queue is associated with a function that needs to be executed when the event is triggered.

From these two queues, the Event loop gives priority to the MicroTask Queue. The microtask queue contains the promise callbacks and the methods push using queueMicrotask method.

The Loop

The event loop continuously checks if the call stack is empty. When the call stack is empty, it takes the first event from the queue and pushes its associated function onto the call stack for execution. This process repeats indefinitely, allowing your JavaScript code to handle various events and operations without blocking the main execution thread.

How this code works

Most of the interviews contain this kind of interview questions for checking your understanding of the Event Loop

Promise.resolve("resolved promise").then((e) => console.log(e));

setTimeout(() => {
  console.log("set time out 100");
}, 100);

queueMicrotask(() => {
  console.log("micro task 01");
});

console.log("main console 01");

setTimeout(() => {
  console.log("set time out 0");
}, 0);

queueMicrotask(() => {
  console.log("micro task 02");
});

console.log("main console 02");

When this code runs according to the following steps

1. The Promise callback will go to the Microtask queue

2. setTimeout will handle from the Web APIs and after 100ms it will populate in the callback queue

3. The callback from queueMicrotask will go to the microtask queue

4. The console print will print to the browser console ( this is the first console out up to now)

5. next setTimeout will handle from the APIs and because the timeout is 0ms it will immediately go to the callback queue

6. The callback from second queueMicrotask will go to the microtask queue

7. The console print will print to the browser console ( this is the second console out up to now)

It's time to work with the event loop now, we have the following queue items in the queues

From these two queues, the microtask queue is the prioritized queue, the event loop will handle all the microtasks and then it will go to the callback queue

So following will be the console output when executing this code

main console 01
main console 02
resolved promise
micro task 01
micro task 02
set time out 0
set time out 100

I think now you have a good understanding of how event loop work and let's meet with the new reading ....