Apa itu synchronous dan asynchronous javascript?

Synchronous code runs in sequence. This means that each operation must wait for the previous one to complete before executing.

Asynchronous code runs in parallel. This means that an operation can occur while another one is still being processed.

Asynchronous code execution is often preferable in situations where execution can be blocked indefinitely. Some examples of this are network requests, long-running calculations, file system operations etc. Using asynchronous code in the browser ensures the page remains responsive and the user experience is mostly unaffected.

Proses asynchronous sering digunakan untuk komunikasi data, karena data menjadi bagian inti dari sebuah aplikasi maka konsep asynchronous sangat penting untuk dipahami.

Selain termasuk Interpreted Language dan Dynamic-Typed Language, JavaScript juga termasuk Single Threaded Programming Language.

Yaitu JavaScript hanya bisa melakukan satu operasi di satu waktu, sehingga code JavaScript dieksekusi secara berurutan dari atas ke bawah layaknya sebuah antrian atau biasa disebut synchronous.

Copy
1console.log('Hi Brachio');
3console.log('the time has come');
5console.log('to learn how to code');
Namun hal ini bisa menjadi masalah jika terdapat code yang eksekusinya membutuhkan waktu yang lama, seperti code untuk mendownload data dari server.
Kita tidak tahu berapa lama waktu yang dibutuhkan untuk download data tersebut.
Jika mengikuti mekanisme synchronous dimana JavaScript hanya bisa melakukan satu operasi di satu waktu maka seharusnya JavaScript akan berhenti dan tidak akan mengeksekusi code selanjutnya sebelum download selesai.
Kenyataannya kita masih bisa melakukan aktifitas browsing meskipun download sedang berlangsung dan browser tidak hang.
Bagaimana JavaScript bisa melakukannya?
Jawabannya adalah JavaScript melakukannya secara asynchronous.
Pada konsep asynchronous, code akan dieksekusi tanpa menunggu eksekusi code lain selesai sehingga seakan-akan dieksekusi secara bersamaan.
Kita bisa menggunakan simulasi berikut:
Copy
1console.log('Hi Brachio');
4  console.log('the time has come');
7console.log('to learn how to code');
setTimeout pada code di atas membuat kata the time has come akan ditampilkan setelah 3 detik.
Namun JavaScript tidak akan menunggu selama 3 detik tapi akan segera menampilkan kata to learn how to code.
Sehingga hasilnya:



