1. JavaScript: Single-Threaded, Non-Blocking
JavaScript hanya memiliki SATU Call Stack (hanya bisa mengeksekusi satu instruksi dalam satu waktu). Lalu mengapa browser tidak membeku saat mendownload file besar dari internet? Jawabannya adalah arsitektur runtime yang didukung oleh **Web APIs**, **Task Queue**, dan **Event Loop**.
Pemain Utama Runtime JavaScript
1. **Call Stack**: Tempat fungsi dieksekusi secara LIFO.
2. **Web APIs (Browser)**: Fitur latar belakang (seperti `setTimeout`, `fetch`, `DOM events`) yang ditangani oleh thread browser di luar JS engine.
3. **Task Queue (Callback Queue)**: Antrian tugas asinkron yang siap dijalankan.
4. **Microtask Queue**: Antrian prioritas tinggi khusus untuk callback Promises (`.then()` / `await`).
5. **Event Loop**: Penjaga pintu yang terus memeriksa: 'Apakah Call Stack sudah kosong? Jika kosong, pindahkan tugas dari Microtask Queue, lalu Task Queue ke Call Stack'.
Tebak Urutan Output Event Loop
javascript
| 1 | console.log("1. Synchronous A"); |
| 2 | |
| 3 | setTimeout(() => { |
| 4 | console.log("2. Macrotask (setTimeout 0ms)"); |
| 5 | }, 0); |
| 6 | |
| 7 | Promise.resolve().then(() => { |
| 8 | console.log("3. Microtask (Promise)"); |
| 9 | }); |
| 10 | |
| 11 | console.log("4. Synchronous B"); |
| 12 | |
| 13 | // Urutan Output di Layar: |
| 14 | // 1. Synchronous A |
| 15 | // 4. Synchronous B |
| 16 | // 3. Microtask (Promise) -> Microtask didahulukan sebelum Task Queue! |
| 17 | // 2. Macrotask (setTimeout 0ms) |
Kuis Pemahaman
+10 XP
Mengapa callback `Promise.then()` dieksekusi lebih dulu daripada callback `setTimeout(..., 0)`?