Cara kerja Asynchronous JavaScript dan konsep yang perlu dipahamai.

Di postingan kali ini akan menjelaskan cara kerja Asynchronous javascript. Sebelum mulai menulis code harus dipahami terlebih dahulu konsep-konsepnya. Agar tidak bingung dengan teknik-teknik programming seperti Callback, Promise, Ajax, Async & Await.

Asynchronous

Asynchronous adalah cara sebuah program, khususnya javascript, bisa menjalankan beberapa tugas tanpa harus nunggu satu tugas selesai dulu, dengan adanya asynchronous memungkinkan aplikasi tetap responsif meski ada proses berat seperti ambil data dari server. Pada javascript, asynchronous adalah konsep yang bikin kode jadi non-blocking. Artinya, kode nggak akan berhenti cuma karena satu tugas. Misalnya, saat request data dari API, javascript bisa ngerjain hal lain sambil nunggu response datanya. jadi membuat program efisien.

Arsitektur Javascript

Secara arsitektur, JavaScript dijalankan oleh sebuah JavaScript Engine. Pada Google Chrome dan Node.js, engine yang digunakan adalah V8. Browser menyediakan Web APIs (DOM, fetch, setTimeout, dll.), sedangkan Node.js menyediakan API seperti File System, HTTP, dan Process. Dengan meng-embed V8 ke dalam Node.js, JavaScript jadi bisa dijalankan di luar browser. Untuk detail penjelasannya seperti ini.

1. JavaScript Engine (V8)

Menjalankan seluruh kode JavaScript. Di dalamnya terdapat Call Stack untuk mengeksekusi kode dan Heap untuk menyimpan data.

2. Call Stack

Tempat JavaScript mengeksekusi kode satu per satu. Karena hanya ada satu Call Stack, JavaScript bersifat single-threaded.

3. Heap

Area memori untuk menyimpan objek, array, function, dan data lainnya selama program berjalan.

4. Web APIs

Fitur yang disediakan browser, seperti fetch(), setTimeout(), dan DOM Event. Pekerjaan asynchronous dijalankan di sini, bukan di Call Stack.

5. Callback Queue

Tempat callback dari operasi asynchronous menunggu giliran untuk dieksekusi setelah pekerjaannya selesai.

6. Microtask Queue

Antrean dengan prioritas lebih tinggi daripada Callback Queue. Digunakan oleh Promise, async/await, dan queueMicrotask().

7. Event Loop

Terus memeriksa apakah Call Stack kosong. Jika kosong, Event Loop akan mengambil tugas dari Microtask Queue terlebih dahulu, kemudian Callback Queue, lalu memasukkannya kembali ke Call Stack untuk dieksekusi.

Runtime 

Karakteristik Runtime Javascript itu single-threaded, non-blocking, asychrounous and concurrent language. perbandingan akan membuatnya menjadi lebih mudah dipahami. Untuk lebih mudah memhaami Alur Eksekusi di javascript bisa langsung test di browser atau menggunakan jsv9000.app.

1. Single Thread vs Multy-Threaded

javascript itu single-threaded bisa dilihat digambar diatas, walaupun secara runtime terasa sepreti multy-threaded sepeti gambar berikut. 

itu karena ekseksui javascript berbeda dengan perkejaan browser. kita harus membedakan.

• Eksekusi kode JavaScript
• Pekerjaan yang dilakukan oleh browser/Node.js

2. Blocking vs Non-blocking

Ini berkaitan dengan apakah operasi membuat program berhenti menunggu atau tetap bisa mengerjakan hal lain.

Contoh Blocking

function sleep(ms) {
    const start = Date.now();
    while (Date.now() - start < ms) {
        // blok CPU
    }
}
console.log("A");
sleep(3000);

Output

A
(tunggu 3 detik)
B

Contoh Non-Blocking

console.log("A");
setTimeout(() => {
    console.log("Timeout selesai");
}, 3000);
console.log("B");

Output

A
B
(3 detik kemudian)
Timeout selesai

3. Synchronous vs Asynchronous

Ini tentang cara kita menulis alur program.

Contoh Synchronous

function getData() {
    return "Data";
}
console.log(getData());
console.log("Selesai");

Output

Data
Selesai

Contoh Asynchronous

