Asynchronous JavaScript: Callback, Promise, dan Async Await

Hampir semua aplikasi web hari ini bekerja dengan proses yang berjalan di belakang layar—mulai dari mengambil data API, membaca file, menjalankan timer, mengirim request ke server, hingga menunggu respons yang tidak tahu kapan selesai. Jika kita tidak memahami cara kerja asynchronous JavaScript, kode akan mudah berantakan, sulit dirawat, dan rawan error.

Di dalam artikel ini, kita akan membahas tuntas tentang callback, promise, hingga async/await—tiga pilar utama dalam menangani operasi asynchronous JavaScript. Penjelasan dibuat dengan gaya santai namun mendetail, lengkap dengan contoh kode yang mudah dipahami pemula. Kita juga akan mempelajari bagaimana event loop bekerja, apa itu single-threaded dan non-blocking, bagaimana mengatasi callback hell, membuat chaining promise, sampai best practice asynchronous programming JavaScript di dunia nyata.

Siapkan kopi, mari belajar hal yang paling penting dalam JavaScript modern.

Baca juga: Tutorial Fetch API JavaScript: Mengambil Data dari Server

Dasar Asynchronous JavaScript & Event Loop

Asynchronous JavaScript adalah salah satu konsep terpenting yang harus dipahami oleh setiap developer front-end maupun back-end. Secara sederhana, asynchronous JavaScript memungkinkan kode berjalan tanpa harus menunggu proses lain selesai. Artinya, JavaScript tetap bisa mengeksekusi perintah-perintah lain sementara sebuah operasi yang memakan waktu (seperti mengambil data API, membaca file, atau proses jaringan) sedang berjalan di belakang layar. Inilah alasan mengapa topik seperti callback, Promise, dan async await JavaScript menjadi fundamental dalam pengembangan web modern.

JavaScript Bersifat Single-Threaded & Non-Blocking

JavaScript adalah single-threaded, artinya hanya punya satu jalur eksekusi dalam call stack. Dengan logika sederhana, kalau JavaScript menjalankan satu tugas berat—misalnya mengambil data dari server—maka seharusnya seluruh halaman “macet” menunggu respons. Tetapi kenyataannya tidak begitu.

Javascript menerapkan konsep non-blocking, sehingga ia tidak berhenti mengeksekusi tugas lain meskipun ada proses yang belum selesai. Inilah awal dari pentingnya mekanisme asynchronous.

Event Loop & Task Queue: Mesin di Balik Asynchronous

Untuk menjalankan asynchronous, JavaScript mengandalkan mekanisme yang sangat terkenal: Event Loop.

Konsepnya:

• Kode dijalankan di call stack.
• Ketika ada proses asynchronous (misalnya setTimeout, fetch, atau event listener), tugas tersebut diserahkan ke Web API.
• Ketika proses asynchronous selesai, Web API mengirimkan callback atau Promise ke task queue atau microtask queue.
• Event loop akan memindahkan tugas tersebut kembali ke call stack untuk dieksekusi ketika stack kosong.

Proses ini membuat aplikasi tetap responsif tanpa harus diblokir oleh operasi berat.

Peran Web API / Runtime dalam Asynchronous

JavaScript murni sebenarnya tidak memiliki kemampuan asynchronous. Kemampuan tersebut tersedia berkat lingkungan tempat JavaScript dijalankan:

• Browser (Web API) seperti DOM events, AJAX, timer, fetch
• Node.js runtime seperti filesystem (fs), networks, process events

Web API inilah yang mengerjakan operasi asynchronous secara paralel, lalu mengembalikan hasilnya ke JavaScript.

Jadi ketika kamu memanggil fetch(), sebenarnya browser lah yang menjalankan permintaan HTTP-nya. JavaScript hanya menunggu hasilnya di task queue.

Kenapa Asynchronous Sangat Penting di Aplikasi Modern

Aplikasi modern sangat bergantung pada data real-time, interaktivitas tinggi, dan efisiensi performa. Hampir semua proses penting membutuhkan mekanisme asynchronous:

