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.
Daftar isi
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:
- pending
- Promise sedang berjalan.
- Belum menghasilkan nilai.
- fulfilled
- Operation selesai dengan berhasil.
- Memanggil
resolve().
- rejected
- Operation gagal.
- Memanggil
reject().
Ilustrasi mudah:
pending → (success) → fulfilled
pending → (error) → rejectedthen(), 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 WorldPerhatikan:
- 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:
- Menjalankan proses async tanpa mengganggu call stack.
- 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:
setTimeoutsetInterval- 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 resolutionMutationObserver
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 Queue6. 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:
- “Start” → langsung dieksekusi (synchronous)
setTimeout(..., 0)→ dikirim ke Web API → ke macrotask queuePromise.then()→ langsung ke microtask queue- “End” → dieksekusi
- Call stack kosong → Jalankan semua microtask dulu
- Output: “Promise”
- Microtask selesai → jalankan macrotask berikutnya
- Output: “Timeout”
Output:
Start
End
Promise
TimeoutCode language: JavaScript (javascript)Event Loop terus berputar:
- Mengecek call stack
- Jika kosong → jalankan semua microtask
- Jika microtask kosong → ambil macrotask pertama
- 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.
