The Event Loop in JavaScript: A Complete Explanation

The Event Loop in JavaScript: A Complete Explanation

The event loop is the mechanism that allows JavaScript (single-threaded, synchronous) to handle async operations without blocking. Here is the complete explanation.

The Components

• Call Stack: where JS code runs. One function at a time. LIFO.
• Heap: where objects live in memory.
• Web APIs: browser-provided async operations (setTimeout, fetch, DOM events, geolocation). These run outside the engine.
• Microtask Queue: callbacks from Promise.then, queueMicrotask, MutationObserver.
• Macrotask Queue (Task Queue): callbacks from setTimeout, setInterval, I/O, UI events.
• Event Loop: continuously checks if the call stack is empty, then moves callbacks from queues to the stack.

How It Works

1. Synchronous code runs on the call stack.
2. When the code hits an async operation (setTimeout, fetch), it hands it to a Web API.
3. The engine continues running synchronous code (it does not wait).
4. When the async operation completes, the callback is pushed to a queue.
5. The event loop checks: is the call stack empty?
6. If yes, drain all microtasks (promise callbacks).
7. Then take one macrotask (setTimeout callback).
8. Repeat from step 5.

Order of Execution

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 (stack).
- `3` is a microtask (runs after stack empties).
- `2` is a macrotask (runs after microtasks).

### Microtasks vs Macrotasks

- **Microtasks**: Promise.then, queueMicrotask, MutationObserver, process.nextTick (Node.js). The event loop drains ALL microtasks before any macrotask and before rendering.
- **Macrotasks**: setTimeout, setInterval, I/O, UI events, messageChannel. The event loop takes ONE macrotask, then drains microtasks.

### Rendering

The browser renders between macrotasks (if needed). Microtasks run before rendering, so they can delay the paint if they take too long.

### Blocking the Stack

If synchronous code takes 5 seconds, all queued callbacks wait 5 seconds. The event loop cannot run them until the stack is empty.

### Starvation

If microtasks keep adding more microtasks, the event loop never reaches the macrotask queue. The page freezes. This is called microtask starvation.

### The Takeaway

The event loop moves callbacks from queues to the call stack when the stack is empty. Microtasks (promises) always run before macrotasks (timers, events). Blocking the stack delays everything. Microtasks can starve macrotasks. Understanding this order explains all async timing in JavaScript.