• Mengambil data dari REST API (fetch)
• Mengupload file
• Proses autentikasi/login
• Komunikasi WebSocket real-time
• Timer, animasi, dan event UI
• Membaca file dengan FileReader API

Tanpa asynchronous JavaScript, aplikasi web akan lambat, freeze, tidak responsif, dan tidak mampu menangani permintaan modern.

Callback di JavaScript

Callback adalah konsep paling dasar dalam asynchronous JavaScript. Sebelum adanya Promise dan async await, callback adalah satu-satunya cara untuk menjalankan kode setelah proses asynchronous selesai. Memahami callback bukan hanya penting untuk dasar JavaScript, tetapi juga membantu memahami bagaimana Promise dan async/await bekerja di belakang layar.

Pengertian Callback

Callback adalah fungsi yang dikirim sebagai argumen ke fungsi lain, lalu fungsi tersebut dipanggil setelah proses tertentu selesai.

Contoh sederhananya:

function sayHello(name, callback) {
    console.log("Hello " + name);
    callback();
}

sayHello("Aris", function () {
    console.log("Callback dijalankan!");
});Code language: JavaScript (javascript)

Callback memberi tahu JavaScript:

“Hei, setelah kamu selesai melakukan tugas ini, jalankan fungsi berikutnya ya.”

Callback sangat umum digunakan dalam operasi asynchronous seperti timer, AJAX/fetch (sebelum Promise), dan event.

Callback Synchronous vs Asynchronous

Tidak semua callback bersifat asynchronous.

1. Callback Synchronous

Callback synchronous berjalan langsung ketika fungsi dipanggil.

Contoh:

[1, 2, 3].forEach(function (num) {
    console.log(num);
});Code language: JavaScript (javascript)

Ini dieksekusi secara langsung tanpa menunggu proses apa pun.

2. Callback Asynchronous

Callback asynchronous berjalan setelah proses tertentu selesai, biasanya karena menunggu:

• Respon server
• Event user
• Timer
• Operasi Web API lainnya

Contoh:

setTimeout(function() {
    console.log("Ini callback asynchronous");
}, 1000);Code language: JavaScript (javascript)

Callback baru dipanggil setelah 1 detik—ini adalah asynchronous.

Contoh Penggunaan Callback

Callback banyak digunakan untuk operasi yang membutuhkan waktu.

Simulasi mengambil data server tanpa Promise

function getData(callback) {
    setTimeout(() => {
        callback("Data berhasil diambil!");
    }, 1500);
}

getData(function(result) {
    console.log(result);
});Code language: JavaScript (javascript)

Output muncul setelah 1.5 detik—callback digunakan untuk mengeksekusi kode setelah data “datang”.

Callback Hell: Masalah & Penyebabnya

Ketika banyak callback bergantung satu sama lain secara berurutan, struktur kode akan terlihat seperti “piramida neraka”, disebut callback hell.

Contoh sederhananya:

getUser(function(user) {
    getPosts(user.id, function(posts) {
        getComments(posts[0].id, function(comments) {
            console.log(comments);
        });
    });
});Code language: JavaScript (javascript)

Ciri-ciri callback hell:

• Kode makin masuk ke dalam (nested)
• Sulit dibaca dan di-maintain
• Sulit melakukan error handling
• Alur eksekusi sulit dipahami

Callback hell sering muncul saat menangani banyak proses asynchronous berurutan.

Cara Menghindari Callback Hell

Berikut solusi untuk menghindari callback hell:

1. Pecah fungsi menjadi lebih kecil

Jangan masukkan semua fungsi ke dalam satu callback besar.

2. Gunakan Named Callback

Daripada anonymous callback, gunakan fungsi yang diberi nama:

function handleComments(comments) { ... }Code language: JavaScript (javascript)

3. Gunakan Promise

Promise membuat chaining lebih rapi dan bisa menghindari nested callback berlapis.

4. Gunakan Async/Await

Cara modern yang paling mudah dibaca, seperti kode synchronous.

Contoh callback hell → async/await.

Callback hell:

getA((a) => {
    getB(a, (b) => {
        getC(b, (c) => {
            console.log(c);
        });
    });
});Code language: JavaScript (javascript)

