Cara menggunakan callback function javascript

membuat function sendiri dengan callback di javascript - halo teman teman! Setelah lama gak nulis, saya akhirnya bisa membagikan tutorial seputar dunia web programming lagi.

Artikel kali ini akan membahas tentang bahasa pemrograman javascript. Sesuai judul, disini kamu akan belajar memahami tentang callback function di javascript. Gak cuma itu, saya akan memberikan contoh kepada kalian supaya kalian bisa membuat callback function sendiri.

Function
Seperti yang kita ketahui sebelumnya, function di javascript ditulis seperti ini:

function NamaFunction(parameter){    // logika }

untuk memanggilnya, kita bisa menulisnya dengan

NamaFunction(parameter)

Callback
Callback adalah function yang dieksekusi didalam sebuah function. Callback terletak pada parameter. Jadi kurang lebih, function dengan callback ditulis seperti ini

function NamaFunction(parameter1,parameter2,callback){    // logika }

Tapi jangan salah! Callback berbeda dengan parameter!

Parameter adalah sebuah sebuah deklarasi yang diperlukan function untuk mengeksekusi logikanya.

Untuk lebih memahami tentang parameter, silahkan baca artikel saya sebelumnya Membuat Function Sendiri di PHP. Walau artikelnya menjelaskan bahasa PHP, tapi logika dan penulisan function sama persis.

Berikut ini saya akan mencontohkan secara sederhana program function dengan callback

function luasPersegiPanjang(panjang,lebar,callback){    callback(panjang*lebar) // function callback() berasal dari parameter callback }

untuk memanggil function luasPersegiPanjang,

luasPersegiPanjang(10,4, (hasil)=>{    return hasil // 40 })

Mengapa return hasil?
Karena hasil berasal dari parameter yang kita buat sendiri. Dari sini bisa dilihat bahwa function luasPersegiPanjang() melemparkan logika panjang*lebar ke parameter callback, kemudian parameter yang dilempar tersebut kita deklarasikan sebagai hasil (untuk nama bebas aja sih). Maka dari itu, untuk mendapatkan logika dari luasPersegiPanjang, kita return hasil

Mungkin untuk logika sederhana seperti ini, callback kurang dibutuhkan. Tapi untuk logika yang lebih kompleks, callback sangat dibutuhkan di javascript. Contoh diatas hanya untuk penjelasan mengenai logika dan cara penulisan callback function.

Oke, sekian artikel kali ini tentang memahami dan membuat callback function di javascript. Semoga bermanfaat! Terima kasih!

Callback Function merupakan sebuah fungsi yang digunakan sebagai parameter dalam bahasa pemrograman Javascript hal ini cukup dimungkinkan. Fungsi seperti ini dikenal sebagai fungsi callback, atau high-order function, yaitu sebuah fungsi yang akan dieksekusi sebelum fungsi utama dieksekusi. Sebagai contoh :

var a = 2 var b =3 function tambah(a, b){ console.log(a+b); } function execute(a, b, callback){ } execute(a, b, tambah)

Dalam block kode diatas kita sudah memiliki, 2 variabel a dan b yang masing-masing memiliki nilai 2 dan 3 lalu kita juga memiliki satu fungsi tambah yang memiliki 2 parameter yaitu a dan b dan satu fungsi execute yang memiliki 3 parameter yaitu callback, pada saat kita mengeksekusi fungsi eksecute kita memparsing 3 paratmeter yaitu variabel a dan b serta tambah hal ini adalah function. jika kita melihat dalam function execute, fungsi tersebut akan menjalan fungsi yang kita parsing dalam parameter callback yaitu fungsi tambah. Jika teman teman tidak ingin mendefinisikan fungsi tambah function tersebut bisa langusung kita parsing tampa harus di definisikan. sebagai contoh:

var a = 2 var b =3 function execute(a, b, callback){ return callback(a, b) } execute(a, b, function(a, b){ console.log(a + b); })

Dalam block diatas secara konsep tidak jauh berbeda dengan contoh sebelumnya hanya saja, kita tidak mendefinisikan fungsi terlebih dahulu, sehingga kita langsung membuat fungsi sebagai parameter.

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. 1. const getCake = () => {

1. 1.  let cake = null;

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

1. 1.  setTimeout(() => {

1. 1.    cake = “Kue Selesai!”

1. 1.  }, 3000)

1. 1.  return cake;

1. 1. }

1. 1. const cake = getCake();

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

1. 1. /*output:

1. 1. Sedang membuat kue, silakan tunggu ….

1. 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. 1. const getCake = callback => {

1. 1.  let cake = null;

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

1. 1.  setTimeout(() => {

1. 1.    cake = “Kue Selesai!”;

1. 1.  }, 3000)

1. 1.  return cake;
   2. }

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

1. 1. setTimeout(function() {

1. 1.    cake = “Kue Selesai!”;

1. 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. 1. const getCake = callback => {

1. 1.  let cake = null;

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

1. 1.  setTimeout(() => {

1. 1.    cake = “Kue Selesai!”;

1. 1.    callback(cake);

1. 1.  }, 3000)
   2. }

Kemudian untuk memakai fungsi getCake, kita ubah kode dari:

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

Jadi:

1. 1. getCake(cake => {

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

Sehingga saat dijalankan akan sesuai dengan harapan kita.

1. 1. const getCake = callback => {

1. 1.  let cake = null;

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

1. 1.  setTimeout(() => {

1. 1.    cake = “Kue Selesai!”;

1. 1.    callback(cake);

1. 1.  }, 3000)

1. 1. }

1. 1. getCake(cake => {

1. 1.  console.log(cake);

1. 1. })

1. 1. /* output:

1. 1. Sedang membuat kue, silakan tunggu ….

1. 1. —- sesudah 3 detik —-

1. 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:

1. Menyiapkan bahan
2. Membuat adona
3. Mempersiapkan adonan ke cetakan
4. 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. 1. function makeACake(…rawIngredients) {

1. 1.  const ingredients = gatheringIngredients(rawIngredients),

1. 1.  dough = makeTheDough(ingredients),

1. 1.  pouredDough = pourDough(dough),

1. 1.  cake = bakeACake(pourDough),

1. 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. 1. function makeACake(…rawIngredients) {

1. 1.  gatheringIngredients(rawIngredients, function(ingridients) {

1. 1.    makeTheDough(ingridients, function(dough) {

1. 1.      pourDough(dough, function(pouredDough) {

1. 1.        bakeACake(pouredDough, function(cake) {

1. 1.          console.log(cake);

1. 1.        });

1. 1.      });

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. 1. function makeACake(…rawIngredients) {

1. 1.  gatheringIngredients(rawIngredients)

1. 1.  .then(makeTheDough)

1. 1.  .then(pourDough)

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

1. 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