BAB 30 — Event Loop Deep Dive: Memahami Call Stack, Callback, dan Asynchronous di JavaScript

BAB 30 — Event Loop Deep Dive: Memahami Call Stack, Callback, dan Asynchronous di JavaScript

JavaScript adalah bahasa single-threaded, artinya hanya memiliki satu thread untuk mengeksekusi kode. Namun, JavaScript bisa menangani asynchronous operations dengan efisien berkat event loop.

Pada bab ini, kita akan membahas secara mendalam call stack, web APIs, callback queue, microtask queue, perbedaan setTimeout vs Promise, dan konsep blocking vs non-blocking.

1. Call Stack: Tempat Eksekusi Kode

Call stack adalah tumpukan fungsi yang sedang dieksekusi. Fungsi baru ditambahkan di atas stack, dan dieksekusi hingga selesai sebelum fungsi berikutnya.

Contoh:

function a() { console.log("A"); b(); }
function b() { console.log("B"); }

a(); // Output: A B

Penjelasan:

  1. a() masuk ke stack → jalankan console.log("A")
  2. b() dipanggil → masuk stack → jalankan console.log("B") → keluar stack
  3. a() selesai → keluar stack

2. Web APIs: Fasilitas Asynchronous di Browser

Web APIs adalah fitur browser (seperti setTimeout, DOM events, Fetch API) yang berjalan di luar call stack sehingga tidak blocking thread utama.

Contoh:

console.log("Start");
setTimeout(() => console.log("Timeout"), 1000);
console.log("End");

Output:

Start
End
Timeout

Penjelasan:

  • setTimeout dikirim ke Web API
  • Call stack langsung kosong → “End” muncul
  • Setelah 1000ms, callback masuk ke queue → dijalankan oleh event loop

3. Callback Queue & Event Loop

Callback queue menampung fungsi asynchronous (callback) yang siap dijalankan. Event loop terus memeriksa call stack: jika kosong, ambil callback dari queue dan jalankan.

4. Microtask Queue: Prioritas Tinggi

Microtask queue berisi tugas-tugas promise (.then, async/await) yang dijalankan sebelum callback queue biasa.

Contoh:

console.log("Start");

setTimeout(() => console.log("Timeout"), 0);

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

console.log("End");

Output:

Start
End
Promise
Timeout

Penjelasan:

  • Promise → microtask → dijalankan sebelum setTimeout
  • setTimeout → callback queue → dijalankan setelah microtask selesai

5. Perbedaan setTimeout vs Promise

AspectsetTimeoutPromise / microtask
QueueCallback queueMicrotask queue
EksekusiSetelah timer habis & call stack kosongSegera setelah current stack kosong
PrioritasRendahTinggi
ContohsetTimeout(fn, 0)Promise.resolve().then(fn)

6. Blocking vs Non-Blocking

  • Blocking: Kode yang menahan call stack hingga selesai (synchronous). for(let i=0; i<1e9; i++) {} // Blocking
  • Non-blocking: Kode asynchronous yang tidak menahan call stack (fetch, setTimeout, promise). setTimeout(() => console.log("Non-blocking"), 0);

Intinya: Non-blocking membuat UI tetap responsif meski ada operasi berat di background.

Kesimpulan

Event loop adalah mekanisme inti yang membuat JavaScript asynchronous tapi tetap single-threaded:

  • Call stack: Tempat eksekusi fungsi.
  • Web APIs: Jalankan operasi async di luar stack.
  • Callback queue: Menyimpan callback asynchronous.
  • Microtask queue: Menyimpan promise, dieksekusi lebih dulu.
  • setTimeout vs Promise: Memahami prioritas eksekusi.
  • Blocking vs Non-blocking: Menjaga performa dan responsivitas aplikasi.

Dengan memahami event loop, developer bisa menulis kode lebih efisien, menghindari race condition, dan memanfaatkan asynchronous secara optimal.

Related Posts