The JavaScript runtime is single-threaded, yet it handles high-throughput asynchronous I/O effortlessly. This non-blocking architecture is made possible by the Event Loop.
Understanding the exact prioritization between the Call Stack, Microtasks, and Macrotasks is one of the most common technical interview topics.
The Event Loop Execution Pipeline
1. Call Stack: Executes synchronous code line by line.
2. Microtask Queue: Drained completely after the call stack empties (Promise callbacks, queueMicrotask, MutationObserver).
3. Macrotask Queue: Picks one task per loop iteration (setTimeout, setInterval, setImmediate, I/O).
4. UI Render: The browser updates DOM rendering (typically 60Hz/120Hz).
Tracing Code Execution
What is the output of the following snippet?
setTimeout(() => console.log("B"), 0);
Promise.resolve().then(() => { console.log("C"); queueMicrotask(() => console.log("D")); });
console.log("E"); ```
Step-by-Step Breakdown:
1. console.log("A") runs synchronously → Logs A.
2. setTimeout callback scheduled in Macrotask Queue.
3. Promise.resolve().then(...) callback scheduled in Microtask Queue.
4. console.log("E") runs synchronously → Logs E.
5. Call stack is now empty. The Event Loop drains the Microtask Queue:
- Executes Promise callback → Logs C.
- Enqueues new microtask queueMicrotask(...) → Placed at end of Microtask Queue.
- Microtask Queue is drained again → Logs D.
6. Microtask Queue is completely empty. The Event Loop picks the first Macrotask:
- Executes setTimeout callback → Logs B.
Final Output: A, E, C, D, B
---
Practice Live JavaScript Execution Try running asynchronous event loop experiments live in a collaborative editor. [Create a Free Pairlet Room](https://www.pairlet.dev/interview/new).
Frequently Asked Questions
Why do Promise callbacks execute before setTimeout(fn, 0)?
Promise callbacks (.then, .catch, .finally) and queueMicrotask are placed in the Microtask Queue, which is drained completely after every stack execution before the Event Loop picks a single task from the Macrotask Queue (setTimeout, setInterval).
Conduct Live Coding Interviews with Zero Friction
No candidate sign-up required. Create an instant room, share the link, and code together in real time with shared code execution.