Event Loop JavaScript: Cara Kode Async Sebenarnya Berjalan

Single-Threaded, Tetapi Tidak Berurutan

JavaScript berjalan di satu thread. Ada satu call stack, dan pada satu waktu tepat satu fungsi yang sedang dieksekusi. Tidak pernah ada dua baris kodemu yang berjalan paralel di dalam realm yang sama.

Kedengarannya membatasi, sampai kamu ingat apa yang sebenarnya dilakukan JavaScript: mengambil data, menunggu klik pengguna, membaca file. Sebagian besar "pekerjaannya" adalah menunggu. Event loop adalah trik yang membuat menunggu jadi murah: kodemu menyerahkan tugas ke browser atau Node, kembali mengerjakan hal lain, lalu diberi tahu saat hasilnya siap.

console.log("first");

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

console.log("second");

first dan second tercetak berurutan. third tercetak setelahnya, padahal timeout-nya 0. Jeda itu adalah hasil kerja event loop, dan memahami alasannya adalah inti dari halaman ini.

Call Stack

Setiap pemanggilan fungsi mendorong sebuah frame ke call stack. Saat fungsi itu selesai, frame-nya dikeluarkan. Stack hanyalah tumpukan: yang terakhir masuk, yang pertama keluar.

function inner() {
    return "done";
}

function outer() {
    return inner();
}

console.log(outer());

Saat outer() berjalan, Node mendorong outer, lalu inner, lalu mengeluarkan inner saat ia mengembalikan "done", lalu mengeluarkan outer. Stack kosong lagi. Momen "stack kosong" itulah yang diawasi event loop.

Kode synchronous berjalan dari awal sampai akhir di stack. Tidak ada kode async yang bisa menyelanya. Kalau kamu menulis loop while (true), stack tidak pernah kosong dan halamannya membeku: tidak ada klik, tidak ada timer, tidak ada callback promise. Event loop tidak bisa berbuat apa-apa karena tidak pernah mendapat giliran.

Tempat Pekerjaan Async Sebenarnya Berada

JavaScript sendiri tidak tahu cara membuat request jaringan atau menunggu 100 milidetik. API-API itu milik host, yaitu browser atau Node. Saat kamu memanggil setTimeout(fn, 100), inilah yang terjadi:

1. Timer didaftarkan ke host.
2. setTimeout langsung selesai. Stack terus berjalan.
3. 100ms kemudian, host menaruh fn di sebuah antrean.
4. Saat stack kosong, event loop mengambil fn dari antrean dan menjalankannya.

console.log("start");

setTimeout(() => console.log("timer fired"), 100);

for (let i = 0; i < 3; i++) {
    console.log("loop", i);
}

console.log("end");

Callback timer tidak bisa berjalan sampai loop for dan console.log("end") selesai, karena stack belum kosong. Timer adalah jeda minimum, bukan jaminan.

Dua Antrean: Task dan Microtask

Antreannya bukan cuma satu. Ada dua, dan perbedaannya menjelaskan sebagian besar kejutan seputar event loop.

• Task queue (kadang disebut macrotask queue): setTimeout, setInterval, callback I/O, event UI.
• Microtask queue: callback promise (.then, .catch, .finally), kelanjutan setelah await, dan apa pun yang dijadwalkan dengan queueMicrotask.

Aturan yang diikuti event loop:

1. Jalankan satu task dari task queue.
2. Kosongkan seluruh microtask queue, yaitu setiap microtask, termasuk yang dijadwalkan selama proses pengosongan.
3. Lakukan render kalau perlu (di browser).
4. Kembali ke langkah 1.

Microtask selalu berjalan sebelum task berikutnya. Itulah sebabnya contoh ini mengejutkan orang:

console.log("sync 1");

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

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

console.log("sync 2");

Urutan output-nya: sync 1, sync 2, promise, timeout. Kode synchronous berjalan lebih dulu. Lalu stack kosong. Lalu event loop mengosongkan microtask (promise). Baru setelah itu ia mengambil task timer (timeout).

Microtask Bisa Membuat Task Kelaparan