Dengan async/await:

async function run() {
    const a = await getA();
    const b = await getB(a);
    const c = await getC(b);
    console.log(c);
}Code language: JavaScript (javascript)

Jauh lebih gampang dibaca, bukan?

Promise di JavaScript

Promise adalah objek di JavaScript yang merepresentasikan sebuah operasi asynchronous yang akan selesai pada masa depan (future). Promise memberi cara yang lebih bersih untuk menangani proses async dibanding callback biasa. Promise dapat berada pada tiga keadaan (state) dan memberikan nilai (value) ketika berhasil atau error ketika gagal.

Promise digunakan untuk operasi seperti:

• Mengambil data dari server (API)
• Membaca file
• Timer
• Proses asinkron lainnya

Sintaks dasar:

let myPromise = new Promise((resolve, reject) => {
    // proses asynchronous
    if (berhasil) {
        resolve("Sukses");
    } else {
        reject("Error");
    }
});Code language: JavaScript (javascript)

States pada Promise

Promise memiliki tiga state utama:

1. pending

• Promise sedang berjalan.
• Belum menghasilkan nilai.

2. fulfilled

• Operation selesai dengan berhasil.
• Memanggil resolve().

3. rejected

• Operation gagal.
• Memanggil reject().

Ilustrasi mudah:

pending → (success) → fulfilled
pending → (error)   → rejected

then(), catch(), finally()

Method ini digunakan untuk menangani hasil dari Promise.

then()

Digunakan untuk menangani hasil sukses (fulfilled).

myPromise.then((result) => console.log(result));Code language: JavaScript (javascript)

catch()

Digunakan untuk menangani error (rejected).

myPromise.catch((error) => console.log(error));Code language: JavaScript (javascript)

finally()

Dieksekusi selalu, baik sukses maupun gagal.

myPromise.finally(() => console.log("Selesai"));Code language: JavaScript (javascript)

Contoh lengkap:

myPromise
  .then(result => console.log(result))
  .catch(err => console.error(err))
  .finally(() => console.log("Done"));Code language: JavaScript (javascript)

Promise Chaining

Promise bisa disambungkan (di-chain) agar proses async berjalan berurutan secara rapi.

Contoh sebelum (callback hell):

getData(function(a) {
  getMore(a, function(b) {
    process(b, function(c) {
      console.log(c);
    });
  });
});Code language: JavaScript (javascript)

Dengan Promise:

getData()
  .then(a => getMore(a))
  .then(b => process(b))
  .then(c => console.log(c))
  .catch(err => console.error(err));Code language: JavaScript (javascript)

Keuntungan chaining:

• Kode lebih rapih
• Alur lebih mudah dibaca
• Error handling lebih mudah (cukup satu catch())

Promise.all, Promise.race, Promise.any

Utility function yang sering digunakan untuk menjalankan banyak async sekaligus.

Promise.all()

Menunggu semua promise selesai (harus fulfilled semua).

Jika salah satu gagal → langsung rejected.

Promise.all([p1, p2, p3]).then(result => console.log(result));Code language: JavaScript (javascript)

Promise.race()

Mengembalikan promise pertama yang selesai (fulfilled atau rejected).

Promise.race([p1, p2]).then(result => console.log(result));Code language: JavaScript (javascript)

Promise.any()

Mengembalikan promise pertama yang fulfilled. Kalau semuanya rejected → menghasilkan AggregateError.

Promise.any([p1, p2]).then(result => console.log(result));Code language: JavaScript (javascript)

Menghindari Callback Hell dengan Promise

Callback hell terjadi saat callback bersarang terlalu banyak.

Contoh callback hell:

login(user, pass, function(data) {
  getUser(data.id, function(user) {
    getPosts(user.id, function(posts) {
      console.log(posts);
    });
  });
});Code language: JavaScript (javascript)

Solusi dengan Promise:

login(user, pass)
  .then(data => getUser(data.id))
  .then(user => getPosts(user.id))
  .then(posts => console.log(posts))
  .catch(err => console.error(err));Code language: JavaScript (javascript)

Keuntungan:

