Belajar Callback Function di Javascript

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.