What is the JavaScript Event Loop?

The Event Loop in JavaScript is a mechanism that handles asynchronous operations by executing synchronous code first, then microtasks, and finally macrotasks.

What is the difference between microtasks and macrotasks?

Microtasks include Promise callbacks and queueMicrotask, while macrotasks include setTimeout, setInterval, and I/O operations.

hromium.com - Event Loop Visualized

The Event Loop Model

For a clear explanation, we will use Event Loop model.

Let's take a closer look at it.

So, in our example, we have code

Synchronous code (lines 1 and 15);
                                One macro task (line 3);
                                Two micro tasks (lines 7 and 11);

The macro task is represented by a large red ball.

The micro tasks are shown as two smaller green balls.

And the synchronous code is represented by white cubes.

JavaScript Execution Flow

The code executes in the main program thread, line by line from top to bottom.

All tasks go into the Call Stack.

From there, they are either sent to the Web API or immediately output their result to the user's screen.

Microtask Queue and Task Queue

Tasks that return after being processed by the Web API go into queues:

Microtasks go into the MicroTask Queue.
Macrotasks go into the Task Queue.

Event Loop Cycle

When the Call Stack is empty, the Event Loop comes into play—in our model, it is represented as a yellow egg-shaped mechanism.

First, it "opens" the MicroTask Queue, allowing all tasks from it to enter the Call Stack one by one, executing them all in sequence.

Only after all microtasks have been completed does the Event Loop move to the Task Queue, allowing one macrotask to enter the Call Stack per cycle.

setTimeout fired! 🔥

This is my first guide, and I’m planning to create more! But I need to know if you want them.

Drop your email to let me know you’re interested — and be the first to get notified when new guides on Web API, Promises, and Closures are ready!

Time to explain how the Event Loop works

First, the synchronous code executes.

console.log('Start') from the first line enters the CallStack, and we see the message "Start" on the screen.
                                
                                Next, we encounter a setTimeout call with zero delay on the third line.

Even though the delay is zero, this call does not execute immediately. Instead, it is scheduled as a macrotask and sent to the Web API, whose job is to track the timeout.

Once processed by the Web API, the macrotask moves to the Task Queue, where it waits to be executed.

Then, two microtasks are created:

One via Promise.then;
                                Another via queueMicrotask;

After being processed in the Web API, both are placed into the MicroTask Queue.

Once all asynchronous operations are scheduled, the synchronous code continues executing, and we see the message "End" on the screen.

At this point, the Call Stack is empty, so the Event Loop takes over. It first processes the MicroTask Queue:

Promise.then executes, logging "Promise.then (microtask)"
                        
                                queueMicrotask runs, logging "queueMicrotask (microtask)"

Only after all microtasks have been executed does the Event Loop move to the Task Queue, where setTimeout fires and logs "setTimeout (macrotask)".

This is how the Event Loop controls execution order:

Synchronous code first
Microtasks next
Macrotasks last

Now you definitely understand how the Event Loop works in JavaScript — just in case you're asked about it in an interview!

JavaScript Macrotasks vs Microtasks: Key Differences and Examples

In JavaScript, there is the concept of "tasks" — operations that do not execute immediately but are scheduled by the engine in a queue.

Tasks are generally divided into macrotasks and microtasks.

Macrotasks include:

setTimeout / setInterval – tasks scheduled with timers;
setImmediate (Node.js) – similar to setTimeout, but specific to Node.js;
I/O operations – handling input/output events such as mouse clicks, keyboard events, etc.;
requestAnimationFrame (browsers) – used for rendering and animation-related tasks;

Microtasks include:

Promise callbacks – handlers passed to .then(), .catch(), .finally();
queueMicrotask – explicitly adds a function to the microtask queue;
mutationObserver callbacks – functions used to detect DOM changes;
process.nextTick (Node.js) – executes before other microtasks, even though it technically doesn’t belong to the standard microtask queue;

Understanding the distinction between macrotasks and microtasks is key to mastering the Event Loop!

Role of Web API

JavaScript is a single-threaded language, which in our model is clearly represented as a single "pipe" (the Call Stack) of limited width.

If a task that takes a long time to execute enters the Call Stack, it will block the pipe, preventing other operations from running. In simple terms, the program will freeze and become unresponsive to user actions.

To prevent such situations, the Event Loop works together with the Web API. The Web API takes microtasks and macrotasks for processing, freeing up the Call Stack. This ensures that JavaScript code does not get stuck on long-running operations.

Once tasks are processed, the Web API returns them with results to their respective queues:

Microtasks go to the MicroTask Queue
Macrotasks go to the Task Queue

The Event Loop then checks if the Call Stack is empty. If it is:

All microtasks from the MicroTask Queue are executed first.
One macrotask from the Task Queue is executed per cycle.

On the next cycle, the process repeats, keeping JavaScript efficient and responsive!

hromium

JavaScript Event Loop Visualized – The Ultimate Interactive Guide

TL;DR: How the Event Loop works