Belajar Callback Function di Javascript
|Shares :

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. 

Tags : #javascript #code #function


SHARES :


Budy K's Avatar

Sains & Teknologi Enthusiast, Software Developer. Check my profile!
> 75% komen akan dibalas. Mohon sabar ya. Simpan halaman ini dan cek kembali lagi

Comments

* Email will not be published


    Privacy .ToS .Contact Us
    © 2017 Teknosains