Bagaimana event loop JavaScript menangani pekerjaan async?

Question

Accepted Answer

JavaScript berjalan pada **satu thread**, jadi hanya dapat melakukan satu hal pada satu waktu. **event loop** adalah yang memungkinkannya menangani pekerjaan async tanpa blocking: ia menjalankan call stack, dan ketika stack kosong, ia mengambil callbacks dari antrian.

Ada dua antrian dengan prioritas berbeda:
- **Microtasks**: Promise callbacks (`.then`), `queueMicrotask`. Dikosongkan **sepenuhnya** setelah setiap task, sebelum rendering.
- **Macrotasks**: `setTimeout`, I/O, UI events. Satu diproses per iterasi loop.

```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 itu

1. Kode synchronous dijalankan terlebih dahulu: `1`, `4`.
2. Stack kosong → kosongkan **semua microtasks**: `3`.
3. Kemudian ambil **satu macrotask**: `2`.

Ini adalah alasan mengapa `Promise.then` selalu dijalankan **sebelum** `setTimeout(…, 0)`, meskipun keduanya "async" — microtasks memiliki prioritas.

## Konsekuensi praktis

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

Pekerjaan synchronous yang panjang memblokir segalanya (rendering, clicks). Pindahkan pekerjaan CPU berat ke **Web Worker** (thread terpisah yang sesungguhnya).

## Mengapa hal ini penting

Memahami loop menjelaskan urutan async, mengapa promises resolve sebelum timers, dan mengapa jangan pernah memblokir main thread — model mental inti untuk semua async JavaScript.