Fungsi Callback di JavaScript

Di JavaScript, programmer dapat membuat unit kode seperti variabel dan fungsi. Fungsi JavaScript juga dapat menerima parameter, baik berupa variabel maupun nilai literal. Bahkan, Anda dapat melewatkan referensi fungsi lain sebagai parameter. Fungsi callback biasanya dipanggil ketika fungsi lain selesai dieksekusi, sehingga sering muncul sebagai parameter pada fungsi lain.

Definisi Callback

Untuk membuat fungsi callback, kode JavaScript pada halaman harus terlebih dahulu mendefinisikannya. Berikut contoh kode yang mendefinisikan fungsi dan menyimpan referensi variabelnya:

var callbackDefinition = function(numParam) {
    alert(numParam);
};

Fungsi ini menerima satu parameter numerik sebagai contoh. Fungsi callback dapat berisi sembarang kode JavaScript, sama seperti fungsi biasa. Setelah didefinisikan, Anda dapat melewatkan referensi fungsi tersebut ke fungsi lain menggunakan nama variabel.

Parameter Callback

Setelah fungsi didefinisikan sebagai variabel, variabel tersebut dapat dipakai sebagai parameter ke fungsi lain. Berikut contoh penerapannya:

mainFunction(10, callbackDefinition);

Baris ini memanggil fungsi mainFunction dengan dua argumen: angka 10 dan referensi fungsi callbackDefinition. Fungsi yang menerima parameter callback akan bisa memanggil fungsi tersebut menggunakan referensi yang diberikan.

Eksekusi Fungsi

Setelah dipassing ke fungsi utama, fungsi callback dapat dieksekusi. Contoh berikut menunjukkan prosesnya:

function mainFunction(myNum, callbackFn) {
    alert(myNum);
    callbackFn(myNum * 2);
}

Fungsi mainFunction pertama menampilkan alert dengan nilai myNum. Setelah itu, ia memanggil fungsi callback, melewatkan hasil perkalian dua kali myNum sebagai argumen.

Panggilan Fungsi

Setelah sebuah halaman memiliki fungsi yang didefinisikan, termasuk callback, fungsi tersebut dapat dijalankan. Seringkali, pengembang membuat browser menunggu peristiwa pengguna (misalnya klik) lalu mengeksekusi fungsi. Contoh kode HTML berikut memicu fungsi saat terjadi klik:

<button onclick="doCallback()">Klik Saya</button>

Jika fungsi yang disebutkan mengandung definisi callback dan pemanggilan fungsi utama, maka efek callback akan terjadi, seperti ini:

function doCallback() {
    var callFn = function(numParam) {
        alert(numParam);
    };
    mainFunction(10, callFn);
}

Setelah mainFunction mengeksekusi kode internalnya, ia akan memanggil fungsi callback yang sebelumnya didefinisikan.