Event Loop: Macro vs Microtask

Bayangkan, kamu bekerja sebagai kasir di coffeshop
ditempat kamu bekerja. Ada 2 jenis antrian:

1. Antrian biasa: (kursi tunggu) → orang datang, duduk, tunggu giliran.

2. Antrian VIP: (berdiri di depan kasir) → selalu dilayani lebih dulu sebelum lanjut ke antrian biasa.

Javascript bekerja seperti contoh diatas.

---

Faktanya

Javascript itu singlethread, artinya dia hanya bisa kerjakan 1 hal dalam satu waktu.

tapi kenapa dia terasa seperti multitasking? jawabanya adalah karena ada Event Loop.

---

Cara kerja Event Loop

[ Call Stack ] ← tempat kode dijalankan sekarang

[ Microtask Queue ] ← antrian VIP (Promise, queueMicrotask)

[ Macrotask Queue ] ← antrian biasa (setTimeout, setInterval, I/O)

Urutan kerjanya:

1. Jalankan semua kode synchronous di Call Stack sampai habis
2. Cek Microtask Queue → jalankan semua isinya sampai kosong
3. Cek Macrotask Queue → ambil satu task, jalankan
4. Kembali ke langkah 2
5. Ulangi terus (ini yang disebut "loop")

---

Contoh

console.log("1");

setTimeout(() => {
  console.log("2");
}, 0);

Promise.resolve().then(() => {
  console.log("3");
});

console.log("4");

Outputnya:

1
4
3
2

Kenapa?

• "1" → synchronous, langsung jalan
• setTimeout → dilempar ke Macrotask Queue, skip dulu
• Promise.then → dilempar ke Microtask Queue
• "4" → synchronous, langsung jalan
• Call Stack kosong → cek Microtask → jalankan "3"
• Microtask kosong → ambil satu Macrotask → jalankan "2"

---

Synchronous jalan duluan → lalu microtask dikuras habis → baru satu macrotask diambil → ulangi.