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.