Piye carane JavaScript event loop nangani async work?

Question

Accepted Answer

JavaScript mlakoni ing **thread tunggal**, mula bisa ngrungokake sawijining bab ing sakabehing wektu. **Event loop** minangka sing ngidini nangani async work tanpa blocking: nglakokake call stack, lan nalika stack kosong, nggoleki callbacks saking queue.

Ada loro queue kanthi prioritas beda:
- **Microtasks**: Promise callbacks (`.then`), `queueMicrotask`. Dikosongake **kabeh** sawise saben task, sadurunge rendering.
- **Macrotasks**: `setTimeout`, I/O, UI events. Siji diproses saben 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
```

## Mengapa urutan kuwi

1. Code synchronous mlakoni rumiyin: `1`, `4`.
2. Stack kosong → kosongake **kabeh microtasks**: `3`.
3. Banjur njupuk **siji macrotask**: `2`.

Iki dadi alesan `Promise.then` mesthi mlakoni **sadurunge** `setTimeout(…, 0)`, yawah pindho-pindho "async" — microtasks duwe prioritas.

## Konsekuensi praktis

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

Kajiyan synchronous jangkep ngalangi kabeh (rendering, clicks). Pindahake heavy CPU work menyang **Web Worker** (thread terpisah sing bener).

## Mengapa iku penting

Ngerti loop njelasake async ordering, dene mengapa promises resolve sadurunge timers, lan dene aja pernah ngalangi main thread — mental model inti kanggo kabeh async JavaScript.