Berikut gambaran perbedaan antara synchronous, asynchronous, dan asynchronous pada javascript:
Synchronous
Asynchronous
Asynchronous pada JavaScript
Untuk lebih memahami asynchronous pada JavaScript kita perlu mengetahui apa itu Event Loop.
Event loop adalah bagian dari JavaScript Runtime yang bertugas untuk menangani Event Callback, Event Callback sendiri adalah bagian dari code yang dieksekusi setelah event tertentu.
Contoh Kasus: Klik tombol Download di browser.
mouse click adalah event
function yang bertugas untuk mengunduh adalah callback
Ketika event terjadi maka callback dari event tersebut akan ditempatkan pada suatu tempat yang disebut Event Handler Queue atau Queue.
Event Loop akan terus memonitor Queue dan akan mengeksekusi callback sesuai urutan siapa yang pertama masuk ke dalam Queue.
Ada 3 teknik yang digunakan untuk menghandle proses asynchronous pada JavaScript:
Callback adalah function yang menjadi argument untuk function lain dan akan dieksekusi pada poin tertentu, bisa jadi saat ini atau nanti.
Contoh
Copy
2  console.log('Download complete!');
5const download = (url, callback) => {
6  console.log(`Downloading from ${url}....`);
11const url = 'https://brachio.site/download';
Output dari code di atas adalah:
Copy
1Downloading from https://brachio.site/download....
Pada code di atas function notify adalah callback function, dipanggil setelah code console.log(Downloading from \${url}....);.



💡 INFO
Menjadikan function sebagai argument untuk function yang lain adalah sesuatu yang mungkin di JavaScript, karena function pada JavaScript adalah First-Class Object.
Yang berarti function memiliki karakter yang sama dengan object.
Sehingga sebuah function dapat:
disimpan dalam sebuah variable, object atau array
menjadi argument untuk function lain (High-Order Function)
menghasilkan function baru
Nested Callback
Kita bisa menambahkan callback di dalam callback.
Copy
1const download = (url, callback) => {
2  console.log(`Downloading from ${url}....`);
7const url1 = 'https://brachio.site/download';
8const url2 = 'https://trex.site/download';
9const url3 = 'https://stego.site/download';
11download(url1, function () {
12  download(url2, function () {
13    download(url3, function () {
14      console.log('Download complete!');
Code di atas dieksekusi tanpa error dan menghasilkan ouput yang sesuai dengan perkiraan.
Copy
1Downloading from https://brachio.site/download....
2Downloading from https://trex.site/download....
3Downloading from https://stego.site/download....
Namun kondisi ini bisa mengarah ke suatu masalah yang disebut dengan Callback Hell, yaitu kondisi dimana terlalu banyak callback di dalam callback yang lain.
Callback Hell membuat code sulit untuk dipahami dan sulit diperbaiki jika ditemukan bug di dalamnya.
Sebagai gantinya kita bisa menggunakan Promise.
Promise bisa dikatakan sebagai object yang menyimpan hasil dari sebuah operasi asynchronous baik itu hasil yang diinginkan (resolved value) atau alasan kenapa operasi itu gagal (failure reason).
Kita ambil contoh seperti saat kita memesan ojek online.
Saat kita mencari driver lewat aplikasi, aplikasi akan berjanji(promise) memberi tahu hasil dari pencarian kita.
Hasilnya bisa diantara dua, yaitu driver ditemukan (resolved value) atau alasan kenapa driver tidak ditemukan(failure reason).



Sebuah Promise berada di salah satu diantara 3 kondisi(state):
pending, operasi sedang berlangsung
fulfilled, operasi selesai dan berhasil
rejected, operasi selesai namun gagal
Sama seperti pada kasus memesan ojek online, status permintaan kita pada aplikasi online diantara tiga kondisi:
Mencari driver (pending)
Menemukan driver (fulfilled)
Driver tidak ditemukan (rejected)
Membuat Promise
Keyword yang dipakai untuk membuat Promise adalah Promise.
Copy
3const download = new Promise((resolve, reject) => {
5    resolve('Download complete');
7    reject('Download failed');
Function setelah keyword new Promise disebut executor.
Dan di dalam executor terdapat dua callback function:
resolve(value) adalah callback function yang dieksekusi jika operasi yang dijalankan oleh executor berhasil(fulfilled)
reject(error) adalah callback function yang akan dieksekusi jika operasi gagal (rejected)
Promise Handler
Selanjutnya untuk merespon hasilnya (baik berupa value atau error) kita perlu menambahkan handler.
Handler biasanya berupa function dan ditempatkan di dalam method bernama then().
Copy
1download.then((result, error) => {
sedangkan untuk merespon error kita bisa tambahkan method catch().
Promise Chaining
Karena output dari method then() dan catch() adalah sebuah Promise, maka kita bisa merangkainya(chain) dengan Promise yang lain.
Copy
3const download = new Promise((resolve, reject) => {
4  let progress = initProgress + 25;
10    console.log(`Download progress is ${result}%`);
14    console.log(`Download progress is ${result}%`);
19      console.log('Download complete');
Promise.all()
Method Promise.all() digunakan untuk mengeksekusi Promise secara paralel.
Output dari Promise.all() adalah sebuah promise.
Copy
1const downloadStart = new Promise((resolve, reject) => {
4const downloadHalf = new Promise((resolve, reject) => {
7const downloadFull = new Promise((resolve, reject) => {
11Promise.all([downloadStart, downloadHalf, downloadFull]).then((result) => {



Callback vs Promise
Seperti yang disebutkan sebelumnya bahwa kita bisa menggunakan promise untuk mengatasi masalah callback hell.
❌ Callback Hell
Copy
1const download = (url, callback) => {
2  console.log(`Downloading from ${url}....`);
7const url1 = 'https://brachio.site/download';
8const url2 = 'https://trex.site/download';
9const url3 = 'https://stego.site/download';
11download(url1, function () {
12  download(url2, function () {
13    download(url3, function () {
14      console.log('Download complete!');
✔️ Promise
Copy
1console.log('Hi Brachio');
4  console.log('the time has come');
7console.log('to learn how to code');
1
💡 Callback adalah function dan Promise adalah object
Async/Await diperkenalkan di ES8 / ES2017 untuk menghandle operasi asynchronous dengan syntax yang lebih mirip dengan synchronous.
Async/Await sendiri dibuat di atas Promise.
Kita bisa membuat simulasi proses download menggunakan code dibawah ini.
Copy
1console.log('Hi Brachio');
4  console.log('the time has come');
7console.log('to learn how to code');
2
Pada code di atas keyword await membuat function download harus menunggu sampai function getStatus() selesai dieksekusi.
 

			
Apa itu synchronous dan asynchronous pada JavaScript?
			
Asynchronous adalah proses jalannya program bisa dilakukan secara bersamaan tanpa harus menunggu proses antrian. Synchronous merupakan bagian dari Asynchronous (1 antrian) dimana proses akan dieksekusi secara bersamaan dan untuk hasil tergantung lama proses suatu fungsi synchronous .
		
			
Apa itu asynchronous JavaScript?
			
JavaScript Asynchronous: Kode asynchronous memungkinkan program untuk dieksekusi segera di mana kode sinkron akan memblokir eksekusi lebih lanjut dari kode yang tersisa sampai menyelesaikan yang sekarang.
		
			
Apa itu proses synchronous?
			
Pembelajaran sinkron (synchronous) adalah pembelajaran yang dilakukan secara real time yaitu dimana pemebelajaran yang dilakukan antara guru dengan siswa/mahasiswa sama-sama online dan dapat melakukan kominikasi dua arah secara langsung memberikan feedback.
		
			
Apakah Node JS asynchronous?
			
Asynchronous & Event-driven

 Semua API dari Node.js bersifat asynchronous, artinya tidak memblokir proses lain sembari menunggu satu proses selesai. Server Node.js akan melanjutkan ke ke pemanggilan API berikutnya lalu memanfaatkan mekanisme event notification untuk mendapatkan respon dari panggilan API sebelumnya.