📚 Seri Belajar Javascript — Artikel 11 dari 14

Asynchronous JavaScript:
Callback, Promise, dan async/await

Kenapa JavaScript bisa melakukan banyak hal sekaligus tanpa stuck? Semua rahasianya ada di sini — dari callback jadul sampai async/await modern yang bikin kode kamu jauh lebih bersih.

#JavaScript #AsyncAwait #Promise #Callback #Tutorial

⏱️

Estimasi Baca

12 Menit

🎯

Level

Pemula → Menengah

📅

Tahun

2026

Pernah nggak kamu pesan makanan di GoFood, lalu sambil nunggu kamu tetap bisa scrolling Instagram, balas chat, atau dengerin musik? Itulah gambaran paling pas dari asynchronous JavaScript. JavaScript tidak berdiam diri menunggu satu tugas selesai — ia terus berjalan, mengerjakan hal lain, lalu balik lagi saat hasilnya sudah siap.

Di artikel ke-11 Seri Belajar Javascript ini, kamu akan belajar tiga cara JavaScript menangani operasi async: dari Callback yang klasik (tapi kadang bikin pusing), Promise yang lebih elegan, hingga async/await — sintaks modern yang bikin kode async kamu seolah-olah berjalan secara sinkron. Kalau kamu mau bisa fetch data dari API atau bikin web yang responsif, topik ini wajib banget dikuasai!

📐 Formula Konsep

Apa Itu Asynchronous JavaScript?

Asynchronous berarti JavaScript bisa menjalankan tugas yang membutuhkan waktu (seperti ambil data dari server, baca file, atau timer) tanpa memblokir eksekusi kode lainnya. Kode selanjutnya tetap berjalan, dan hasilnya akan diproses ketika sudah tersedia. Kebalikannya, Synchronous berarti kode dijalankan satu per satu — baris kedua nunggu baris pertama selesai dulu.

1. Callback — Si Pelopor Asynchronous JavaScript

Bayangkan kamu minta tolong temanmu beli kopi. Kamu bilang: "Kalau udah beli, tolong SMS aku ya." Nah, fungsi yang kamu minta temanmu jalankan setelah tugasnya selesai — itulah callback. Sebuah fungsi yang dikirim sebagai argumen ke fungsi lain, dan akan dipanggil ketika suatu proses selesai.

Callback adalah cara paling awal JavaScript menangani async. Fungsi bawaan seperti setTimeout dan addEventListener semuanya bekerja dengan callback.

🔢 Cara Kerja Callback — Step by Step

Definisikan fungsi utama

Buat fungsi yang menerima parameter berupa fungsi lain (callback). Fungsi ini akan mengerjakan sesuatu, lalu memanggil callback di akhir.

Berikan fungsi callback sebagai argumen

Saat memanggil fungsi utama, kirimkan fungsi lain sebagai argumen. Fungsi tersebutlah yang akan dieksekusi setelah proses async selesai.

JavaScript menjalankan kode berikutnya

Selagi menunggu proses async (misalnya timer atau fetch data), JavaScript tidak berdiam diri — ia terus mengeksekusi baris kode berikutnya.

Callback dipanggil saat selesai

Setelah proses async rampung, callback dipanggil dengan hasilnya — misalnya data yang baru didapat dari server.

📄 callback-contoh.js

function pesanKopi(namaKopi, callback) {
  console.log(`Sedang membuat ${namaKopi}...`);

  // Simulasi proses 2 detik
  setTimeout(function() {
    const kopi = { nama: namaKopi, siap: true };
    callback(kopi); // callback dipanggil saat selesai
  }, 2000);
}

pesanKopi("Americano", function(hasil) {
  console.log(`✅ Kopi ${hasil.nama} sudah siap!`);
});

// Ini tetap jalan SEBELUM kopi selesai:
console.log("Sambil nunggu, baca artikel dulu... 📰");

⚠️ Perhatian: Callback Hell

Saat kamu butuh banyak operasi async secara berurutan, callback bisa membentuk piramida yang sangat dalam — disebut "Callback Hell". Kode jadi susah dibaca, susah di-debug, dan bikin programmer menangis 😭. Inilah alasan utama mengapa Promise diciptakan!

2. Promise — Janji yang Lebih Bisa Dipegang dalam Asynchronous JavaScript

Bayangkan kamu pesan tiket konser online. Sistemnya memberimu tanda terima — sebuah "janji" bahwa tiket akan dikirim. Kamu tidak perlu berdiri di depan komputer terus-menerus. Janji itu punya tiga status: masih diproses, berhasil, atau gagal. Itulah persis cara kerja Promise di JavaScript!

Promise adalah objek yang merepresentasikan nilai yang mungkin belum tersedia sekarang, tapi akan tersedia di masa depan — atau gagal dengan alasan tertentu.

🔍 Tiga Status Promise

⏳

Pending

Masih dalam proses. Belum ada hasilnya.

✅

Fulfilled

Proses berhasil. Nilai tersedia via .then().

❌

Rejected

Proses gagal. Error ditangkap via .catch().

📄 promise-contoh.js

function pesanTiket(tersedia) {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      if (tersedia) {
        resolve("🎟️ Tiket berhasil dipesan!");
      } else {
        reject("😢 Maaf, tiket habis.");
      }
    }, 1500);
  });
}

pesanTiket(true)
  .then(function(pesan) {
    console.log(pesan); // "🎟️ Tiket berhasil dipesan!"
  })
  .catch(function(error) {
    console.log(error); // Hanya berjalan jika reject
  })
  .finally(function() {
    console.log("Proses selesai, apapun hasilnya.");
  });

