Asynchronous di Javascript

Pada Javascript dikenal istilah synchronous dan asynchronous, kedua hal ini termasuk materi
belajar javascript yang cukup rumit dan bingung untuk dipelajari.

Dasarnya, javascript dijalankan secara synchronous, yaitu mengeksekusi program secara

perbaris, berurutan, baris berikutnya dikerjakan setelah baris sebelumnya selesai dikerjakan.

Sedangkan pada asynchronous, eksekusi baris program berikutnya dapat langsung dijalankan
tanpa harus menunggu eksekusi yang sedang dilakukan selesai.

Pada asynchronous, eksekusi program akan dipindahkan dari call stack dan apabila selesai
akan di pindahkan ke callback quequ¸ setelah seluruh baris program dijalankan makan
javascript akan melakukan event loop untuk memanggil kembali baris program yang bersifat
asynchronous tadi.

Sebagai contoh dari asynchronous dapat dilihat sebagai berikut

console.log(‘Start’);
setTimeout( () => console.log(‘1’), 1000);
console.log(‘Done’);

keluaran dari baris program ini, yaitu : Start, Done, kemudian 1.

Kenapa bukan Start, 1, Kemudian Done ?

Karena console.log merupakan synchronous dan setTimeout merupakan asynchronous.

Pejelasannya seperti berikut :

1. console.log(‘Start’); akan dieksekusi.

2. setTimeout( () => console.log(‘1’), 1000); akan dieksekusi setelah

console.log(‘Start’); selesai, karena ini merupakan asynchronous, maka eksekusinya
akan dipindahkan dari call stack, dan akan dieksekusi secara terpisah.

3. tanpa menunggu proses setTimeout( () => console.log(‘1’), 1000); selesai

dikerjakan satu detik kemudian, console.log(‘Done’); akan langsung dieksekusi.

4. setelah semua baris program dieksekusi, maka javascript akan melakukan event
loop dan memanggil setTimeout( () => console.log(‘1’), 1000); yang telah selesai
dieksekusi dan dipindahkan ke callback quequ.
Ok, sudah sedikit paham tentang synchronous dan asynchronous ?

Untuk lebih jelasnya dapat lihat dari potongan-potongan program berikut.

const satu = () => { Output :

console.log('1');
}
Start
const dua = () => { 1
console.log('2'); 2
} Done

const hallo = () => {

console.log('Start');
satu();
dua();
console.log('Done');
}

hallo();

Hal ini merupakan contoh dari synchronous, dimana eksekusi program akan dijalankan secara
sekuensial, berutuan satu persatu. 'console.log' merupkan function dari javascript yang
bertipe synchronous.

const satu = () => { Output :

console.log('1');
}
Start
const dua = () => { 1
console.log('2'); 2
} Done
3
const tiga = () => {
setTimeout( () => {
console.log('3');
} , 2000);
}

const hallo = () => {

console.log('Start');
let a = satu();
let b = dua();
let c = tiga()
console.log('Done');
}

hallo();
Pada saat eksekusi, function tiga() dijalankan setelah 'done' selesai, hal ini merupakan contoh
dari asynchronous. setTimeout merupakan function dari javascript yang bertipe
asynchronous. Dimana saat eksekusi baris program javascript akan eksekusi yang bersifat
synchronous terlebih dahulu dan memasukan baris yang bersifat asynchronous ke dalam
callback queue setelah selesai di eksekusi, dan nantinya akan dipanggil kembali oleh event
loop untuk dipanggil kembali ke call stack. untuk lebih jelas dapat melihat link video tentang
event loop pada referensi di bawah.

const satu = () => { Output :

console.log('1');
}
Start
const dua = () => { 1
console.log('2'); 2
} Done
return API
const tiga = () => {
setTimeout( () => {
3
console.log('3');
} , 2000);
}

const empat = () => {

return fetch('https://jsonplaceholder.typicode.com/posts/1')
.then((response) => {
return response.json();
})
.then((data) => {
console.log(data);
});
}

const hallo = () => {

console.log('Start');
let a = satu();
let b = dua();
let c = tiga();
let d = empat();
console.log('Done');
}

hallo();

Pada saat eksekusi, function tiga() dan function empat() dijalanjan setelah 'done' selesai.
Dan function empat() lebih dulu di eksekusi dari pada function tiga(), padahal secara baris
program function tiga() berada diatas function empat(). function tiga() dijalankan setelah
'done' karena fetch juga merupakan fungsi asynchronous dari javascript. Dan kenapa lebih
dulu dieksekusi, karena waktu eksekusi dari function empat() lebih cepat dari function tiga()
karena dalam function tiga() console.log('3') akan dieksekusi setelah 2 detik.

