Jantung Mesin JS: Event Loop & Call Stack
Selamat datang di materi yang paling ditakuti saat Wawancara Kerja (Interview) kelas *Senior Frontend
Developer*!
Tahukah kamu fakta mengerikan ini: JavaScript itu "Single-Threaded" (Hanya Punya 1 Tangan).
Ia hanya bisa mengerjakan TEPAT SATU tugas pada satu waktu. Tapi anehnya, mengapa JS bisa menangani *Klik
Tombol*, *Download Data (Fetch)*, dan *Animasi* secara BERSAMAAN tanpa membuat layarmu nge-Lag?
Itu semua berkat kejeniusan arsitektur tak kasat mata bernama Event Loop dan Call
Stack. Mari kita bedah jantung mesinnya!
🏗️ 1. Call Stack (Tumpukan Piring Pekerjaan)
Call Stack adalah meja kerja (RAM) tempat JavaScript mengeksekusi fungsi-fungsi kodenya. Ia punya prinsip: *"Siapa yang terakhir masuk, dialah yang pertama kali diselesaikan (LIFO - Last In First Out)"* seperti tumpukan piring kotor di wastafel.
function bikinKopi() {
console.log("[1] Tuang Air Panas");
}
function sarapanPagi() {
bikinKopi(); // Memanggil fungsi lain dari dalam
console.log("[2] Makan Roti");
}
// Menjalankan pemicu utama
sarapanPagi();
Wujud Visual Call Stack
Tumpukan (Dieksekusi dari ATAS ke BAWAH)
⏳ 2. Pendelegasian (Web APIs / Asynchronous)
Masalahnya: Bagaimana jika fungsi tersebut memakan waktu 5 detik (misal: Download Data /
setTimeout)? Jika kita menggunakan prinsip "Tumpukan Piring" murni, maka layar Browser akan *nge-Lag/Freeze*
putih selama 5 detik menunggu download selesai!
Solusinya: JS Mendelegasikan/Melemparkan kode lama tersebut ke Web APIs (Lingkungan C++
Chrome/Browser). Selama Browser mengurus download secara asinkron di belakang panggung, tangan
JavaScript yang cuma satu ini Bebas/Kosong dan bisa melanjutakan baris kode di bawahnya!
console.log("1. Saya Pertama!");
// Fungsi ini LAMBAT, dilempar JS ke "Ruang Tunggu Web API Browser".
setTimeout(() => {
console.log("2. Saya Kedua (Telah menabung 2 detik)");
}, 2000);
console.log("3. Saya Ketiga!");
/*
OUTPUT DI LAYAR YANG MENCENGANGKAN:
▶ 1. Saya Pertama!
▶ 3. Saya Ketiga!
▶ 2. Saya Kedua (Telah menabung 2 detik)
*/
🎡 3. Sang Pengatur Lalu Lintas: Event Loop
Setelah urusan *Web APIs (Download/Timeout)* yang lambat tersebut RAMPUNG/SELESAI (misal 2 detik sudah habis),
Browser Tidak Berani langsung menyuapkannya kembali ke tengah *Call Stack* JS yang mungkin
sedang sibuk eksekusi fungsi lain.
Browser akan menaruh hasil rampungan itu di **Antrean Pesan (Callback Queue)**. Di sinilah Mitos **Event Loop**
bekerja!
🔄 Studi Kasus Mahakarya: Simulasi Arsitektur JS
Meskipun setTimeout diset ke 0 detik, posisinya PASTI akan tetap berada di
urutan paling akhir dieksekusi! Kok bisa? Karena fungsi tersebut berstatus "Mutasi Antrian" (masuk Web API →
Callback Queue → Menunggu Call Stack Kosong). Mari ujicoba kode tab terpisah di bawah ini!