How does the JavaScript event loop handle async work?

Question

Accepted Answer

JavaScript runs on a **single thread**, so it can only do one thing at a time. The **event loop** is what lets it handle async work without blocking: it runs the call stack, and when the stack is empty, it pulls callbacks from queues.

There are two queues with different priorities:
- **Microtasks**: Promise callbacks (`.then`), `queueMicrotask`. Drained **completely** after each task, before rendering.
- **Macrotasks**: `setTimeout`, I/O, UI events. One is processed per loop iteration.

```js
console.log("1");                         // sync
setTimeout(() => console.log("2"), 0);    // macrotask
Promise.resolve().then(() => console.log("3")); // microtask
console.log("4");                         // sync
// Output: 1, 4, 3, 2
```

## Why that order

1. Synchronous code runs first: `1`, `4`.
2. The stack empties → drain **all microtasks**: `3`.
3. Then take **one macrotask**: `2`.

This is why a `Promise.then` always runs **before** a `setTimeout(…, 0)`, even though both are "async" — microtasks have priority.

## A practical consequence

```js
// ❌ blocks the single thread — UI freezes for 5 seconds
while (Date.now() - start < 5000) {}
```

Long synchronous work blocks everything (rendering, clicks). Offload heavy CPU work to a **Web Worker** (a real separate thread).

## Why it matters

Understanding the loop explains async ordering, why promises resolve before timers, and why never to block the main thread — the core mental model for all async JavaScript.