Callback, event loop, dan Promise

JavaScript di browser menjalankan kode dalam satu thread: satu pekerjaan pada satu waktu. Pekerjaan yang harus menunggu, seperti timer atau jawaban jaringan, tidak ditunggu di tempat. Kode menyerahkan callback, yaitu fungsi yang dipanggil nanti ketika hasilnya siap, lalu langsung lanjut ke baris berikutnya. setTimeout(fn, 0) pun tidak menjalankan fn saat itu juga: fn baru dijalankan setelah kode yang sedang berjalan selesai.

Urutannya diatur event loop. Ia mengambil pekerjaan dari antrean satu per satu, dan setiap pekerjaan dijalankan sampai habis sebelum pekerjaan berikutnya dimulai. Browser memisahkan dua antrean: task, misalnya callback setTimeout, dan microtask, misalnya callback then milik Promise. Setelah satu pekerjaan selesai, seluruh antrean microtask dikosongkan dulu, termasuk microtask yang baru ditambahkan selama pengosongan itu, baru task berikutnya diambil. Hasilnya: kode sinkron, lalu semua microtask, lalu task.

console.log("A");
setTimeout(() => console.log("B"), 0);
Promise.resolve().then(() => console.log("C"));
console.log("D");
// Tercetak: A, D, C, B

Promise adalah objek yang mewakili hasil pekerjaan yang mungkin belum selesai. Statusnya pending, lalu berubah sekali menjadi fulfilled dengan sebuah nilai atau rejected dengan sebuah alasan. then(fn) mendaftarkan fn untuk nilainya, dan nilai kembalian fn menjadi isi Promise baru, sehingga then bisa dirangkai. catch(fn) menangkap penolakan dari langkah mana pun sebelumnya; nilai kembalian fn menjadi isi Promise berikutnya, sehingga rantainya lanjut seperti biasa. Callback then selalu masuk microtask, walaupun Promise-nya sudah selesai sejak awal.

const ambilKurs = () => Promise.resolve({ usd: 16250 });
ambilKurs()
  .then((kurs) => kurs.usd * 20)
  .then((rupiah) => `Rp${rupiah}`)
  .catch(() => "Kurs tidak tersedia")
  .then((teks) => console.log(teks)); // "Rp325000"