Callback function adalah function yang dibuat dan dieksekusi didalam function lain (function yang memanggilnya). Callback function telah ada dibahasa pemrograman populer lain seperti PHP ,Node.js dll .
function callback dibuat untuk mempermudah 'pendelegasian tugas' yang dikerjakan oleh function lain. Umumnya callback function dibuat untuk tujuan 'general' sehingga bisa digunakan berulang-ulang dan bisa dipakai oleh function-function lain.
Jika kamu memakai jQuery atau Node.js, maka kamu tidak akan tidak memakai Callback function.
$.ajax({
....
....
success : function(){
//ini callback function
}
});
//atau
$("#btn-submit").click(function() {
alert("Btn 1 Clicked");
});
atau dijavascript biasa
setTimeout(function(){
console.log("This will be written after 3 seconds");
},3000);
atau di Node.js
app.get('/',function(req,res){
res.render("Hello world");
});
Sejatinya function callback itu seperti Closure , kita bisa namai atau anonymous , perhatikan contoh-contoh diatas , callback function langsung didefinisikan didalam yang kita sebut sebagai Anonymous.
//anonymous
setTimeout(function(){
console.log("1. This will be written after 3 seconds");
},3000);
//named
function write(){
console.log("2. This will be written after 3 seconds");
}
setTimeout(write,3000);
//named (closure)
var write2 = function(){
console.log("3. This will be written after 3 seconds");
}
setTimeout(write2,3000);
ketiga cara diatas akan menghasilkan output yang sama.
Saatnya membuat Function Callback sendiri
misal kita akan membuat 1 function untuk memproses inputan (first name dan last name) lalu kita ingin kedua inputan itu disatukan sehingga menjadi kalimat sapaan seperti "Hello Ganjar Setia" . nah untuk memproses menjadi kalimat sapaan kita membutuhkan bantuan function callback
//function utk proses menjadi kalimat sapaan
//function ini jg akan dijadikan Callback
function prosesData(full_name){
console.log("Hello "+full_name);
}
//function utk menerima inputan
function getInput(first_name,last_name,myCallback){
var full_name = first_name+" "+last_name;
//pastikan bhwa paramter ke-3 adl sebuah fungsi
if(typeof myCallback == "function"){
myCallback(full_name);
}
else{
console.log("r u kidding? that's not a function");
}
}
//kasih inputan , callback 'prosesData'
getInput("Ganjar","Setia",prosesData);
Jalankan kode diatas maka outputnya adalah
Hello Ganjar Setia
/*(Tips : untuk melihat output pakai Console dibrowser , CTRL + F12)*/
Perhatikan kode diatas, kamu pasti sedikit bingung. perhatikan baris berikut
getInput("Ganjar","Setia",prosesData);
pada paramater ke-3 kita panggil 'prosesData' artinya kita memberi tahu ke getInput bahwa Callback yang harus dipanggil adalah function 'prosesData' bukan yang lain. Hah ? function prosesData kan punya paramater, kok itu panggilnya 'prosesData' saja ? .
ok, sekarang perhatikan function getInput dan kode-kode didalamnya, kamu akan memenukan 'myCallback' . nah myCallback lah yang ditugaskan oleh getInput untuk mengirim data ke prosesData . perhatikan urutan paramater nya :
getInput("Ganjar","Setia",prosesData);
vs
getInput(first_name,last_name,myCallback);
myCallback ada diurutan ketiga sesuai dengan yang kita tentukan. myCallback akan mengerjakan tugasnya yaitu memberi si prosesData sebuat inputan.
myCallback(full_name);
dan function prosesData akan melakukan tugasnya yaitu membuat kalimat sapaan.
Ah ribet kenapa gak langsung aja ?
mau langsung saja juga silahkan, namun prinsipnya Callback function ini dibuat untuk hal-hal berikut di Javascript :
1. Asynchronous execution (Node.js, ajax)
2. Event Listeners/Handlers (jquery dll)
3. setTimeout and setInterval methods
4. Generalization : Kode jadi lebih ringkas, lebih indah,dan mudah dibaca/maintenance
Silahkan praktekan.