Karena microtask queue dikosongkan sepenuhnya sebelum task berikutnya, microtask yang terus menjadwalkan microtask lain akan memblokir task queue selamanya:

// Don't run this for real - it's a trap.
function loop() {
    queueMicrotask(loop);
}

// loop();
// setTimeout(() => console.log("never runs"), 0);

Timer itu tidak akan pernah berbunyi, karena setiap microtask mengantrekan microtask lain, dan loop-nya tidak pernah membiarkan antreannya kosong. Rangkaian promise aman karena setiap .then hanya menjadwalkan satu kelanjutan, tetapi loop microtask yang ditulis manual adalah jebakan yang perlu kamu ketahui.

await Adalah Sintaks Pemanis untuk Microtask

Saat kamu await sebuah promise, fungsinya berhenti sejenak dan sisa fungsinya dijadwalkan sebagai microtask yang berjalan setelah promise-nya selesai. Tidak ada sihir, hanya .then di baliknya.

async function demo() {
    console.log("A");
    await Promise.resolve();
    console.log("B");
}

demo();
console.log("C");

Output-nya: A, C, B. await menyerahkan kendali kembali ke pemanggil. console.log("C") berjalan di stack saat ini. Lalu microtask queue dikosongkan dan sisa demo dilanjutkan, mencetak B.

Ingat ini saat membaca kode async. await tidak memblokir, melainkan memberi giliran.

Contoh Lengkap: Mengurutkan Semuanya

Gabungkan semua bagiannya:

console.log("1: sync");

setTimeout(() => console.log("2: timeout"), 0);

Promise.resolve().then(() => {
    console.log("3: promise");
    queueMicrotask(() => console.log("4: nested microtask"));
});

queueMicrotask(() => console.log("5: microtask"));

console.log("6: sync");

Urutannya:

1. 1: sync: berjalan di stack.
2. 6: sync: masih di stack.
3. Stack kosong. Microtask queue dikosongkan: 3: promise, 5: microtask, lalu 4: nested microtask (dijadwalkan selama pengosongan, tetap ikut diambil).
4. Task berikutnya berjalan: 2: timeout.

Output akhirnya: 1, 6, 3, 5, 4, 2. Kalau kamu bisa menelusuri contoh ini, kamu sudah memahami event loop.

Node Punya Lebih Banyak Fase

Event loop Node adalah perluasan dari model browser. Ia punya fase yang berbeda-beda, yaitu timers, pending I/O callbacks, poll, check, dan close, dan microtask dikosongkan di antara setiap fase. setImmediate berjalan di fase check, sedangkan process.nextTick berjalan sebelum microtask biasa (ia punya antrean sendiri dengan prioritas yang lebih tinggi lagi).

Kamu tidak perlu menghafal diagram fasenya di hari pertama. Pelajaran utamanya sama seperti di browser: kode synchronous berjalan sampai selesai, lalu microtask dikosongkan, lalu loop mengambil callback berikutnya dari antrean.

Mengapa Ini Penting

Begitu model ini kamu pahami, banyak kode async tidak lagi terasa misterius:

• Loop for yang panjang membekukan UI-mu karena event loop tidak bisa mendapat giliran.
• setTimeout(fn, 0) adalah cara menunda pekerjaan sampai task dan microtask saat ini selesai.
• Callback .then yang berjalan "langsung" setelah promise yang sudah selesai tetap menunggu kode synchronous saat ini berakhir.
• await di dalam loop membuat pekerjaan berjalan satu per satu karena setiap iterasi memberi giliran ke microtask queue sebelum melanjutkan.

Debug kode async sebagian besar soal bertanya "apa yang ada di stack sekarang, dan apa yang sedang mengantre?" Event loop adalah jawabannya.

Berikutnya: Callback

Sebelum ada promise dan async/await, satu-satunya alat JavaScript untuk pekerjaan async adalah callback, yaitu fungsi yang kamu serahkan ke sebuah API untuk dipanggil nanti. Callback masih ada di mana-mana (event listener, API inti Node), dan memahaminya adalah fondasi untuk semua materi lain di bab ini.