Blog

Callback merupakan sebuah fungsi yang memiliki fungsi lain sebagai parameter. Fungsi dalam parameter ini disebut callback. Membuat callback sebenarnya tidak sulit, hanya saja memahami kapan dan bagaimana menggunakan callback ini sesuai kebutuhan dan seefisien mungkin, menurut saya susah, terutama bagi pemula.

Perhatikan contoh dibawah ini!

type Callback = (s:string)=>void;
function myfunction(message:string, callback:Callback):void{
    console.log("memanggil callback");
    callback(message);
}
myfunction("Octara Pribadi",(s)=>console.log(s.toUpperCase()));

Penjelasan kodenya sebagai berikut:

1. type Callback = (s:string)=>void;
   Membuat type Callback agar dapat digunakan kemudian.
2. function myfunction(message:string, callback:Callback):void{
console.log("memanggil callback");
callback(message);
}
   Ini disebut sebagai function caller, di-javascript ini disebut Higher-Order Function. Fungsi ini menerima fungsi lain sebagai parameter.
3. (s)=>console.log(s.toUpperCase())
   Ini disebut sebagai callback, fungsi ini berisi statement yang akan dipanggil kemudian oleh caller saat perintah callback(message);

Pada saat kita menjalankan myfunction("Octara Pribadi",(s)=>console.log(s.toUpperCase()));, "Octara Pribadi" akan dikirimkan ke message:string, dan (s)=>console.log(s.toUpperCase())); akan dikirimkan ke callback pada function caller.
Function caller kemudian akan menjalankan statement callback(message); dimana message berisi argumen pertama yaitu "Octara Pribadi", kemudian dimasukan kedalam parameter callback (s) dan dicetak huruf kapital s.toUpperCase() .
Lantas mengapa harus susah-susah membuat callback ini? Perhatikan contoh dibawah ini:

function myfunction(message:string):void{
    console.log(message);
}
myfunction("Hello, World!");

Pada contoh diatas, kita mendefinisikan sebuah function yang mengambil parameter message, kemudian mencetaknya. Fungsi diatas jelas hanya untuk mencetak message, suatu saat jika kita ingin mencetak banyak suku kata pada message, kita harus merubah body function itu sendiri. Jadi function ini sifatnya statis, cocok digunakan apabila memang fungsinya sudah jelas dan tidak akan berubah lagi.
Sedangkan jika kita memiliki fungsi yang nanti isinya bisa berubah-ubah saat fungsi tersebut dipanggil, maka kita menggunakan callback didalam fungsi tersebut, perhatikan contoh dibawah ini:

type Callback = (s:string)=>void;
function myfunction(message:string, callback:Callback):void{
    callback(message);
}

Maka ketika kita memanggil function tersebut, kita bisa merubah perintah fungsinya sesuka kita, contoh:

myfunction("Hello, World!",(m)=>console.log(m)); //tercetak Hello, World!
myfunction("Hello, World!",(m)=>console.log(m.toUpperCase())); //tercetak HELLO, WORLD!
myfunction("Hello, World!",(m)=>console.log(m.length); //tercetak 13