Callback Function di JavaScript: Dasar Pemrograman Asynchronous

Setelah memahami pengantar tentang asynchronous JavaScript, sekarang saatnya kamu mengenal salah satu teknik paling dasar yang digunakan dalam penanganan asynchronous: Callback Function.

Callback adalah fondasi sebelum kamu belajar Promise dan async/await, jadi penting untuk benar-benar memahaminya.

📌 Apa Itu Callback Function?

Callback function adalah fungsi yang dikirimkan sebagai argumen ke fungsi lain, dan akan dipanggil (dieksekusi) di dalam fungsi tersebut setelah proses tertentu selesai.

Callback memungkinkan kita untuk mengatur urutan eksekusi program, terutama ketika berurusan dengan operasi asynchronous.

🧠 Contoh Sederhana Callback

1function greeting(nama) {
2  console.log(`Halo, ${nama}`);
3}
4
5function prosesUser(callback) {
6  const nama = "Aisyah";
7  callback(nama);
8}
9
10prosesUser(greeting);
11

1function greeting(nama) {
2  console.log(`Halo, ${nama}`);
3}
4
5function prosesUser(callback) {
6  const nama = "Aisyah";
7  callback(nama);
8}
9
10prosesUser(greeting);
11

📘 Penjelasan: Fungsi greeting dikirim sebagai parameter ke fungsi prosesUser, lalu dipanggil dengan data (nama) di dalamnya. Ini adalah contoh callback paling dasar.

🕒 Callback pada Proses Asynchronous

Callback menjadi sangat penting ketika kamu menangani proses yang membutuhkan waktu, seperti setTimeout atau pengambilan data dari API.

1console.log("Satu");
2setTimeout(function () {
3  console.log("Dua (ditunda 2 detik)");
4}, 2000);
5console.log("Tiga");
6

1console.log("Satu");
2setTimeout(function () {
3  console.log("Dua (ditunda 2 detik)");
4}, 2000);
5console.log("Tiga");
6

📝 Output:

1Satu
2Tiga
3Dua (ditunda 2 detik)
4

1Satu
2Tiga
3Dua (ditunda 2 detik)
4

📘 Penjelasan: setTimeout menjalankan callback-nya setelah 2 detik, sementara kode lainnya tetap berjalan. Ini adalah prinsip dasar asynchronous: tidak menunggu.

❗ Masalah yang Muncul: Callback Hell

Terlalu banyak callback bersarang bisa menyebabkan callback hell, yaitu kondisi di mana kode menjadi sulit dibaca dan dikelola.

1loginUser("user", "pass", function (user) {
2  getUserData(user.id, function (data) {
3    showProfile(data, function () {
4      console.log("Selesai!");
5    });
6  });
7});
8

1loginUser("user", "pass", function (user) {
2  getUserData(user.id, function (data) {
3    showProfile(data, function () {
4      console.log("Selesai!");
5    });
6  });
7});
8

📘 Solusi untuk masalah ini adalah menggunakan Promise atau async/await, yang akan dibahas pada artikel selanjutnya.

✅ Kapan Harus Menggunakan Callback?

Gunakan callback ketika:

• Kamu menggunakan fungsi asynchronous dasar seperti setTimeout, setInterval, atau fungsi yang menerima callback bawaan (seperti forEach)
• Kamu ingin memanggil fungsi setelah proses tertentu selesai

✨ Kesimpulan

Callback function adalah cara klasik dan fundamental untuk menangani proses asynchronous di JavaScript. Meskipun sederhana, callback tetap menjadi bagian penting dari JavaScript modern.

Selanjutnya, kita akan membahas cara menulis kode asynchronous yang lebih rapi dan mudah dibaca menggunakan Promise.