Tahun baru, skill baru! 🚀. Masukkan kupon "skill2025" untuk diskon 30% di kelas apa saja

Logo Koala Skodev mengetik

Skodev

Belajar coding dalam bahasa Indonesia

APA ITU ASYNC

Belajar tentang async JavaScript, apa itu, bagaimana cara kerjanya dan bagaimana menggunakannya untuk mempercepat aplikasi web.

Async, singkatan dari asynchronous, adalah konsep dalam JavaScript yang memungkinkan operasi non-blocking. Ini berarti JavaScript dapat melakukan tugas lain sambil menunggu operasi selesai, meningkatkan efisiensi dan kinerja aplikasi web. Dengan menggunakan teknik async, pengembang dapat menulis kode yang menangani tugas seperti pengambilan data, pembacaan file, dan operasi memakan waktu lainnya tanpa membekukan seluruh aplikasi.

Apa itu Async

Async adalah singkatan dari asynchronous, yang berarti tidak bersamaan. Dalam JavaScript, async memungkinkan kita untuk menjalankan tugas-tugas yang memakan waktu tanpa harus menghentikan eksekusi kode lainnya. Dengan kata lain, JavaScript dapat melakukan beberapa tugas sekaligus tanpa harus menunggu satu tugas selesai sebelum memulai tugas berikutnya. Ini sangat berguna untuk meningkatkan efisiensi dan kinerja aplikasi web.

Beberapa konsep seputar Async di JavaScript

Single Thread

JavaScript adalah bahasa pemrograman single-threaded. Artinya, dua bit kode tidak dapat berjalan secara bersamaan; mereka harus berjalan satu per satu dalam satu urutan yang disebut ‘thread’.

Non-Blocking

JavaScript adalah bahasa pemrograman yang ‘Non-blocking’. Artinya, JavaScript tidak akan menunggu perintah selesai sebelum pindah ke perintah berikutnya. Ini adalah inti dari async JavaScript.

Event Loop

Event Loop adalah konsep di mana JavaScript dapat melakukan tugas-tugas secara asynchronous. Singkatnya, Event Loop memungkinkan JavaScript untuk bersifat non-blocking dengan mengatur urutan eksekusi tugas-tugas, penjadwalan tugas yang harus dikerjakan di masa depan, dan memungkinkan tugas lain berjalan di antara waktu penjadwalan dan waktu eksekusi.

Fungsi Asynchronous di JavaScript

Di JavaScript, ada tiga jenis fungsi asynchronous, yakni Callback, Promises, dan Async/Await.

Callback

Callback adalah fungsi yang ditambahkan sebagai argumen dalam fungsi lain. Callback digunakan saat sebuah fungsi butuh waktu untuk menghasilkan output dan output tersebut diperlukan untuk operasi lebih lanjut.

Berikut adalah contoh penggunaan Callback:

function download(callback) {
    setTimeout(() => {
        console.log("Download selesai.");
        callback();
    }, 3000);
}

download(() => {
    console.log("Pemrosesan setelah download.");
});

Promises

Promises adalah objek yang mewakili hasil akhir dari operasi asynchronous. Secara umum, promise adalah penjamin tentang penyelesaian atau penolakan operasi asynchronous di masa depan.

Berikut adalah contoh penggunaan Promises:

let janji = new Promise(function(resolve, reject) {
    let val = false;

    if (val) {
        resolve("Janji ditepati!");
    } else {
        reject("Janji dibatalkan.");
    }
});

janji.then(
  value => console.log(value),
  reason => console.log(reason)
);

Async/Await

Async/Await memungkinkan kamu untuk menulis kode asynchronous yang tampak seperti kode synchronous. Itu adalah cara yang lebih bersih dan lebih mudah dipahami untuk bekerja dengan operasi asynchronous.

Berikut adalah contoh penggunaan Async/Await:

async function getData() {
  let response = await fetch('https://api.example.com/data');
  let data = await response.json();
  console.log(data);
}

getData();

Dengan memahami Async JavaScript, kamu bisa lebih efektif dalam menulis dan memahami kode JavaScript. Ilmu ini khususnya akan sangat berguna saat bekerja dengan operasi I/O, seperti operasi jaringan dan database di mana waktu tanggapan dikendalikan oleh faktor-faktor di luar kendali JavaScript.

👈🏼 Function Bind
Promise 👉🏼