Call Stack vs Task Queue in JavaScript

Call Stack vs Task Queue in JavaScript

The call stack and the task queue are two sides of JavaScript's execution model. Knowing how they interact explains the order in which code runs.

The Call Stack

• Where synchronous code runs.
• LIFO. One frame active at a time.
• A function on the stack blocks everything below it.

The Task Queue (Macrotask Queue)

• Holds callbacks from setTimeout, setInterval, I/O, UI events.
• FIFO. The oldest callback is moved to the stack first.
• The event loop moves a callback from this queue to the stack only when the stack is empty.

The Microtask Queue

• Holds callbacks from Promise.then, queueMicrotask, MutationObserver.
• FIFO. The event loop drains this queue completely before touching the macrotask queue, and before rendering.
• Microtasks can starve macrotasks if you keep adding them.

Order of Execution

1. Run all synchronous code on the call stack.
2. When the stack is empty, drain all microtasks.
3. Run one macrotask.
4. Drain all microtasks generated by that macrotask.
5. Render (if needed).
6. Repeat from step 3.

Example

console.log("1");
setTimeout(() => console.log("2"), 0);
Promise.resolve().then(() => console.log("3"));
console.log("4");

Output: 1, 4, 3, 2.

• 1 and 4 are synchronous.
• 3 is a microtask, runs after the stack empties.
• 2 is a macrotask, runs after all microtasks.

Why This Matters

• Promise callbacks always run before setTimeout callbacks, even with 0 delay.
• A long synchronous function delays both microtasks and macrotasks.
• An infinite chain of microtasks can freeze the page (the macrotask queue never gets a turn).

The Takeaway

The call stack runs code now. The microtask queue runs next (drained fully), then the macrotask queue runs one task at a time. The event loop moves callbacks from queues to the stack only when the stack is empty. This order explains all async timing in JS.