Understanding Event Loop

April 6th, 2024 - 2 min read

Today is an important day of my life, the day (I think) I totally understand how Event Loop works.

As a JS developer, we need the support from Event Loop all the time. However, fully comprehending this concept can be challenging. I used to believe that I understood it, but I didn't.

Where is Event Loop in the JS picture

Let's look at this example:

console.log("Normal task 1");
 
setTimeout(() => {
  console.log("Macrotask");
}, 0);
 
Promise.resolve().then(() => {
  console.log("Microtask 1");
  queueMicrotask(() => {
    console.log("Microtask 2");
  });
});
 
console.log("Normal task 2");

Here's how Event Loop work:

In summary, if somebody asks me the short answer to the question What is Event Loop? I would say:

Event Loop is the mechanism from JS Run Time, that allows JS to perform async tasks. Its role is to always take a look at Call Stack. If the Call Stack is empty, it will take a look at the Microtask Queue first, push the tasks from the Microtask Queue into the Call Stack. If the Microtask queue is also empty, it will push the tasks from the Macrotask Queue into the Call Stack.