Memahami Synchronous dan Asynchronous Javascript

Jika anda baru menggeluti bahasa pemrograman javascript, tentunya anda sering menemukan kode yang dieksekusi secara synchronous maupun asynchronous. Oke, kali ini kita sebut saja kedua istilah itu sync untuk synchronous dan async untuk asynchronous.

Process

Secara default, javascript diproses dalam baris perbaris, artinya setiap baris kode tidak akan dieksekusi sebelum baris kode sebelumnya selesai diproses. Semua proses akan ditampung dan dikenal dengan istilah call stack.

Synchronous

Synchronous (sync), merupakan mode default dalam proses eksekusi perintah kode. Perhatikan baris kode berikut

function tanyaKabar(name) {
    console.log('Apa kabar,', name);
}

function katakanHallo(name) {
    console.log('Hallo,', name);
}

katakanHallo('Guntur');
tanyaKabar('Gun');

Jika kita eksekusi kode diatas, maka pada layar console dibrowser anda akan muncul seperti gambar berikut

Sepertinya semua berjalan dengan baik, tidak ada yang aneh dan baik-baik saja. Hahaa.

Asynchronous

Jika pada sync, kode diproses baris perbaris, maka di async kode diproses secara baris perbaris juga. Hah..., maksudnya, lantas perbedaannya apa?

Dalam skenario-nya, sebenarnya kode async telah diproses, hanya saja sebatas penjadwalan untuk dieksekusi pada tahapan berikutnya. Artinya, kode yang berperilaku async tidak akan langsung dieksekusi, tetapi di skip dan akan melakukan eksekusi baris perintah berikutnya.

function tanyaKabar(name) {
    console.log('Apa kabar,', name);
}

function katakanHallo(name) {
    setImmediate(function () {
        console.log('Hallo,', name);
    });
}

katakanHallo('Guntur');
tanyaKabar('Gun');

Mari kita eksekusi kode diatas dan perhatikan hasilnya

Terlihat perbedaan pada urutan proses eksekusinya. Fungsi katakanHallo('Guntur') tidak langsung dieksekusi, sebab penerapannya menggunakan asynchronous dalam body fungsi katakanHallo.

Kapan Menggunakan Async?

Pemanfaatan async sangat berguna pada saat melakukan operasi-operasi yang tidak harus menunggu proses yang lainnya. Misalnya, memanipulasi DOM ketika melakukan proses ajax.

Agar bisa memahami, kita perlu mengetahui cara menghandle kode async tersebut dengan cara callback ataupun promises.

Kesimpulan

Yang perlu digarisbawahi adalah bagaimana cara kita untuk mengurutkan setiap baris-baris perintah agar dapat diproses dan dieksekusi sesuai tujuan.

Setiap kode yang akan dituliskan tidak selalu menggunakan synchronous ataupun asynchronous, itu selalu bergantung pada kebutuhan sebuah proses program.

Terkait

• Handle Async Dengan Callback
• Handle Async Dengan Promises