• Struktur linear (atas ke bawah)
• Logika mudah diikuti
• Error handling lebih sederhana
• Bisa digabung dengan async/await (lebih clean lagi)

Async/Await

1. Pengertian async/await

Async/Await adalah fitur JavaScript yang dibangun di atas Promise, yang memungkinkan penulisan kode asynchronous terlihat seperti synchronous.

Tujuannya adalah membuat proses async lebih mudah dibaca, ditulis, dan dipahami.

async dipakai untuk menandai bahwa sebuah fungsi akan mengembalikan Promise.

await digunakan untuk menunggu Promise hingga selesai sebelum melanjutkan eksekusi.

Contoh:

async function getData() {
    const result = await fetch(url);
    return result;
}Code language: JavaScript (javascript)

Async/await tidak menggantikan Promise, justru bekerja di atas Promise dengan sintaks yang lebih bersih.

2. Kenapa async/await lebih mudah dibaca

Dengan Promise chaining, jika ada banyak langkah, kode bisa panjang:

getUser()
    .then(user => getPosts(user.id))
    .then(posts => filterPosts(posts))
    .then(filtered => console.log(filtered))
    .catch(err => console.error(err));Code language: JavaScript (javascript)

Dengan async/await menjadi:

async function process() {
    const user = await getUser();
    const posts = await getPosts(user.id);
    const filtered = await filterPosts(posts);
    console.log(filtered);
}Code language: JavaScript (javascript)

Kelebihan async/await:

• Alurnya mengalir seperti kode synchronous
• Error handling lebih rapi pakai try/catch
• Lebih mudah dibaca pada proses multi-step
• Lebih bersih dan lebih sedikit nesting

3. Contoh dasar async/await

Contoh sederhana menunggu Promise selesai:

function helloPromise() {
  return new Promise(resolve => {
    setTimeout(() => resolve("Hello World"), 1000);
  });
}

async function run() {
  console.log("Menunggu...");
  const result = await helloPromise();
  console.log(result);
}

run();Code language: JavaScript (javascript)

Output:

Menunggu...
Hello World

Perhatikan:

• await hanya bisa dipakai di dalam fungsi async
• Tanpa await, eksekusi tidak akan menunggu

4. Error Handling dengan try/catch

Async/await membuat penanganan error lebih natural.

Sebelum (Promise)

getData()
    .then(result => console.log(result))
    .catch(err => console.error(err));Code language: JavaScript (javascript)

Dengan async/await

async function fetchData() {
  try {
    const result = await getData();
    console.log(result);
  } catch (error) {
    console.error("Terjadi error:", error);
  }
}Code language: JavaScript (javascript)

Keuntungan:

• Lebih mudah untuk meng-handle error pada beberapa langkah
• Lebih clean pada kasus kompleks

5. Promise + async/await kombinasi

Karena async/await dibangun di atas Promise, kamu tetap bisa menggabungkannya.

Menunggu beberapa Promise sekaligus dengan Promise.all + await

async function loadData() {
  const [user, posts, comments] = await Promise.all([
    getUser(),
    getPosts(),
    getComments()
  ]);

  console.log(user, posts, comments);
}Code language: JavaScript (javascript)

Menggabungkan await + then (opsional)

Biasanya tidak dianjurkan, tapi bisa:

async function run() {
  const data = await fetch(url).then(res => res.json());
  console.log(data);
}Code language: JavaScript (javascript)

Kombinasi ini tetap valid selama kamu memahami alurnya.

6. Studi Kasus: Async/Await Mengambil Data API

Contoh paling umum adalah fetch data dari API.

Contoh mengambil data dari JSONPlaceholder

async function getUsers() {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/users");

    if (!response.ok) {
      throw new Error("Gagal mengambil data");
    }

    const users = await response.json();
    console.log(users);
  } catch (error) {
    console.error("Error:", error.message);
  } finally {
    console.log("Selesai mengambil data API");
  }
}

getUsers();Code language: JavaScript (javascript)

Penjelasan:

• fetch() mengembalikan Promise
• await menunggu hingga ada response
• response.json() juga asynchronous → harus di-await
• try/catch untuk penanganan error yang lebih rapi
• finally tetap dijalankan meskipun error

