W3schools Javascript Async

W3schools Javascript Async

6 min read Jun 18, 2024
W3schools Javascript Async

Memahami Asynchronous JavaScript dengan w3schools

JavaScript, bahasa pemrograman web yang dinamis, memungkinkan website menjadi interaktif dan responsif. Namun, JavaScript secara default adalah bahasa synchronous, yang berarti kode dieksekusi baris demi baris secara berurutan. Hal ini bisa menjadi masalah ketika kode perlu menunggu operasi yang membutuhkan waktu lama, seperti mengambil data dari server atau memuat gambar. Untuk mengatasi masalah ini, JavaScript menyediakan fitur asynchronous yang memungkinkan kode untuk melanjutkan eksekusi tanpa menunggu operasi yang lama selesai.

Apa itu Asynchronous JavaScript?

Asynchronous JavaScript memungkinkan kode untuk menjalankan tugas lain sambil menunggu tugas lain selesai. Ini sangat berguna untuk operasi yang membutuhkan waktu lama, seperti:

  • Mengambil data dari server: Mengambil data dari server bisa memakan waktu lama, dan jika kode dieksekusi secara synchronous, browser akan "freeze" sampai data selesai dimuat. Dengan asynchronous JavaScript, kode dapat melanjutkan eksekusi dan melakukan tugas lain sambil menunggu data dimuat.
  • Memuat gambar: Memuat gambar juga membutuhkan waktu, dan jika kode dieksekusi secara synchronous, browser akan "freeze" sampai gambar selesai dimuat. Dengan asynchronous JavaScript, kode dapat melanjutkan eksekusi dan melakukan tugas lain sambil menunggu gambar dimuat.
  • Menangani event: Event seperti klik mouse atau penekanan tombol bisa terjadi kapan saja, dan jika kode dieksekusi secara synchronous, kode hanya akan menangani event setelah semua kode selesai dieksekusi. Dengan asynchronous JavaScript, kode dapat menangani event kapan saja, bahkan ketika kode lain sedang dieksekusi.

Contoh Asynchronous JavaScript

Berikut contoh sederhana asynchronous JavaScript menggunakan callback function:

function getData(callback) {
  setTimeout(function() {
    callback("Data berhasil diambil!");
  }, 2000);
}

getData(function(data) {
  console.log(data); // Output: "Data berhasil diambil!"
});

console.log("Kode ini akan dieksekusi sebelum data diambil."); // Output: "Kode ini akan dieksekusi sebelum data diambil."

Pada contoh ini, fungsi getData mengambil data dari server (dalam kasus ini, menggunakan setTimeout untuk mensimulasikan proses pengambilan data). Fungsi getData menerima callback function sebagai parameter. Callback function akan dieksekusi setelah data selesai diambil.

Penting: Kode yang berada di luar fungsi getData akan dieksekusi sebelum data diambil, karena kode tersebut bersifat synchronous.

Memahami Callback Function

Callback function adalah fungsi yang diberikan sebagai parameter ke fungsi lain, dan akan dijalankan setelah fungsi yang pertama selesai dijalankan. Callback function adalah cara umum untuk menangani operasi asynchronous dalam JavaScript.

Async/Await

Selain callback function, JavaScript juga menyediakan sintaks async/await yang lebih mudah dipahami dan digunakan untuk menangani operasi asynchronous.

async function getData() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve("Data berhasil diambil!");
    }, 2000);
  });
}

async function main() {
  const data = await getData();
  console.log(data); // Output: "Data berhasil diambil!"
  console.log("Kode ini akan dieksekusi setelah data diambil.");
}

main();

Kode ini menggunakan async/await untuk membuat operasi asynchronous lebih mudah dibaca dan ditulis. Dengan async/await, kode seolah-olah dieksekusi secara synchronous, tetapi di balik layar sebenarnya menggunakan Promise untuk menjalankan operasi secara asynchronous.

Penjelasan:

  1. async function getData(): Fungsi getData dideklarasikan sebagai fungsi async. Ini berarti fungsi tersebut dapat menggunakan await.
  2. return new Promise(...): Fungsi getData mengembalikan Promise yang mensimulasikan pengambilan data dari server.
  3. await getData(): Keyword await digunakan untuk menunggu Promise yang dikembalikan oleh fungsi getData() selesai. Setelah Promise selesai, nilai yang dikembalikan akan disimpan dalam variabel data.
  4. console.log(data);: Kode ini akan dieksekusi setelah data berhasil diambil dari server.

Kesimpulan

Asynchronous JavaScript adalah fitur penting yang memungkinkan website untuk menjadi lebih interaktif dan responsif. Dengan mempelajari asynchronous JavaScript, Anda dapat membuat website yang lebih baik dan lebih cepat. w3schools menyediakan sumber belajar yang komprehensif untuk memahami asynchronous JavaScript, mulai dari dasar hingga konsep yang lebih lanjut.