Memahami Event Loop di JavaScript: Rahasia di Balik Asynchronous

Satu Otak, Tapi Bisa Multitasking?

Ini adalah salah satu materi teknis paling ditakuti oleh *Junior Developer* saat Technical Interview. Pernyataannya adalah: JavaScript bersifat Single-Threaded. Artinya, ia hanya punya 1 pekerja (1 *Call Stack*). Jika 1 pekerja itu sedang menghitung matematika yang butuh waktu 5 detik, maka layar browser akan hang (macet) total selama 5 detik!

Tapi anehnya, jika kita menggunakan setTimeout() selama 5 detik, atau memanggil fetch() API yang butuh 3 detik, browser kita tetap lancar bisa di-scroll. Siapa yang mengerjakannya jika JavaScript hanya punya 1 pekerja? Jawabannya ada di arsitektur Event Loop.

Aktor-Aktor di Belakang Layar

Untuk memahami sihir ini, kamu harus tahu bahwa Browser (seperti Google Chrome) bukan cuma berisi mesin JavaScript (V8 Engine). Browser memiliki asisten-asisten rahasia.

1. Call Stack (Meja Kerja JS): Tempat fungsi JS dieksekusi satu per satu.
2. Web APIs (Asisten Browser): Fitur ajaib milik Browser (TIDAK ADA di spesifikasi asli JavaScript!). Contohnya: setTimeout, fetch, dan DOM Events. Ini adalah pekerja pabrik tambahan di luar JS.
3. Callback Queue (Ruang Tunggu): Ruang antrean untuk fungsi yang sudah selesai diproses oleh Asisten.

Alur Kerja Asynchronous yang Sesungguhnya

Mari kita bedah jalannya kode setTimeout(pesan, 5000):

1. JavaScript membaca perintah setTimeout di Call Stack.
2. Karena setTimeout butuh waktu lama, JavaScript melemparkan pekerjaan itu ke Asisten Browser (Web APIs). "Woi Browser, tolong pegang timer ini 5 detik, saya mau lanjut ngerjain kode HTML di bawahnya!"
3. Call Stack JS langsung kosong dan bebas mengeksekusi kode *Render UI* lainnya (Browser tetap lancar!).
4. Setelah 5 detik berlalu, Asisten Browser tidak berani langsung menyela pekerjaan JS. Ia menaruh fungsi pesan tersebut ke dalam Callback Queue (Ruang Tunggu).

Sang Mandor: Event Loop

Di sinilah Event Loop bekerja. Event Loop adalah sebuah penjaga pintu tak terlihat yang tugasnya hanya menengok bolak-balik: "Apakah Meja Kerja (Call Stack) JS sedang kosong? Apakah ada antrean di Ruang Tunggu?"

Begitu Event Loop melihat Call Stack JS sedang menganggur, ia segera mempersilakan fungsi pesan yang ada di Ruang Tunggu tadi untuk masuk ke Call Stack dan akhirnya dieksekusi memunculkan tulisan di layar! Inilah sihir bagaimana JavaScript yang hanya punya 1 otak bisa memproses jutaan tugas secara bersamaan (Asynchronous).