Pada kali ini saya akan membahas tentang materi javascript lebih detailnya kita akan membahs Perbedaan Javascript Synchronous Dengan Asynchronous.
Sebenarnya ketika kita membuat aplikasi dengan menggunakan javascript secara default akan di eksekusi secara berurutan dari atas ke bawah menunggu satu baris selesai dahulu baru baris selanjutnya akan di eksekusi. Nah proses eksekusi yang seperti ini
biasa di sebut dengan proses Synchronous atau orang-orang kadang menyebutnya dengan istilah Blocking.
Jika kita lihat pada simulasi berikut :
Coba teman-teman lihat gambar di atas , di sebelah kiri merupakan proses dari Synchronous jika di terjemahkah pada proses Synchronous setiap proses di panggil maka akan menunggu dahulu proses tersebut baru proses selanjutnya dapat di eksekusi.
Sedangkan proses Asynchronous merupakan kebalikan dari proses Synchronous dimana proses Asynchronous akan menjalankan prosese tanpa menunggu proses yang sebelumnya di panggil selsesai di proses.
kita akan melihat penggunaanya dalam code kapan kita menggunakan Asynchronous :
function getProducts[keyword] {
// Code AJAX Here!
const ajax = new XMLHttpRequest;
const url = getProductsUrl[keyword];
ajax.open['GET', url];
ajax.send[];
const response = JSON.parse[ajax.responseText];
console.log[response];
}Pada kode di atas secara default akan di eksekusi atau di jalankan dengan menggunakan metode Synchronous tetapi jika proses itu di jalankan pasti akan terjadi error karena proses menarik data pada baris kode ini :
ajax.send[];
membutuhkan waktu di luar eksekusi baris program, jadi di saat di tangkap datanya menggunakan json.parse akan terjadi error dimana datanya belum selesai di GET.
Nah untuk menjalankanya synchronous saja tidaklah cuku maka kita juga membutuhkan proses Asynchronous dimana proses tersebut akan berjalan terpisah dari proses Synchronous , berikut kode nya :
function getProducts[keyword] {
// Code AJAX Here!
const ajax = new XMLHttpRequest;
const url = getProductsUrl[keyword];
ajax.open['GET', url];
ajax.send[];
ajax.onload = function[] {
const data = JSON.parse[ajax.responseText];
console.log[response];
}
}pada proses kode menggunakan Asynchronous kita menggunakan sebuah CALLBACK atau biasa di sebut Anonymous Function untuk memisahkan proses Asynchronous dengan Synchronous sehingga proses tersebut dapat di lakukan tanpa bentrok satu dengan yang lainya.
Sering dari kita mendengar istilah Asynchronous dan Synchronous pada ranah pemrograman. Istilah ini cukup akrab dalam Bahasa pemrograman Javascript. Dua nama tersebut merupakan sebuah Teknik atau style programming dengan keunggulan dan kekurangannya masing-masing.
Mari kita mulai dari asynchronous programming. Asynchronous programming merupakan sebuah pendekatan pemrograman yang tidak terikat pada input output [I/O] protocol. Ini menandakan bahwa pemrograman asynchronous tidak melakukan pekerjaannya secara old style / cara lama yaitu dengan eksekusi baris program satu persatu secara hirarki. Asynchronous programming melakukan pekerjaannya tanpa harus terikat dengan proses lain atau dapat kita sebut secara Independent. Untuk lebih jelasnya, mari kita perhatikan Gambar di bawah ini:
Dari gambar diatas terlihat bahwa pendekatan model pemrograman Asynchronous memiliki waktu eksekusi yang lebih cepat 25 detik dibandingkan dengan pendekatan metode pemrograman Synchronous. Terlihat pula, pada asynchronous tiap modul atau task tidak perlu menunggu task lainnya selesai untuk berjalan. Dengan begitu, waktu eksekusi juga dapat menjadi lebih singkat dan cepat.
Berbeda dengan asynchronous, synchronous programming memiliki pendekatan yang lebih old style. Task akan dieksekusi satu persatu sesuai dengan urutan dan prioritas task. Hal ini memiliki kekurangan pada lama waktu eksekusi karena masing-masing task harus menunggu task lain selesai untuk diproses terlebih dahulu.
Namun, bukan berarti Synchronous programming jauh lebih jelek dibandingkan dengan asynchronous programming. Terdapat beberapa hal yang menjadi synchronous programming memiliki keunggulan dibandingkan dengan asynchronous programming. Beberapa diantaranya adalah kemudahan yang ditawarkan oleh synchronous programming dibandingkan dengan asynchronous programming.
Kedepannya, 2 pendekatan programming ini akan semakin banyak diadopsi dan berada pada 1 fungsi dan tujuan yang sama. Terlebih dengan semakin berkembangnnya Rest API dan teknologi pemrograman. Menarik kan, Yuk Belajar lebih banyak!