The JavaScript Event Loop

JavaScript runs on a single thread, meaning it can only execute one piece of code at a time. Yet JavaScript programs routinely handle timers, network requests, and user interactions that take time to complete, without freezing. The event loop is the mechanism that makes this possible, coordinating the call stack with queues of pending work.

Understanding the event loop is essential for predicting the actual order in which asynchronous code runs — especially the surprising fact that a setTimeout with a delay of 0 milliseconds still runs after all currently pending synchronous code, no matter how quick that delay sounds.

Why it matters

JavaScript runs on a single thread, yet it handles timers, clicks and network responses without freezing. The event loop is how. It explains why a setTimeout of zero does not run immediately and why a long calculation locks the page, and predicting the order of output is a classic interview exercise.

The Call Stack

The call stack is where JavaScript keeps track of function calls currently in progress. When a function is called, a new frame is pushed onto the stack; when it returns, its frame is popped off. Because there is only one call stack, JavaScript can only run one function to completion at a time — this is what "single-threaded" means in practice.

Web/Runtime APIs and the Queues

Asynchronous operations like setTimeout, network requests, and DOM events are not handled directly by the JavaScript engine itself — they are handed off to APIs provided by the runtime environment (the browser or Node.js). When those operations complete, their callback functions are not run immediately; instead, they are placed into a queue to wait until the call stack is empty.

• Macrotask (task) queue — holds callbacks from sources like setTimeout, setInterval, and I/O events.
• Microtask queue — holds callbacks from Promises (.then/.catch/.finally) and queueMicrotask; it has higher priority than the macrotask queue.

How the Event Loop Coordinates Everything

The event loop continuously checks one simple condition: is the call stack empty? If it is, the event loop first drains the entire microtask queue (running every pending Promise callback, even ones queued by other microtasks), and only then takes the single oldest task from the macrotask queue and pushes it onto the call stack for execution. This cycle repeats indefinitely, which is why microtasks (Promises) always run before the next macrotask (like a setTimeout callback), even if the setTimeout was scheduled first.

Why setTimeout(fn, 0) Still Runs After Synchronous Code

Calling setTimeout(fn, 0) does not run fn immediately — it schedules fn as a macrotask to run after at least 0 milliseconds, but crucially, only once the call stack is completely empty. Since all currently executing synchronous code occupies the call stack right up until it finishes, and the event loop will not even glance at the task queue while the stack is non-empty, every line of synchronous code (and every pending microtask) runs to completion first, no matter how small the requested delay was.

Examples

console.log("1: synchronous start");

setTimeout(() => {
  console.log("4: setTimeout (macrotask)");
}, 0);

Promise.resolve().then(() => {
  console.log("3: promise .then (microtask)");
});

console.log("2: synchronous end");

1: synchronous start
2: synchronous end
3: promise .then (microtask)
4: setTimeout (macrotask)

setTimeout(() => console.log("macrotask"), 0);

Promise.resolve()
  .then(() => {
    console.log("microtask 1");
    return Promise.resolve();
  })
  .then(() => console.log("microtask 2 (chained)"));

Promise.resolve().then(() => console.log("microtask 3"));

console.log("synchronous code");

synchronous code
microtask 1
microtask 3
microtask 2 (chained)
macrotask

Exercise

Replace each 0 placeholder with one of the numbers 1 to 4, each used once, so that the program prints them in ascending order. Work out the order from the rules: synchronous code first, then microtasks, then timers.

Expected output: 1, 2, 3, 4 (one per line)

console.log(0); // TODO

setTimeout(() => console.log(0), 0); // TODO

Promise.resolve().then(() => console.log(0)); // TODO

console.log(0); // TODO

console.log(1);

setTimeout(() => console.log(4), 0);

Promise.resolve().then(() => console.log(3));

console.log(2);

Quick quiz

Interview questions