Home/JavaScript Engine Masterclass 2026/

The Event Loop

Q: Why does Promise.then() run before setTimeout(0)?

Answer: Because Promise callbacks are placed in the Microtask Queue, while setTimeout callbacks are placed in the Macrotask (Callback) Queue. The Event Loop is designed to empty the entire Microtask Queue before it picks the next task from the Macrotask Queue..

Q: What happens to the Event Loop if the Call Stack is never empty?

Answer: The Event Loop can never pick up new tasks or microtasks. This is known as 'blocking the main thread,' and it causes the UI to freeze and stop responding to user input..

Master this topic with zero to advance depth.

Expert Answer & Key Takeaways

Mastering The Event Loop is essential for high-fidelity technical architecture and senior engineering roles in 2026.

The JavaScript Event Loop 2026

JavaScript is single-threaded, meaning it can only do one thing at a time. The Event Loop is the secret mechanism that allows it to handle asynchronous operations (like API calls or timers) without freezing the UI.

1. The Proof Code (The Execution Mystery)

console.log("1. Start");

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

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

console.log("4. End");

// Output:
// 1. Start
// 4. End
// 3. Promise (Microtask)
// 2. Timeout (Macrotask)

2. The 2026 Execution Breakdown

Call Stack: Start and End are synchronous. they go on the stack, execute, and pop off immediately.
Web APIs: setTimeout is sent to the browser's timer API. Even at 0ms, it's offloaded.
Microtask Queue: The Promise.then() callback is placed in the Microtask Queue. Microtasks have priority.
Callback Queue (Macrotasks): The setTimeout callback is placed here.
The Event Loop: Once the Call Stack is empty, it first clears the entire Microtask Queue, then picks one task from the Callback Queue.

3. The Modern Fix: Preventing Blockage

A common mistake is running heavy computation on the main thread, which 'blocks' the Event Loop and makes the page unresponsive.

// ❌ BAD: Blocks the event loop for 5 seconds
function heavyTask() {
  const start = Date.now();
  while (Date.now() - start < 5000) {} 
}

// ✅ GOOD: Use a Web Worker or break it into chunks using requestIdleCallback

4. Senior Secret: Microtask Starvation

If you recursively queue microtasks (e.g., a promise that resolves to another promise), the Event Loop will never move to the Macrotask queue. This can 'starve' the UI from rendering or handling clicks, effectively crashing the tab.

5. Critical Components

Call Stack: Where your code actually runs.
Microtask Queue: Promises, MutationObserver. (High Priority).
Callback Queue: setTimeout, setInterval, I/O events. (Lower Priority).
Render Pipeline: Happens between tasks if the stack is clear.

The Event Loop

Expert Answer & Key Takeaways

The JavaScript Event Loop 2026

1. The Proof Code (The Execution Mystery)

2. The 2026 Execution Breakdown

3. The Modern Fix: Preventing Blockage

4. Senior Secret: Microtask Starvation

5. Critical Components

Top Interview Questions

?Interview Question

?Interview Question

Course4All Engineering Team

Found an issue or have a suggestion?

The Event Loop

Expert Answer & Key Takeaways

The JavaScript Event Loop 2026

1. The Proof Code (The Execution Mystery)

2. The 2026 Execution Breakdown

3. The Modern Fix: Preventing Blockage

4. Senior Secret: Microtask Starvation

5. Critical Components

Top Interview Questions

?Interview Question

?Interview Question

Course4All Engineering Team

Explore More javascript

Memory Management

TypeError: [x] is not a function Fix

ReferenceError: [x] is not defined Fix

SyntaxError: Unexpected token Fix

Found an issue or have a suggestion?