JavaScript adalah bahasa pemrograman single-thread language atau bersifat synchronous. Artinya, JavaScript hanya bisa melakukan satu operasi di satu waktu, sehingga kode JavaScript dieksekusi secara berurutan dari atas ke bawah layaknya sebuah antrian.

Meski begitu, di Javascript ada 2 istilah mengenai mekanisme proses jalannya program yaitu synchronous dan asynchronous.

Apa itu synchronous?

Seperti yang sudah dijelaskan sebelumnya, JavaScript secara default bersifat synchronous, yaitu kode JavaScript dieksekusi secara berurutan dari atas ke bawah layaknya sebuah antrian.

Jadi, jika satu operasi statement belum selesai dieksekusi, maka operasi statement berikutnya akan mengantri sampai operasi statement sebelumnya selesai di eksekusi.

Untuk lebih jelasnya, perhatikan contoh kode berikut.

Pada contoh kode di atas, kode dijalankan baris per baris, sehingga output kode di atas tereksekusi sesuai urutan perintahnya.

Syncronous bisa menjadi masalah jika terdapat kode yang eksekusinya membutuhkan waktu yang lama, seperti kode untuk mendownload data dari server.

Jika mengikuti mekanisme synchronous yang hanya bisa melakukan satu operasi di satu waktu maka Javascript tidak akan mengeksekusi kode selanjutnya sebelum download selesai. 

Kenyataannya kita masih bisa melakukan aktifitas browsing meskipun download sedang berlangsung. Itu karena Javascript melakukannya secara asyncronous.

Apa itu Asynchronous?

Pada mekanisme asyncronous, kode akan dieksekusi tanpa menunggu eksekusi kode lain selesai sehingga seakan-akan dieksekusi secara bersamaan. Jadi, baris kode selanjutnya dapat dieksekusi meskipun baris kode sebelumnya belum selesai dieksekusi.

Mekanisme asynchronous paling banyak digunakan dalam mengelola komunikasi ke server seperti proses request API (mengambil data dari server), operasi file, koneksi ke database, real time communication (messenger/chat), dan sebagainya.

Untuk lebih jelasnya, perhatikan contoh kode berikut.

Pada kode di atas, baris kode yang menampilkan teks "Halo" akan dieksekusi pertama. Setelah itu, baris kode function setTimeout dijalankan yang waktu prosesnya sudah kita atur selama 2 detik.

Sambil menunggu proses function setTimeout selesai dijalankan, baris kode yang menampilkan teks "Welcome to Ruang Developer" akan dieksekusi. Proses eksekusi baris kode ini selesai saat proses function setTimeout masih berjalan, sehingga ditampilkan lebih dulu.

Kemudian, program terus dijalankan seperti biasa hingga saat mencapai waktu 2 detik, teks "Hello World" akan dieksekusi dan ditampilkan.

Ada 3 teknik yang digunakan untuk menghandle proses asynchronous pada JavaScript:

  • Callback
  • Promise
  • Async Await
Mari kita bahas satu per satu.

1. Callback Javascript

Callback adalah function yang menjadi argument untuk function lain dan akan dieksekusi di dalam function lain melalui parameter.

Untuk lebih jelasnya, perhatikan contoh berikut.


Pada kode di atas, function notify adalah callback function, dipanggil di dalam function download setelah function download di eksekusi yaitu setelah kode console.log(Downloading from \${url}....);.

Contoh lainnya:


Pada kode di atas:
  • function filter menerima dua argument yaitu numbers dan isOdd dan mengembalikan array baru bilangan ganjil yaitu [1, 7, 3, 5]
  • function isOdd adalah callback function untuk parameter fn dalam function filter
  • function isOdd dipanggil di dalam function filter setelah function filter dieksekusi yaitu setelah kode for (const number of numbers) yang mengembalikan nilai boolean.

Dari contoh di atas, kita juga bisa membuat function callback yang mengembalikan array baru bilangan genap seperti berikut.


Anonymous function callback

Function callback bisa dalam bentuk anonymous function atau function tanpa nama seperti di contoh berikut:


Dalam ES6, kita bisa mendefinisikannya dalam bentuk arrow function seperti ini:


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.

