The JavaScript Event Loop — Explained With One Example

JavaScript runs one thing at a time, yet handles thousands of async events. The event loop is the mechanism — and interviewers love asking you to predict output.

The question they always ask

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

// Output: 1, 4, 3, 2

Why that order

1. Sync code first: 1, 4 — straight down the call stack
2. Microtasks next: promise callbacks (3) — the entire microtask queue drains
3. Macrotasks last: setTimeout (2) — one per loop turn

setTimeout(fn, 0) never means "now" — it means "after all sync code AND all pending microtasks".

Why it matters practically

• A long sync loop freezes clicks, scrolling, everything — offload heavy work to Web Workers (our DSA judge does exactly this)
• UI updates batch between loop turns — that is why frameworks feel instant