const satu = () => { Output :

console.log('1');
}
Start
const dua = () => { 1
console.log('2'); 2
} 3
Done
const tiga = () => (new Promise( (resolve) => {
setTimeout( () => {
return API
console.log('3');
resolve(true);
} , 2000);
} ))

const empat = () => {

return fetch('https://jsonplaceholder.typicode.com/posts/1')
.then((response) => {
return response.json();
})
.then((data) => {
console.log(data);
});
}

const hallo = () => {

console.log('Start');
let a = satu();
let b = dua();
let c = tiga().then( () => {
let d = empat();
console.log('Done');
});
}

hallo();

Pada saat eksekusi, function tiga() telah dijalankan sesuai dengan urutannya. Hal ini terjadi
dengan bantuan dari promise. Dimana kita membuat isi dari function tiga() menjadi promise
kemudian saat di dalam function hallo(), function tiga() dipanggil dengan '.then' dan function
empat() dan console.log('Done') diletakan didalam '.then' tersebut. Tetapi function empat()
tetap dijalankan setelah 'Done' selesai.
 const satu = () => { Output :
console.log('1');
}
Start
const dua = () => { 1
console.log('2'); 2
} 3
return API
const tiga = () => (new Promise( (resolve) => {
setTimeout( () => {
Done
console.log('3');
resolve(true);
} , 2000);
} ))

const empat = () => {

return fetch('https://jsonplaceholder.typicode.com/posts/1')
.then((response) => {
return response.json();
})
.then((data) => {
console.log(data);
});
}

const hallo = () => {

console.log('Start');
let a = satu();
let b = dua();
let c = tiga().then( () => {
let d = empat().then( ()=> {
console.log('Done');
})
});
}

hallo();

pada tahap ini, seluruh blok koding kita telah berjalan sesuai dengan seharusnya yaitu dengan
secara sekuensial. Kenapa pada function empat() tidak terdapat promise sedangkan di dalam
function hallo() kita memanggilnya dengan '.then', karena memang pada dasarnya fetch itu
merupakan function dari javascript yang sudah berbentuk promise. Jadi kita tidak perlu lagi
mengubahnya menjadi promise.

Promise dapat menyebabkan promise hell.

Seperti kita lihat dengan menggunakan promise kita perlu menuliskan '.then' dan ini dapat
menyebakan looping '.then' yang dapat menyebabkan kodingan menjadi sulit untuk dibaca.

a.then(
b.then(
c.then(
d.then();
);
);
);

Oleh karena itu kita dapat menggunakan async/await pada kodingan kita.

const satu = () => { Output :

console.log('1');
}
Start
const dua = () => { 1
console.log('2'); 2
} 3
return API
const tiga = () => (new Promise( (resolve) => {
setTimeout( () => {
Done
console.log('3');
resolve(true);
} , 2000);
} ))

const empat = () => {

return fetch('https://jsonplaceholder.typicode.com/posts/1')
.then((response) => {
return response.json();
})
.then((data) => {
console.log(data);
});
}

const hallo = async () => {

console.log('Start');
let a = satu();
let b = dua();
let c = await tiga()
let d = await empat()
console.log('Done');
}

hallo();
dan agar lebih mudah di-handle bila ada error kita dapat menggunakan try catch, seperti
berikut,

const hallo = async () => {

try{
console.log('Start');
let a = satu();
let b = dua();
let c = await tiga()
let d = await empat()
console.log('Done');
}cathc(err){
console.log(err)
}
}

Bagaimana ?

Cukup membingungkan awalnya, tetapi setelah kita tahu konsepnya, kita akan dengan mudah
mempelajari asynchronous di dalam javascript. Banyak function dari javascript yang bersifat
promise, seperti baca/tulis file, pemanggilan API, baca/tulis database.

--------------------------------------------------------------------------------------------------------------------------

Referensi :

Fetch : https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
Arrow Functions :
https://developer.mozilla.org/id/docs/Web/JavaScript/Reference/Functions/Arrow_functio
ns
Event Loop : https://www.youtube.com/watch?v=8aGhZQkoFbQ
Fake API : https://jsonplaceholder.typicode.com/
async/await : https://medium.com/coderupa/panduan-komplit-asynchronous-
programming-pada-javascript-part-4-async-await-fc504c344238
promise : https://medium.com/coderupa/panduan-komplit-asynchronous-programming-
pada-javascript-part-3-promise-819ce5d8b3c