JavaScript Event Loop: Concurrency Model, Call Stack & Microtask Priority

The Event Loop is the foundational architectural component that allows single-threaded JavaScript to handle non-blocking, highly concurrent operations. If you understand the Event Loop, you understand the true runtime behavior of asynchronous JavaScript.

Figure 14: JavaScript Concurrency Model: Call Stack, Web APIs, Microtask Queue (VIP), Macrotask Queue, and Event Loop.

The 4 Components of the Concurrency Model

1. Call Stack: Single thread executing synchronous code frames in LIFO order.
2. Web APIs / Node APIs: Background multi-threaded host workers managing timers, network fetch, and DOM events.
3. Microtask Queue (VIP Priority): Houses Promise callbacks (.then, .catch, .finally), queueMicrotask(), and async/await continuations.
4. Macrotask / Callback Queue: Houses setTimeout, setInterval, setImmediate, and I/O events.

The Classic Interview Puzzle (Dry-Run Execution)

Predict the exact output order of this script:

console.log("1. Synchronous Global Script");

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

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

console.log("5. End of Global Script");