Event Loop & Cara Kerja Asynchronous Secara Internal

JavaScript adalah single-threaded, artinya hanya dapat menjalankan satu instruksi pada satu waktu. Tetapi JavaScript bisa menangani proses asynchronous (timer, AJAX, Promise) melalui mekanisme internal yang disebut Event Loop.

Untuk memahami cara kerja asynchronous, kita perlu memahami beberapa komponen utama:

1. Call Stack

Call Stack adalah tempat JavaScript menjalankan fungsi satu per satu.

Karakteristik:

• Menggunakan prinsip LIFO (Last In, First Out).
• Fungsi yang sedang berjalan ada di posisi paling atas stack.
• Jika stack penuh (terlalu banyak tugas), bisa menyebabkan Stack Overflow.

Contoh sederhana:

function a() {
    b();
}

function b() {
    console.log("Hello");
}

a();Code language: JavaScript (javascript)

Urutan call stack:

push a
push b
console.log()
pop b
pop aCode language: JavaScript (javascript)

Call stack hanya menjalankan kode synchronous, bukan asynchronous seperti setTimeout.

2. Web API

Browser menyediakan Web API untuk menangani perintah asynchronous di luar call stack.

Contoh Web API:

• setTimeout
• fetch
• DOM events
• Promise (handled di microtask, bukan queue biasa)
• AJAX (XMLHttpRequest)

Web API bertugas:

1. Menjalankan proses async tanpa mengganggu call stack.
2. Mengirim callback ke callback queue atau microtask queue saat selesai.

Contoh:

setTimeout(() => console.log("Timeout"), 1000);Code language: JavaScript (javascript)

setTimeout tidak berjalan di call stack. Browser menyimpannya di Web API dan menunggu 1 detik.

3. Callback Queue (Task Queue / Macrotask Queue)

Callback Queue adalah tempat antrian callback asynchronous macrotask yang siap dieksekusi setelah call stack kosong.

Yang masuk ke Callback Queue:

• setTimeout
• setInterval
• Event handler (klik, keypress, dll)
• AJAX callback (XHR)
• I/O

Callback queue menunggu giliran sampai event loop memindahkannya ke call stack.

4. Microtask Queue (Promise)

Microtask Queue berisi tugas-tugas prioritas tinggi.

Yang masuk ke Microtask Queue:

• Promise.then()
• Promise.catch()
• async/await resolution
• MutationObserver

Microtask akan selalu dieksekusi lebih dulu dibanding macrotask.

5. Perbedaan Macrotask & Microtask

Macrotask (Callback Queue):

• Dibuat oleh: setTimeout, setInterval, I/O, DOM events
• Diproses setelah call stack kosong
• Dieksekusi setelah semua microtask selesai

Microtask (Microtask Queue):

• Dibuat oleh: Promise, async/await
• Memiliki prioritas tertinggi
• Setelah satu task dipindahkan ke call stack, semua microtask dijalankan dulu sebelum lanjut ke macrotask berikutnya

Prioritas:

Call Stack → Microtask Queue → Macrotask Queue

6. Ilustrasi Proses Asynchronous

Mari lihat contoh berikut:

console.log("Start");

setTimeout(() => {
    console.log("Timeout");
}, 0);

Promise.resolve().then(() => {
    console.log("Promise");
});

console.log("End");Code language: JavaScript (javascript)

Urutan eksekusi sebenarnya:

1. “Start” → langsung dieksekusi (synchronous)
2. setTimeout(..., 0) → dikirim ke Web API → ke macrotask queue
3. Promise.then() → langsung ke microtask queue
4. “End” → dieksekusi
5. Call stack kosong → Jalankan semua microtask dulu
   • Output: “Promise”
6. Microtask selesai → jalankan macrotask berikutnya
   • Output: “Timeout”

Output:

Start
End
Promise
TimeoutCode language: JavaScript (javascript)

Event Loop terus berputar:

1. Mengecek call stack
2. Jika kosong → jalankan semua microtask
3. Jika microtask kosong → ambil macrotask pertama
4. Ulangi terus

