DEV Community

Guntur Poetra
Guntur Poetra

Posted on • Updated on

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);
}


Enter fullscreen mode Exit fullscreen mode

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);
});


Enter fullscreen mode Exit fullscreen mode

handle-async-callback

Contoh dengan menggunakan naming function.



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

cekTahun(tampilkanTahun);


Enter fullscreen mode Exit fullscreen mode

handle-async-callback_2

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);


Enter fullscreen mode Exit fullscreen mode

handle-async-callback_mistake

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

Top comments (0)