Tutorial Pemrograman & Komputer Part 27: Asynchronous JavaScript & Event Loop
Pendahuluan
Selamat datang di bagian ke-27 dari seri tutorial Pemrograman & Komputer kami. Dalam bagian ini, kita akan menyelami konsep asynchronous JavaScript dan event loop. Ini adalah topik penting untuk memahami bagaimana JavaScript menangani operasi yang memakan waktu tanpa memblokir antarmuka pengguna. Prasyarat untuk tutorial ini adalah pemahaman dasar tentang JavaScript, fungsi, dan callback.
Konsep Dasar
Apa itu Asynchronous JavaScript?
JavaScript pada dasarnya adalah bahasa single-threaded, yang berarti ia hanya dapat menjalankan satu operasi pada satu waktu. Namun, seringkali kita perlu melakukan operasi yang memakan waktu, seperti mengambil data dari server atau membaca file. Jika kita melakukan operasi ini secara sinkron, browser akan membeku sampai operasi selesai. Asynchronous JavaScript memungkinkan kita untuk memulai operasi yang memakan waktu tanpa memblokir thread utama.
The Event Loop
Event Loop adalah mekanisme yang memungkinkan JavaScript untuk menangani operasi asynchronous. Bayangkan sebuah antrean tugas (task queue). Ketika operasi asynchronous selesai, callback yang terkait dengan operasi tersebut ditempatkan di antrean. Event Loop terus-menerus memeriksa antrean ini dan menjalankan callback ketika thread utama kosong. Analogi sederhananya adalah seorang pelayan di restoran: pelayan menerima pesanan (operasi asynchronous), mengirimkannya ke dapur (misalnya, server), dan saat makanan (data) siap, pelayan mengambilnya dan membawanya ke pelanggan (menjalankan callback).
Hands-on Coding
Mari kita lihat contoh sederhana menggunakan setTimeout, sebuah fungsi bawaan JavaScript yang memungkinkan kita untuk menunda eksekusi sebuah fungsi.
console.log('Mulai');
setTimeout(() => {
console.log('Setelah 2 detik');
}, 2000);
console.log('Selesai');
Dalam contoh ini, kita akan melihat output berikut:
Mulai
Selesai
Setelah 2 detik
Meskipun setTimeout dipanggil di tengah kode, callback-nya dijalankan setelah 2 detik, setelah kode utama selesai dieksekusi. Inilah cara kerja asynchronous JavaScript dan Event Loop.
Menggunakan Promises
Promises adalah cara yang lebih modern untuk menangani operasi asynchronous. Mereka menyediakan cara yang lebih terstruktur untuk menangani hasil dan kesalahan.
function fetchData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
const data = 'Data dari server';
resolve(data);
}, 1000);
});
}
fetchData()
.then(data => {
console.log(data);
})
.catch(error => {
console.error('Error:', error);
});
Dalam contoh ini, fetchData mengembalikan sebuah Promise. Ketika data tersedia, resolve dipanggil dengan data tersebut. Jika terjadi kesalahan, reject dipanggil dengan error tersebut. Kita kemudian menggunakan .then untuk menangani hasil yang sukses dan .catch untuk menangani kesalahan.
Async/Await
async/await adalah sintaks yang lebih baru yang membuat kode asynchronous terlihat dan terasa seperti kode sinkron.
async function getData() {
try {
const data = await fetchData();
console.log(data);
} catch (error) {
console.error('Error:', error);
}
}
getData();
Dalam contoh ini, kita mendefinisikan fungsi getData sebagai async. Kita kemudian menggunakan await untuk menunggu Promise fetchData diselesaikan. Ini membuat kode kita lebih mudah dibaca dan dipahami.
Common Pitfalls
- Callback Hell: Terlalu banyak callback bersarang dapat membuat kode sulit dibaca dan dipelihara. Gunakan Promises atau async/await untuk menghindari ini.
- Forgetting to Handle Errors: Selalu pastikan untuk menangani kesalahan dalam kode asynchronous Anda. Jika tidak, aplikasi Anda mungkin berperilaku tidak terduga.
- Blocking the Event Loop: Hindari melakukan operasi yang memakan waktu di thread utama. Gunakan Web Workers jika Anda perlu melakukan perhitungan yang berat.
Challenge
Buat fungsi yang mengambil data dari API publik (misalnya, menggunakan fetch) dan menampilkannya di konsol. Gunakan async/await untuk menangani operasi asynchronous.