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
untuk memanggilnya, kita bisa menulisnya dengan
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
untuk memanggil function luasPersegiPanjang,
Mengapa 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:
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:
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.
Lalu kita panggil/pakai callback yang diisikan dengan data yang akan dibawa (cake) saat task selesai dilakukan.
Sesudah memakai callback, fungsi tak perlu lagi mengembalikan nilai. Sehingga kita dapat hapus kode return cake;. Sehingga keseluruhan fungsi akan terlihat semacam ini:
Kemudian untuk memakai fungsi getCake, kita ubah kode dari:
Jadi:
Sehingga saat dijalankan akan sesuai dengan harapan kita.
Callback HellKita 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:
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:
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:
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.
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 |