Belajar Memahami Synchronous dan Asynchronous Javascript

Saya sebagai pemula mecoba menuliskan apa yang saya coba pelajari dalam hal ini saya sangat suka mengikuti perkembangan javascript. jika kita lihat di banyak aplikasi yang di kembangkan menggunakan javascript banyak di temukan sebuah function yang di ekseskusi secara synchronous dan asynchronous atau kita sebut sync dan async ,

Javascript dalah sebuah bahasa pemrograman yang default memproses kode secara baris perbaris, setiap baris kode tidak akan di eksekusi sebelum bari kode sebelumnya selesai di proses dan semua akan di simpan di dalam call stack

Mengenal sync dan async

synchronous

sync Synchronous , adalah mode default javascript dalam melakukan proses eksekusi perintah kode. Kita coba dengan kode di bawah ini.

function cekKabar(nama) {
    console.log('Apa kabar,', nama);
}

function sayHallo(nama) {
    console.log('Hallo,', nama);
}

sayHallo('Soefyan');
cekKabar('Soef');

kita coba tulis dan eksekusi baris perintah kode di atas di dalam console browser.

Terlihat semua berjalan baik-baik saja tidak ada yang terlihat aneh.

asynchronous

Jika pada sync, kode di baca dan di proses baris perbaris, dan async kode juga di baca baris perbaris terlihat tidak ada yang berbeda. Lalu di mana perbedaanya ?

Sebenarnya kode async telah di proses, hanya saja sebatas schedule waktu untuk melakukan eksekusi. async akan melakukan eksekusi setelah penjadwalan. Mari kita lihat kode di bawah ini.

function cekKabar(nama) {
    console.log('Apa kabar,', nama);
}

function sayHallo(nama) {
    setTimeout(function(){ console.log('Hallo,', name); }, 3000);
}

sayHallo('Soefyan');
cekKabar('Soef');

mari kita coba eksekusi kodenya.

Terlihat perbedaan pada urutan proses baca kodenya, fungsi sayHallo() tidak langsung di eksekusi.

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.