💡 Tips: Promise Chaining

Kamu bisa merangkai banyak .then() secara berantai! Nilai yang di-return dari satu .then() akan otomatis menjadi input untuk .then() berikutnya. Ini cara terbaik menggantikan callback bersarang yang bikin pusing.

3. async/await — Cara Terbaik Menulis Asynchronous JavaScript

Kalau Promise sudah lebih bersih dari callback, async/await membuat kode async kamu terasa seperti kode biasa yang dibaca dari atas ke bawah — persis seperti cerita. Diperkenalkan di ES2017, async/await sebenarnya adalah "gula sintaks" di atas Promise. Di balik layar, keduanya bekerja dengan mekanisme yang sama.

Kata kunci async diletakkan sebelum deklarasi fungsi, menandakan fungsi tersebut akan mengembalikan Promise. Kata kunci await hanya bisa dipakai di dalam fungsi async, dan akan "menjeda" eksekusi fungsi (bukan keseluruhan program!) sampai Promise selesai.

🔢 Cara Pakai async/await

Tambahkan kata kunci async sebelum fungsi

Tulis async function namaFungsi() atau const namaFungsi = async () => {}. Fungsi ini otomatis membungkus return value-nya dalam Promise.

Gunakan await sebelum operasi async

Letakkan await sebelum Promise. Fungsi akan "pausesebentar" di sini, lalu melanjutkan saat Promise selesai — tapi sisa program tetap berjalan normal.

Tangkap error dengan try/catch

Gantikan .catch() dengan blok try { ... } catch(error) { ... }. Ini membuat penanganan error jadi lebih intuitif dan mudah dibaca.

📄 async-await-contoh.js

// Fungsi yang mengembalikan Promise
function ambilDataUser(id) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (id > 0) {
        resolve({ id, nama: "Budi", kota: "Malang" });
      } else {
        reject(new Error("ID tidak valid!"));
      }
    }, 1000);
  });
}

// Menggunakan async/await — jauh lebih bersih!
async function tampilkanProfil() {
  try {
    console.log("⏳ Mengambil data...");
    const user = await ambilDataUser(1);
    console.log(`✅ Halo, ${user.nama} dari ${user.kota}!`);
  } catch (error) {
    console.log(`❌ Error: ${error.message}`);
  }
}

tampilkanProfil();
console.log("📌 Baris ini tetap jalan duluan!");

⚡ Insight Penting

await hanya "menjeda" eksekusi di dalam fungsi async itu sendiri — bukan keseluruhan program! Kode di luar fungsi tersebut tetap berjalan normal. Inilah kenapa console.log di luar fungsi async akan selalu tampil lebih dulu.

🔥 Fakta Menarik

JavaScript sebenarnya single-threaded — artinya ia hanya bisa mengerjakan satu hal dalam satu waktu. Tapi berkat Event Loop dan Web APIs (yang disediakan browser), JavaScript mampu "mengirim" tugas berat ke luar, lalu mengambil hasilnya kembali saat sudah selesai. Itulah sihir di balik asynchronous JavaScript!

Callback vs Promise vs async/await — Mana yang Harus Kamu Pakai?

Sekarang kamu sudah kenal ketiga cara menulis kode asynchronous JavaScript. Tapi kapan harus pakai yang mana? Tabel berikut merangkum perbedaan utamanya:

Kriteria	Callback	Promise	async/await
Keterbacaan Kode	😵 Sulit (nested)	😊 Lebih Baik	😍 Terbaik
Penanganan Error	Manual & Rawan	.catch()	try/catch Intuitif
Dukungan Browser	Semua Browser	Modern Browser	Modern Browser
Rekomendasi Penggunaan	Event Listener	Promise.all()	⭐ Gunakan Ini!
Tahun Diperkenalkan	ES1 (Lama)	ES2015 (ES6)	ES2017 (Modern)

💡 Tips Pro

Untuk kode production modern, async/await selalu jadi pilihan utama. Namun tetap pahami Callback dan Promise, karena kamu akan sering menjumpainya di library dan kode orang lain. Selain itu, Promise.all() tetap berguna saat kamu ingin menjalankan beberapa operasi async secara paralel sekaligus!

🏁 Kesimpulan

Kamu Sekarang Paham Asynchronous JavaScript!

Di artikel ini kamu sudah belajar tiga pilar utama asynchronous JavaScript:

▸Callback — cara paling awal, bagus untuk event sederhana, tapi bisa bikin "callback hell" jika berlebihan.
▸Promise — lebih terstruktur, punya tiga status (pending, fulfilled, rejected), dan mendukung chaining dengan .then() dan .catch().
▸async/await — sintaks paling modern dan bersih, membuat kode async terasa seperti kode sinkron biasa, dengan penanganan error via try/catch.

Pemahaman async/await JavaScript adalah kunci untuk melanjutkan ke topik berikutnya: Fetch API — cara mengambil data nyata dari internet langsung ke halaman web kamu. Seru banget!

💬 Pertanyaan buat kamu: Mana yang lebih mudah kamu pahami — Promise atau async/await? Ceritakan pengalaman pertamamu belajar async JavaScript di kolom komentar ya! Dan kalau artikel ini bermanfaat, jangan lupa share ke teman yang lagi belajar JavaScript juga. 🙌

💬 Tulis Komentar 📢 Share Artikel

#JavaScript #AsyncAwait #Promise #Callback #AsynchronousJavaScript #BelajarJavascript #Tutorial

📚 Seri Lengkap