Callback pada JavaScript

Iseng baca-baca tentang JavaScript fundamental, tiba-tiba menemukan istilah Callback Hell.

Penasaran, langsung coba cari tahu apa yang dimaksud dengan Callback Hell. Dan aku coba breakdown hasil belajarku menjadi beberapa artikel yang bakal aku bagikan disini. Diawali dengan artikel tentang Callback.

Callback itu adalah sebuah fungsi yang dieksekusi setelah fungsi lain selesai dieksekusi, digunakan untuk menampilkan respon ketika sebuah event telah selesai dilakukan. makanya dinamakan callback (panggilan balik).

Pada JavaScript, fungsi adalah objek. Karena itu, sebuah fungsi dapat menggunakan fungsi lain sebagai argument, dan dapat dikembalikan oleh fungsi lain juga. Fungsi yang melakukan ini adalah high-order function, dan fungsi yang di lempar sebagai argument disebut callback function.

Kenapa butuh callback?

JavaScript itu event-driven language. Artinya daripada menunggu untuk respon dari sebuah event sebelum berpindah ke event yang lain, JavaScript akan tetap mengeksekusi event selanjutnya sambil listening untuk event yang sebelumnya (jika belum selesai). Contohnya begini :

function nama(){
  console.log("bagas");
}

function status(){
  console.log("selalu ada untukmu");
}

nama();
status();

sudah bisa ditebak kan, si fungsi nama akan dieksekusi terlebih dahulu, dan kemudian selanjutnya fungsi status akan dieksekusi setelahnya. Untuk hasilnya adalah :

bagas
selalu ada untukmu

semua berjalan lancar…

tapi, gimana kalau si fungsi nama berisi perintah yang tidak dapat langsung dieksekusi? Contohnya sebuah API Request dimana harus mengirimkan request kemudian harus menunggu beberapa saat untuk menerima respon.

mari kita simulasikan. Akan kita simulasikan dengan menggunakan setTimeout yang merupakan fungsi JavaScript yang akan memanggil sebuah fungsi setelah waktu yang sudah ditentukan. Akan kita delay fungsi kita selama 1000 milliseconds untuk mensimulasikan API Request. Nantinya akan terlihat seperti ini :

function nama(){
  // Mensimulasikan sebuah code delay
  setTimeout( function(){
    console.log("bagas");
  }, 1000 );
}

function status(){
  console.log("selalu ada untukmu");
}

nama();
status();

nah, apa yang terjadi ketika kita mengeksekusi fungsinya?

nama();
status();

selalu ada untukmu
bagas

walaupun kita mengeksekusi fungsi nama pada diawalnya, namun pada akhirnya malah kita mendapatkan hasilnya setelah fungsi status.

bukannya JavaScript tidak mengeksekusi fungsi yang kita buat sesuai pada urutannya. Itu karena JavaScript tidak menunggu respon dari si fungsi nama sebelum berpindah untuk mengeksekusi fungsi status. Maka dari itu kita juga membutuhkan sebuah Callback function sebagai penanda bahwa fungsi nama tadi telah selesai dieksekusi dan bisa melanjutkan ke fungsi status.

Membuat sebuah Callback

disini aku bakal mencoba membuat sebuah callback function menggunakan Chrome Developer Console, akses dengan membuka chrome dan menekan Ctrl + Shift + J.

kemudian aku membuat sebuah fungsi disini.

function doPenjumlahan(a, b, callback){
	var result = a + b;
	alert(`Hasil dari ${a} + ${b} adalah ${result}.`);
	callback();
}

function penjumlahanFinished(){
    alert('Operasi penjumlahan selesai!');
}

sebuah fungsi untuk melakukan penjumlahan 2 angka yang diakhiri dengan memanggil sebuah fungsi callback untuk memberitahu bahwa operasi penjumlahan tersebut telah selesai dilakukan. Callback functionnya akan menampilkan sebuah alert.

kemudian dieksekusi seperti ini.

doPenjumlahan(1, 2, penjumlahanFinished);

hasilnya akan jadi seperti ini. Operasi Penjumlahan Callback

Implementasinya? bisa digunakan sebagai penanda bahwa sebuah operasi telah selesai dan menampung respon dari server. Gitu aja dulu, kalo misalnya belum paham bisa dm di telegram aja. Aku juga masih belajar soalnya, nanti kita pelajari bareng.