async function getUser() {
    const response = await fetch("https://jsonplaceholder.typicode.com/users/1");
    return response.json();
}
async function main() {
    console.log("1. Mulai");
    const userPromise = getUser();
    console.log("2. Request sedang diproses...");
    const user = await userPromise;
    console.log("3.", user.name);
}
main();
console.log("4. Script selesai");

Output

1. Mulai
2. Request sedang diproses...
4. Script selesai

...beberapa saat kemudian...

3. Leanne Graham

HTTP request sedang berlangsung, JavaScript tidak berhenti. Ia tetap mengeksekusi console.log("4. Script selesai")

4. Concurrent vs Parallel

Concurrency = Asynchronous + Single-Threaded

Parallelism = Asynchronous + Multy-Threaded

Javascript itu Conccurency karena dia Asynchronous + Single-Threaded

Asyncronous Javascript

Ada beberapa cara untuk menangani operasi asynchronous di JavaScript, umumnya yaitu Callback, Promise, dan async/await.

fetch() dan XMLHttpRequest tidak dimasukkan karena keduanya merupakan API untuk komunikasi HTTP (AJAX) / teknik komunikasi dengan server, bukan mekanisme penanganan asynchronous.

Callback

Callback adalah fungsi yang dikirim sebagai argumen ke fungsi lain dan akan dipanggil setelah suatu operasi asynchronous selesai

setTimeout(() => {
    console.log("Operasi selesai");
}, 1000);

console.log("Program berjalan...");

Program berjalan...
Operasi selesai

Promise

Promise adalah objek yang merepresentasikan hasil dari suatu operasi asynchronous yang akan selesai di masa mendatang. 

fetch("https://jsonplaceholder.typicode.com/users")
    .then(response => response.json())
    .then(users => {
        console.log(users);
    })
    .catch(error => {
        console.error("Terjadi kesalahan:", error);
    });

Pada contoh tersebut, fetch() mengembalikan sebuah Promise. Ketika request berhasil, callback pada .then() akan dijalankan. Jika terjadi kesalahan, callback pada .catch() akan dipanggil.

fetch() != Promise, tetapi fetch mengembalikan sebuah object Promise, seolah melakukan eksekusi new Promise().  Promise itu sendiri adalah sebuah object pada javascript yang memiliki tiga status, yaitu pending, fulfilled, dan rejected. Bentuknya seperti ini :

const promise = new Promise((resolve, reject) => {
    // Simulasi proses asynchronous
    setTimeout(() => {
        const berhasil = true;
        if (berhasil) {
            resolve("Data berhasil diambil");
        } else {
            reject("Terjadi kesalahan");
        }
    }, 2000);
});

promise
    .then((data) => {
        console.log("Success:", data);
    })
    .catch((error) => {
        console.error("Error:", error);
    })
    .finally(() => {
        console.log("Proses Promise selesai.");
    });

• resolve() akan mengubah Promise menjadi fulfilled, sehingga callback pada .then() dijalankan.
• reject() akan mengubah Promise menjadi rejected, sehingga callback pada .catch() dijalankan.
• .finally() akan selalu dijalankan setelah Promise selesai, baik berhasil maupun gagal.

async / await

async/await dibangung diatas promise bukan menggantikan Promise.

async function getData() {
    console.log("Mengambil data...");
    const response = await fetch("https://jsonplaceholder.typicode.com/users/1");
    const data = await response.json();
    console.log("Data berhasil diterima");
    console.log(data.name);
}
console.log("Program dimulai");
getData();
console.log("Program tetap berjalan");

Program dimulai
Mengambil data...
Program tetap berjalan
Data berhasil diterima
Leanne Graham

API yang menghasilkan operasi Asynchronous

• fetch()
• XMLHttpRequest
• setTimeout()
• addEventListener()
• WebSocket
• dll.

Learning Notes

• await
  • await hanya bisa digunakan didalam async function, jika di taruh di top level atau diluar function, jika web maka script harus di beri attribute type='module' 
  • await biasanya digunakan didalam function, agar tidak blocking alur utama program (tujuan utamanya).
• fetch() akan selalu mengembalikan object Promise
• untuk mengeluarkan response dari promise gunakan await atau .then()
• jika mendefinisikan sebuah script sebagai module, maka variabel di module tidak menjadi properti window.

Referensi

JAVASCRIPT LANJUTAN | 9. Asynchronous Javascript (WPU)

https://www.codepolitan.com/blog/mengenal-apa-itu-asynchronous-adalah/