Cara Membuat Callback Function di Javascript

Hal yang membuat bingung saat kita bekerja dengan synchronous dan asynchronous program ialah bagaimana menangani suatu nilai yang diperoleh secara asynchronous pada program yang berjalan secara synchronous.

Misalnya seperti kode berikut:

1. const getCake = () => {

1. let cake = null;

1. console.log(“Sedang membuat kue, silakan tunggu ….”)

1. setTimeout(() => {

1. cake = “Kue Selesai!”

1. }, 3000)

1. return cake;

1. }

1. const cake = getCake();

1. 1. console.log(cake);

1. /*output:

1. Sedang membuat kue, silakan tunggu ….

1. null
2. */

Bila kita melakukan hal semacam ini untuk mencetak nilai cake yang sebenarnya, maka hal itu tak akan pernah terjadi. Sebab seperti yang telah kita ketahui fungsi setTimeout() tak akan menghentikan JavaScript untuk mengeksekusi kode yang ada berikutnya. Jadi fungsi getCake() akan sering mengembalikan nilai null, sebab kode return cake akan dieksekusi terlebih dulu dibandingkan dengan cake = “Kue Selesai!”. Kode asynchronous perlu disusun dengan metode yang berbeda dari synchronous code. Cara paling dasar yaitu dengan memakai callback function.

Apa itu callback function? Ayo kita bayangkan kembali melalui pandangan dunia nyata. Kita menanti orderan kopi datang di meja kita namun , di saat itu juga kita tidak dapat berada terus di tempat itu dikarenakan ada urusan mendadak. Pada kasus ini mungkin terdapat dua aksi yang dapat kita lakukan:

- (Synchronous) Kita tetap menanti di meja sampai kopi itu datang dan kemudian meninggalkan kedai kopi.
- (Asynchronous) Kita meminta tolong kepada teman kita untuk menerima kopi itu, dan berjumpa nanti untuk memberikan kopinya. Sehingga kita tak perlu menanti untuk meninggalkan kedai kopi.

Nah pada JavaScript, teman kita berperan pantasnya callback function. Dia diperintahkan dalam sebuah fungsi asynchronous kemudian akan dipanggil/dipakai saat tugas itu selesai.

Bagaimana cara melakukannya? Yang pertama kita tambahkan tolok ukur dengan nama callback pada fungsi asynchronous.

1. const getCake = callback => {

1. let cake = null;

1. console.log(“Sedang membuat kue, silakan tunggu ….”)

1. setTimeout(() => {

1. cake = “Kue Selesai!”;

1. }, 3000)

1. return cake;
2. }

Lalu kita panggil/pakai callback yang diisikan dengan data yang akan dibawa (cake) saat task selesai dilakukan.

1. setTimeout(function() {

1. cake = “Kue Selesai!”;

1. callback(cake);
2. }, 3000)

Sesudah memakai callback, fungsi tak perlu lagi mengembalikan nilai. Sehingga kita dapat hapus kode return cake;. Sehingga keseluruhan fungsi akan terlihat semacam ini:

1. const getCake = callback => {

1. let cake = null;

1. console.log(“Sedang membuat kue, silakan tunggu ….”)

1. setTimeout(() => {

1. cake = “Kue Selesai!”;

1. callback(cake);

1. }, 3000)
2. }

Kemudian untuk memakai fungsi getCake, kita ubah kode dari:

1. const cake = getCake();
2. console.log(cake);

Jadi:

1. getCake(cake => {

1. console.log(cake);
2. })

Sehingga saat dijalankan akan sesuai dengan harapan kita.

1. const getCake = callback => {

1. let cake = null;

1. console.log(“Sedang membuat kue, silakan tunggu ….”)

1. setTimeout(() => {

1. cake = “Kue Selesai!”;

1. callback(cake);

1. }, 3000)

1. }

1. getCake(cake => {

1. console.log(cake);

1. })

1. /* output:

1. Sedang membuat kue, silakan tunggu ….

1. —- sesudah 3 detik —-

1. Kue Selesai!
2. */

Callback Hell

Kita telah menyadari bahwa callback diperlukan agar mendapatkan nilai yang asalnya dari asynchronous function. Lalu bagaimana bila terdapat proses satu sama lain yang saling bergantungan? Misalnya, untuk membuat kue langkah yang harus kita lakukan ialah:

Menyiapkan bahan
Membuat adona
Mempersiapkan adonan ke cetakan
Memanggang adonan

Langkah itu sangat bergantung satu sama lain. Kita tidak dapat memanggang adonan sebelum membuat adonannya, dan kita tidak dapat membuat adonan tanpa menyiapkan bahannya terlebih dulu. Bila seluruh langkah itu berjalan secara synchronous, mungkin kita dapat melakukanya semacam ini:

1. function makeACake(…rawIngredients) {

1. const ingredients = gatheringIngredients(rawIngredients),

1. dough = makeTheDough(ingredients),

1. pouredDough = pourDough(dough),

1. cake = bakeACake(pourDough),

1. console.log(cake);
2. }

Tetapi bila fungsi-fungsi itu berjalan secara asynchronous, maka kita akan membuat yang namanya callback hell. Callback hell terjadi sebab banyak sekali callback function yang bersarang sebab saling memerlukan satu sama lain, sehingga kode akan terlihat semacam ini:

1. function makeACake(…rawIngredients) {

1. gatheringIngredients(rawIngredients, function(ingridients) {

1. makeTheDough(ingridients, function(dough) {

1. pourDough(dough, function(pouredDough) {

1. bakeACake(pouredDough, function(cake) {

1. console.log(cake);

1. });

1. });

1. });

1. 1. });
1. }

Melihat kode semacam ini saja, kepala jadi pusing. Terbayang susahnya memelihara kode ini di masa depan.

Lantas apa solusi supaya kita bisa menghindari callback hell? Salah satunya yaitu dengan memakai Promise.

1. function makeACake(…rawIngredients) {

1. gatheringIngredients(rawIngredients)

1. .then(makeTheDough)

1. .then(pourDough)

1. .then(bakeACake)
2. .then(console.log);

1. }

Dengan Promise, kita bisa mengurangi callback hell dan mengubahnya jadi kode yang begitu mudah dibaca. Bahkan dengan kode seperti itu, non-developer pun bisa mengerti apa maksud dari kode itu