Understanding the JavaScript Event Loop: A Complete Guide

JavaScript is a single-threaded language, which means it can execute one task at a time. But still, we use it to build fast, non-blocking, asynchronous applications (like chat apps, real-time dashboards, etc.).

How is this possible?
👉 The answer lies in the Event Loop.

In this blog, we’ll break down:

• What the Event Loop is
• How it works behind the scenes
• Key components (Call Stack, Web APIs, Callback Queue, Microtask Queue)
• Execution process of tasks
• Example walkthroughs
• Why it’s important

🟢 What is the Event Loop?

The Event Loop is a mechanism that allows JavaScript to perform non-blocking asynchronous operations, despite being single-threaded.

It continuously checks whether the Call Stack is empty, and if so, pushes tasks (callbacks, promises, timers, etc.) from the queue into the stack for execution.

In simple words:
👉 The Event Loop is like a traffic manager that decides when JavaScript should execute which task.

🟢 Key Components of the Event Loop

1. Call Stack (Execution Stack)

A.Stores function calls in order.

B.Works on LIFO (Last In, First Out) principle.

Example:

function a() { console.log("A"); }
function b() { a(); console.log("B"); }
b();
// Execution: a() -> log "A" -> return -> log "B"

Web APIs (Browser APIs / Node APIs)

A.These are APIs provided by the environment (browser or Node.js).

B.Examples: setTimeout, DOM events, fetch, setInterval.

C.They run asynchronously and send results back later.

3.Callback Queue (Task Queue / Macrotask Queue)

A.Stores callbacks from Web APIs once their work is complete.

B.Examples: setTimeout, setInterval, DOM events.

4.Microtask Queue (Job Queue)

A.Stores tasks with higher priority than the callback queue.

B.Examples: Promise.then(), MutationObserver.

C.Microtasks are executed immediately after the current stack is empty, before moving to the callback queue.

🟢 How the Event Loop Works (Step by Step)

1. JavaScript starts executing code from the Call Stack.
2. If it encounters asynchronous tasks (setTimeout, fetch, Promise), they are handled by Web APIs.
3. Once done, the result (callback) is sent to either:
   • Microtask Queue → higher priority
   • Callback Queue → lower priority
4. The Event Loop checks:
   • Is the Call Stack empty?
   • If yes → execute all Microtasks (until empty).
   • Then → take one task from the Callback Queue.
5. Repeat forever.

🟢 Visual Example

console.log("Start");

setTimeout(() => {
  console.log("Timeout");
}, 0);

Promise.resolve().then(() => {
  console.log("Promise");
});

console.log("End");

Execution Flow:

1. console.log("Start") → prints Start.
2. setTimeout(..., 0) → goes to Web APIs, callback moved to Callback Queue.
3. Promise.resolve().then(...) → goes to Microtask Queue.
4. console.log("End") → prints End.
5. Call Stack is empty → Event Loop checks:
   • Run Microtasks first → prints Promise.
   • Then run Callback Queue → prints Timeout.

✅ Final Output:

Start  
End  
Promise  
Timeout  

🟢 Microtasks vs Macrotasks

🟢 Why is the Event Loop Important?

• Helps JavaScript manage asynchronous tasks.
• Prevents UI from freezing (non-blocking).
• Ensures promises are always resolved before timers.
• Understanding it helps debug tricky timing issues.

🟢 Real-Life Analogy

Think of JavaScript as a chef in a kitchen 🍳:

• Call Stack = What the chef is cooking right now.
• Web APIs = Helpers preparing side ingredients.
• Microtask Queue = Priority orders (VIP customers).
• Callback Queue = Normal orders.
• Event Loop = Waiter checking: “Is chef free? If yes, bring the next order.”

🟢 Final Thoughts

The Event Loop is the heartbeat of JavaScript’s concurrency model.

• Call Stack executes tasks.
• Web APIs handle async work.
• Microtask Queue ensures promises run quickly.
• Callback Queue handles regular async callbacks.

👉 Mastering the Event Loop is key to writing efficient, non-blocking JavaScript.

⚡ Next Time You See This Output Difference:

setTimeout(() => console.log("Timer"), 0);
Promise.resolve().then(() => console.log("Promise"));

You’ll know why Promise runs before Timer ✨

Perfect 👍 Let me walk you through the step-by-step timeline of why Promise executes before setTimeout without using any images.

Example Code:

setTimeout(() => console.log("Timer"), 0);
Promise.resolve().then(() => console.log("Promise"));

Step-by-Step Execution:

Step 1: Script starts

• setTimeout(..., 0) is encountered.
  → Goes to Web API, then its callback moves to the Callback Queue (macrotask).
• Promise.resolve().then(...) is encountered.
  → Callback goes to the Microtask Queue.

At this point:

• Callback Queue = [ Timer ]
• Microtask Queue = [ Promise ]

Step 2: Call Stack is empty

The Event Loop checks:

1. Are there microtasks pending? ✅ Yes (Promise).
2. Execute all microtasks first.

So Promise runs → prints:

Promise

Step 3: Microtask Queue empty

Now Event Loop moves to the Callback Queue.

• It takes Timer and pushes it into the Call Stack.
• Executes console.log("Timer").

Output:

Timer

✅ Final Output Order:

Promise
Timer

Rule of Thumb 🚀

• Microtask Queue (Promises, process.nextTick) always clears before Callback Queue (Timers, DOM events).
• Even if a setTimeout is 0ms, it waits for microtasks to finish.