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

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

handle-async-callback

Contoh dengan menggunakan naming function.

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

cekTahun(tampilkanTahun);

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

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)

11 Tips That Make You a Better Typescript Programmer

1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields

...

Read the whole post now!