Cara menggunakan CONDITOONS pada JavaScript

Topik :

• Konsep asynchronus
• Callback
• Promise
• Async dan Await
• Generator

Konsep Asynchronous

Memahami asynchronus adalah salah satu hal penting dalam dunia Javascript. Topik ini sering dilewatkan ketika masih di tahap belajar fundamental mungkin karena konsepnya terlalu ribet dijelaskan atau alasan lain. Bahkan banyak yang sudah bertahun-tahun menggunakan javascript ternyata masih banyak yang masih kurang paham dengan konsep asynchronous. Walaupun secara praktek mungkin sudah sering digunakan.

Ada banyak sekali implementasi asynchronous dalam javascript seperti event, timer, request ajax, listener, interaksi user dan masih banyak lagi. NodeJS merupakan salah satu contoh sukses platform javascript yang sangat bergantung pada teknik asynchronus.

Topik asynchronous memang termasuk salah satu topik yang tidak terlalu mudah untuk dipahami, tapi ada istilah “practice makes perfect”. Semakin sering di praktekkan semakin paham. Tapi praktek tanpa memahami konsep juga buta, terlalu banyak trial and error dan makan waktu. Menurut saya cara ideal untuk memahami asynchronous dengan memahami konsepnya adalah secara bertahap dan mempraktekkannya. Ingat kuncinya adalah bertahap bukan borongan.

Synchronous vs Asynchronous

Dalam dunia programming kedua istilah ini digunakan untuk membedakan tentang cara urutan eksekusi perintah-perintah yang ada dalam kode anda.

Synchronous adalah yang paling umum dan mudah di mengerti. Setiap perintah di eksekusi satu persatu sesuai urutan kode yang anda tuliskan. Contoh :

Output dari kode diatas dijamin akan sesuai urutan, karena setiap perintah harus menunggu perintah sebelumnya selesai. Proses seperti ini disebut ‘blocking’.

Dalam dunia nyata ini mirip seperti antrian di BANK. Jika anda berada antrian nomor 4, maka anda akan dilayani setelah antrian 1–3 sampai selesai.

Sedangkan Asynchronous hasil eksekusi atau output tidak selalu berdasarkan urutan kode, tetapi berdasarkan waktu proses. Eksekusi dengan asynchronous tidak akan membloking atau menunggu suatu perintah sampai selesai. Daripada menunggu, asynchronous akan mengeksekusi perintah selanjutnya. Wait, sampai disini mungkin tidak masuk akal

Contoh :

Catatan :
Pada baris ke 2 setTimeout digunakan untuk menunda eksekusi dalam satuan milisecond dalam hal ini untuk simulasi prosess async.

Perhatikan bahwa outputnya tidak berurutan sesuai input (kode). Karena cara kerja asynchronous adalah berdasarkan waktu proses. Jika ada salah satu eksekusi membutuhkan proses yang agak lama, maka sembari menunggu prosess tersebut javascript mengeksekusi perintah selanjutnya.

Mari kita lihat performancenya, Sebagai contoh ada 3 perintah dengan waktu proses masing-masing.

Dari contoh simulasi diatas model eksekusi asynchronous lebih effisien.

Tapi ada yang menjadi pertimbangan yang disebut race condition. Race Condition terjadi ketika ada satu perintah yang bergantung pada output eksekusi asynchronous sebelumnya.Dengan kata lain kejar-kejaran. Contoh :

Dari contoh kode diatas besar kemungkinan displayUser menampilkan data kosong, karena belum tentu output dari ekskusi requestAjax sudah selesai.

Solusi untuk problem ini yaitu menggunakan teknik callback, promise, generator atau asyc/await yang akan kita kupas lebih dalam di sesi berikutnya.

Sampai disini mungkin timbul beberapa pertanyaan.

• Apakah javascript secara default mengeksekusi perintah dengan metode synchronous atau asynchronous ?
• Bisakah kita membuat proses asynchronous ?
• Dalam kasus apa teknik asynchronous digunakan ?

Jawabannya :

• Javascript secara default mengeksekusi perintah secara synchronous, kecuali untuk beberapa hal seperti : ajax,websocket, worker, file, database, animasi dan beberapa hal lainya.
• Kita tidak bisa membuat proses asynchronous murni. Tapi untuk membuat simulasi iya kita bisa menggunakan fungsi setInternal dan setTimeout
• Teknik Asynchronous paling banyak digunakan mengelola komunikasi yang tidak mungkin sinkron atau harus menunggu seperti proses request ajax, operasi file, koneksi ke database, websocket, real time communication seperti pada aplikasi chating dan masih banyak lagi.

Baik, sampai disini dulu. Mudah-mudahan bisa membantu anda memahami konsep asynchronous. Jika ada yang ingin ditanyakan silahkan post di kolom komentar.

Untuk selanjutnya kita akan kupas lebih dalam tentang teknik programming asynchronous pada javascript seperti :

• Callback
• Promise
• Async/Await
• Generator

Setiap topik akan disertakan dengan konsep, contoh dan penerapannya. Jika anda berminat belajar lebih dalam, Silahkan isi email anda disini, agar saya bisa memberitahukan update selanjutnya.