Asynchronous Pada Javascript

Khairu Aqsara Sudirman

Khairu Aqsara Sudirman

Oct 24, 2019 — 3 mins read
Photo by <a href="https://unsplash.com/@casparrubin" target="_blank">Caspar Camille Rubin</a> on <a href="https://unsplash.com" target="_blank">Unsplash</a>

Photo by Caspar Camille Rubin on Unsplash

Sebagai tukang kode, sudah pasti sangat sering menggunakan javascript, lagipula memang javascript merupakan bagian yang tidak terpisahkan dan merupakan komponen inti dalam membangun sebuah aplikasi berbasis web, baik untuk keperluan pendukung User Experience ataupun yang berkaitan dengan masalah pengambilan dan penampilan data dengan Jquery ataupun Ajax.

Sekarang ini javascript terus berkembang, bahkan mungkin perkembangan kita sebut saja JS sangat pesat, bahkan sekarang JS kerap digunakan sebagai aplikasi yang mendukung Client dan Server, jika dijabarkan panjang lebar tidak akan pernah selesai.

Mengapa Asyncrhonous ? ya memang karena sebenarnya ini sudah sangat sering digunakan tetapi masih banyak yang tidak paham konsep dan cara kerjanya, misalnya penggunaan Ajax pada Library Jquery, saya jamin pasti teman-teman yang terbiasa dengan pembuatan website pasti tidak asing dengan hal itu, tetapi apakah paham cara kerja dari ajax itu sendiri ? Ajax adalah singakatan dari Asynchronous Javascript and Xml, artinya secara tidak sadar selama ini sebenarnya kita sudah menggunakan Ascynchronous.

Pemahaman Async sendiri sebenarnya cukup penting dalam pengetahuan Javascript, tetapi sering kali terlewatkan karena memang konsepnya lebih sulit untuk dimengerti, saya pribadi setelah bertahun-tahun menggunakan javascript baru menyadari jika yang selama ini saya gunakan merupakan bagian dari Async itu sendiri.

Ada banyak sekali impelementasi penggunaan Asynchronous, seperti event, request,timer,ajax, listener bahkan beberapa interaksi dengan pengguna menggunakan Asynchronous, misalnya seperti salah satu platform Javascript yang sangat bergantung pada Asynchronous misalnya seperti NodeJS.

Perbedaan Synchronous dan Asynchronous

Mungkin sebagian teman-teman sudah tidak asing dengan istilah tersebut, penjabaranya juga terkadang berbeda setiap orang, tergantung dari cara pemahaman masing-masing, tetapi singaktnya perbedaan yang paling mendasar bisa kita artikan sebagai urutan peng-eksekusian baris program, maksudnya Synchronous akan mengeksekusi program mulai dari urutan paling atas hingga baris paling akhir dari baris kode program, setiap baris program akan di jalankan satu persatu, perhatikan contoh baris kode dibawah

console.log('Pertama')
console.log('Kedua')
console.log('Ketiga')

jika jalankan potongan program diatas, hasilnya adalah:

Sesuai urutan bukan ? ini disebut dengan Synchronous, karena setiap baris program akan di jalankan satu persatu, Jika sulit memahaminya, bayangkan saja jika kita sedang mengantri, dan mendapat Antrian No 10, No 10 tidak akan dilayani jika no 1-9 belum selesai, ini bisa kita artikan sebagai Synchronous

Bagaiaman dengan Asynchronous ? berbeda dengan Synchronous, Asynchronous hasil eksekusi kode program tidak selalu berdasarkan urutan tetapi berdasarkan waktu proses, intinya dengan menggunakan Asynchronous hasil setiap peng-eksekusian baris program tidak akan menunggu proses sebelumnya selesai, coba perhatikan porongan baris kode berikut:

console.log('Pertama')
setTimeout(() => {
    console.log('Saya Ditunda')
}, 1000)
console.log('Kedua')

jika potongan kode diatas kita jalankan, hasilnya akan seperti berikut

Hasil Eksekusi Program

Hasil Eksekusi Program

Terlihat jelas kan jika Saya ditunda muncul pada bagian paling akhir, ini karena console.log('Kedua') tidak akan menunggu hingga fungsi setTimeout() selesai.

Yang perlu diingat adalah, dalam Asynchronous terdapat sebuah kondisi yang disebut dengan Race Conditions, Race Conditions terjadi ketika ada sebuah perintah program yang ketika dijalankan harus menunggu hasil proses sebelumnya (yang belum selesai) dengan bagitu perintah program tersebut tidak akan bernilai karena proses ini bergantung pada proses sebelumnya, perhatikan baris kode dibawah.

console.log('Pertama')
let nama=''
setTimeout( () => {
  nama = "Son Goku" 
}, 3000)
console.log('Nama : '+ nama) 

terlihat jelas bahwa variable nama yang seharusnya menjadi Son Goku tetapi nyatanya tidak demikian, ini dikarenakan baris kode console.log('Nama : '+ nama ) tidak menunggu baris kode sebelumnya selesai sedangkan baris kode ini bisa menampilkan nama jika nama sudah terset, inilah yang disebut dengan Race Conditions pada Asynchronous.

Apakah itu berarti masalah ? tentu saja menjadi masalah, solusinya kita bisa menggunakan Callback, Promise, Asycn/Wait atau Generator, misalnya menggunakan Callback

Chrome Console (Callback)

Chrome Console (Callback)

Memang kita akan sedikit lebih banyak membuat fungsi, agar callback bisa berjalan, masih banyak cara yang lain untuk mengatasi masalah ini, seperti promise, async/await dan generator, sebenarnya callback juga tidak sesederhana ini, penjabaran callback memiliki topik sendiri, tetapi implementasi sederhanya seperti yang teman-teman lihat diatas.

Mudah-mudahan tulisan singkat ini bisa membantu teman-teman lebih memahami tentang Asynchronous pada javascript, terima kasih.

javascript
Read this next

Menggunakan Short Arrow Function pada php 7.4

Akhirnya setelah cukup lama membaca dan mantengin Perkembangan PHP, fungsi Short Arrow hadir juga di PHP, mungkin teman-teman sudah pernah m...

You might enjoy

Promise Pada Javascript

Promise merupakan salah satu dari sekian banyak fitur baru yang hadir pada ES6, mungkin teman-teman sudah pernah menggunakanya, biasanya pro...