Handle Async Callback Javascript

Di javascript sudah tak asing lagi dengan istilah callback. Callback sendiri adalah function yang disisipkan function sebagai paramater atau argument. Callback sangat erat kaitannya dengan asynchronous.

Sebuah fungsi yang menerima function sebagai parameter-nya, merupakan ciri dari asynchoronous function, sehingga dapat kita berikan parameter tersebut sebagai anonymous atau naming function.

function cekTahun(callback) {
    setTimeout(function () {
        callback((new Date()).getFullYear());
    }, 2000);
}

Function cekTahun menerima sebuah parameter atau argument dengan nama callback bertipe function. Pada saat callback di invoke, akan mengembalikan nilai dari tahun.

Contoh menggunakan anonymous function.

cekTahun(function (tahun) {
    console.log('Sekarang adalah tahun:', tahun);
});

Contoh dengan menggunakan naming function.

function tampilkanTahun(tahun) {
    console.log('Sekarang adalah tahun:', tahun);
}

cekTahun(tampilkanTahun);

Terlihat pada gambar, tidak ada perbedaan dari kedua hasil gambar diatas, baik anonymous maupun naming function. Ini hanyalah cara anda untuk mengorganisir setiap baris kode agar tertata rapi dan mudah dibaca.

Kekeliruan Umum Mengolah Asynchronous

Kekeliruan umum pada saat menghandle asynchronous operation, adalah menghandlenya layaknya synchronous. Misalnya...

function cekTanggal() {
    return setImmediate(function () {
        return (new Date()).getDate();
    });
}

const tanggal = cekTanggal();
console.log('Sekarang tanggal:', tanggal);

Function cekTanggal mengembalikan nilai dari function setImmediate, yang tentu saja tidak sesuai ekspetasi anda. Ini adalah kekeliruan yang umum, bahkan saya pribadi juga pernah keliru tentang ini.

Terkait

• Memahami Synchronous dan Asynchronous Javascript
• Handle Async Dengan Promises