Perbandingan Callback vs Promise vs Async/Await

Asynchronous JavaScript memiliki tiga teknik utama untuk menangani proses yang selesai di masa depan: Callback, Promise, dan Async/Await.

Masing-masing memiliki kelebihan dan kekurangan, dan cocok digunakan pada kondisi tertentu.

1. Tabel Perbandingan Callback vs Promise vs Async/Await

Aspek	Callback	Promise	Async/Await
Cara kerja	Menggunakan fungsi yang diberikan sebagai argumen	Mengembalikan objek Promise dengan resolve/reject	Built-in di atas Promise, memakai async & await
Readability	Sering sulit dibaca (callback hell)	Lebih rapi dengan chaining	Paling mudah dibaca, seperti kode synchronous
Error handling	Sulit, harus ditangani di setiap fungsi	Menggunakan .catch()	Sangat mudah dengan try/catch
Kompleksitas	Tinggi jika proses berantai	Menengah	Rendah
Debugging	Sulit karena nested	Lebih mudah dibanding callback	Sangat mudah
Paralel task	Sulit dilakukan	Mudah dengan Promise.all	Bisa digabung await Promise.all()
Pemahaman pemula	Mudah dipahami awalnya, tapi cepat rumit	Perlu belajar state & chaining	Butuh dasar Promise, tapi sintaks paling bersih
Support	Sudah lama ada	Modern (ES6)	Modern (ES2017)
Kapan digunakan	API lama, event handler	Sebagian besar kasus async	Penulisan kode modern yang kompleks
Resiko umum	Callback hell	Multiple chaining panjang	Blocking async berurutan tanpa perlu

2. Kapan Menggunakan Masing-Masing

1. Callback

Gunakan ketika:

• Berurusan dengan API lama (misalnya Node.js versi lama atau library lama)
• Event listener (click, scroll, input) → secara alami callback
• Proses sederhana tanpa chaining panjang

Contoh cocok untuk callback:

button.addEventListener("click", () => console.log("Clicked"));Code language: JavaScript (javascript)

Hindari callback jika proses memerlukan langkah-langkah berurutan, karena rawan callback hell.

2. Promise

Gunakan ketika:

• Membutuhkan kontrol lebih pada asynchronous
• Perlu menjalankan banyak async paralel (Promise.all)
• Kode tidak terlalu panjang tetapi butuh chaining

Cocok untuk:

• Fetch API
• Timeout/timer kompleks
• Paralel request API

Contoh:

fetch(url)
    .then(res => res.json())
    .then(data => console.log(data))
    .catch(err => console.error(err));Code language: JavaScript (javascript)

3. Async/Await

Gunakan ketika:

• Proses async cukup panjang dan berurutan
• Butuh kode yang mudah dibaca dan mirip synchronous
• Proyek modern (best practice masa kini)
• Banyak error-handling → jauh lebih mudah dengan try/catch

Cocok untuk:

• API call berantai
• Proses step-by-step
• Kode yang kompleks (karena paling readable)

Contoh:

async function load() {
    try {
        const res = await fetch(url);
        const data = await res.json();
        console.log(data);
    } catch (err) {
        console.error(err);
    }
}Code language: JavaScript (javascript)

Kesimpulan

Asynchronous JavaScript adalah dasar penting dalam pengembangan web modern. Dengan memahami callback, Promise, dan async/await, kamu dapat menulis kode yang lebih rapi, mudah di-debug, serta efisien dalam menangani proses yang berjalan di latar belakang. Event Loop, Web API, Microtask Queue, dan Macrotask Queue memberikan gambaran bagaimana JavaScript bekerja secara internal meskipun bersifat single-threaded.

Dengan menguasai teknik-teknik ini:

• Kamu bisa menghindari callback hell
• Menulis alur asynchronous lebih jelas dengan Promise
• Membuat proses berantai dan kompleks lebih sederhana dengan async/await
• Mengoptimalkan kinerja aplikasi yang memerlukan banyak request API

Asynchronous bukan lagi sulit dipahami ketika kamu memahami mekanisme internalnya.