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
The Promise callback will go to the Microtask queue
setTimeout will handle from the Web APIs and after 100ms it will populate in the callback queue
The callback from
queueMicrotask
will go to the microtask queueThe console print will print to the browser console ( this is the first console out up to now)
next setTimeout will handle from the APIs and because the timeout is 0ms it will immediately go to the callback queue
The callback from second
queueMicrotask
will go to the microtask queueThe 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
Callback Queue | Microtask Queue |
setTimeOut with 0ms | Promise resolve |
setTimeout with 100ms | 1st queueMicrotask |
2nd queueMicrotask |
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 ....