Kode di atas dieksekusi tanpa error dan menghasilkan ouput yang sesuai dengan perkiraan. 

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 Javascript

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).

Sebuah Promise berada di salah satu diantara 3 kondisi(state):
  • pending, operasi sedang berlangsung
  • fulfilled, operasi selesai dan berhasil
  • rejected, operasi selesai namun gagal

Membuat Promise

Keyword yang dipakai untuk membuat Promise adalah Promise.

Contoh:

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)

Kode di atas merupakan contoh penggunaan promise fulfilled.

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().

Sedangkan untuk merespon error kita bisa tambahkan method catch().

Selain .then() dan .catch(), kita juga memiliki .finally() dalam promise JavaScript, yaitu fungsi callback yang pasti tereksekusi dalam kondisi apapun (fullfield ataupun rejected).


Promise Chaining

Karena output dari method then() dan catch() adalah sebuah Promise, maka kita bisa merangkainya(chain) dengan Promise yang lain. Artinya, kita juga bisa memanggil .then() lebih dari satu kali ketika dibutuhkan seperti contoh di bawah:

Promise.all() Javascript

Method Promise.all() digunakan untuk mengeksekusi Promise secara paralel. Output dari Promise.all() adalah sebuah promise.

Contoh penggunaan method promise.all() seperti berikut:

Callback vs Promise

Seperti yang disebutkan sebelumnya bahwa kita bisa menggunakan promise untuk mengatasi masalah callback hell.

Kode di bawah adalah callbac hell:

Kode di atas dapat kita buat menggunakan promise seperti ini:

Callback adalah function dan Promise adalah object

Async Await

Async/Await diperkenalkan di ES8 / ES2017 untuk menghandle operasi asynchronous dengan syntax yang lebih mirip dengan synchronous. Async/Await sendiri dibuat di atas Promise.

Ada 2 kata kunci yang memiliki pengertian sebagai berikut:
  • async, mengubah function synchronous menjadi asynchronous.
  • await, menunda eksekusi hingga proses asynchronous selesai.

Penjelasan penggunaan Async Await:
  • Async/Await adalah salah satu cara untuk mengatasai masalah asynchronous pada Javascript selain menggunakan callback dan promise.
  • Pada implementasi Async/Await, kita menggunakan kata kunci async sebelum fungsi. Sebuah async function bisa tidak berisi await sama sekali atau lebih dari satu await.
  • Keyword await hanya bisa digunakan pada fungsi yang menggunakan async, jika digunakan di luar async function maka akan terjadi error.
  • Untuk menggunakan Async/Await, kembalian dari suatu fungsi harus merupakan suatu Promise. Async/Await tidak dapat berdiri tanpa adanya Promise.
  • Tidak seperti Promise, dengan Async/Await maka suatu baris kode dapat tersusun rapi mirip dengan kode yang sifatnya synchronous.
  • Setiap baris yang menggunakan await, akan ditunggu sampai Asynchronous Promise tersebut di resolve.

Berikut ini contoh penggunaan dari async :

Jika salah satu kode di atas dijalankan, maka akan terlihat tampilan seperti berikut ini yaitu menunjukkan async function mengembalian sebuah promise:

Contoh penggunaan async await pada simulasi proses download: 

Pada kode di atas, keyword await membuat function download harus menunggu sampai function getStatus() selesai dieksekusi.

Error handling async/await

Untuk menghandle error Async/Await kita dapat menggunakan try catch di dalam async function yang kita buat, sehingga jika terjadi error kita dapat menangkap errornya dalam block catch. 

Berikut contoh penggunaannya:

Promise vs Async Await

Sekarang mari kita update code sebelumnya yang menggunakan Promise menjadi menggunakan Async/Await.

Contoh simulasi proses download menggunakan promise:

Contoh simulasi proses download menggunakan async await:

Kita juga bisa menggunakan async await dengan arrow function seperti berikut:

Selesai.

Referensi:
https://skilvul.com/courses/javascript-intermediate/
https://devsaurus.com/javascript-asynchronous/
https://blog.ruangdeveloper.com/mengenal-synchronous-dan-asynchronous-pada-javascript/
https://www.matawebsite.com/blog/mengenal-async-await-javascript