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); //namedfunction 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.