Perbedaan Javascript Synchronous Dengan Asynchronous

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.