Bagaimana JavaScript event loop menangani pekerjaan asinkron?

Question

Accepted Answer

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

Ada dua antrian dengan prioritas berbeda:
- **Microtasks**: Promise callbacks (`.then`), `queueMicrotask`. Dikosongkan **sepenuhnya** setelah setiap tugas, 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 sinkron berjalan lebih dulu: `1`, `4`.
2. Stack menjadi kosong → mengosongkan **semua microtasks**: `3`.
3. Kemudian ambil **satu macrotask**: `2`.

Inilah mengapa `Promise.then` selalu berjalan **sebelum** `setTimeout(…, 0)`, meskipun keduanya "asinkron" — microtasks memiliki prioritas.

## Konsekuensi praktis

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

Pekerjaan sinkron yang panjang memblokir segalanya (rendering, klik). Pindahkan pekerjaan CPU berat ke **Web Worker** (thread terpisah yang sebenarnya).

## Mengapa ini penting

Memahami loop menjelaskan pengurutan asinkron, mengapa promises terselesaikan sebelum timer, dan mengapa tidak pernah memblokir thread utama — model mental inti untuk semua JavaScript asinkron.