Saturday, April 18, 2026

javascript asynchronous

📚 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

JavaScript from Zero to Zorro

Panduan lengkap belajar JavaScript dari nol untuk pemula

Artikel 1

Kenalan dengan JavaScript: Cara Kerja & Script Pertamamu

Artikel 2

Variabel, Tipe Data, dan Operator

Artikel 3

Kontrol Alur: if, else, switch, dan Loop

Artikel 4

Fungsi JavaScript: Buat, Pakai, dan Sederhanakan

Artikel 5

Array dan Object: Simpan Banyak Data dengan Rapi

Artikel 6

DOM: Cara JavaScript Mengontrol Elemen HTML

Artikel 7

Event & Interaksi: Halaman Web yang Responsif

Artikel 8

Manipulasi Form: Ambil, Validasi & Tampilkan Data

Artikel 9

Manipulasi CSS: Animasi & Tampilan Dinamis

Artikel 10

localStorage & sessionStorage: Simpan Data di Browser

📍 Artikel 11 — Kamu Di Sini

Asynchronous JavaScript: Callback, Promise, async/await

Artikel 12

Fetch API & AJAX: Ambil Data dari Internet

Artikel 13

JavaScript Modular: Pisahkan Kode Besar

Artikel 14

Proyek Mini: Bangun Aplikasi Web dari Nol

📖 Lihat Daftar Isi Lengkap

JavaScript from Zero to Zorro →

📌 Seri Pendukung

Belum familiar HTML & CSS?

Sebelum belajar JavaScript, pastikan kamu sudah punya dasar HTML dan CSS. Cek seri artikel berikut:

🌐

Belajar HTML5

HTML5 from Zero to Zorro →

🎨

Belajar CSS

CSS from Zero to Zorro →

← Artikel Sebelumnya

Artikel 10

localStorage & sessionStorage: Simpan Data di Browser Tanpa Server

Artikel Selanjutnya →

Artikel 12

Fetch API & AJAX: Ambil Data dari Internet Langsung ke Halaman Web

javascript local storage session storage

Artikel 10 dari 14 🗄️ Web Storage JavaScript Beginner Friendly

🗃️

localStorage & sessionStorage

Simpan Data di Browser Tanpa Server

Pernah buka website, isi form panjang-panjang, terus salah klik dan semua data hilang? Nah, localStorage dan sessionStorage JavaScript hadir buat menyelamatkan pengalaman buruk itu — langsung dari browser, tanpa butuh server sama sekali.

⏱ 12 menit baca

📊 Level: Pemula

📅 2026

Bayangkan kamu pergi belanja ke supermarket, sudah susah payah memasukkan banyak barang ke keranjang, lalu tiba-tiba mati lampu. Begitu listrik menyala lagi — keranjangmu kosong. Frustrasi, kan?

Itulah yang terjadi di banyak website tanpa mekanisme penyimpanan data. Untungnya, JavaScript punya solusi elegan: localStorage dan sessionStorage — dua fitur Web Storage API yang memungkinkan kamu menyimpan data langsung di browser, tanpa perlu database atau server. Di artikel ke-10 dari Seri Belajar JavaScript from Zero to Zorro ini, kita akan bongkar tuntas cara kerja, perbedaan, dan implementasi praktisnya!

📐 Definisi Kunci

Web Storage API adalah mekanisme bawaan browser yang memungkinkan aplikasi web menyimpan pasangan key-value secara lokal di perangkat pengguna.

Ada dua jenisnya: localStorage (data permanen sampai dihapus manual) dan sessionStorage (data hilang begitu tab/browser ditutup). Keduanya mampu menyimpan hingga 5–10 MB data per origin.

🧠 Apa Itu localStorage dan sessionStorage JavaScript?

Anggap saja browser-mu punya dua jenis laci:

🗄️ localStorage = Laci permanen. Kamu simpan sesuatu, besok buka browser lagi, masih ada. Cocok buat preferensi pengguna, tema dark/light, atau data login ringan.
📋 sessionStorage = Laci sementara. Cuma aktif selama satu sesi (tab terbuka). Begitu kamu tutup tab — poof, hilang. Cocok buat wizard form multi-langkah atau data checkout sementara.

Keduanya menggunakan sintaks yang hampir identis — bedanya cuma nama objeknya. Inilah yang bikin Web Storage API sangat mudah dipelajari!

🔥

Fakta Menarik

Sebelum Web Storage API ada (2009), developer terpaksa menyimpan data kecil menggunakan cookies — yang punya limit hanya 4KB dan selalu dikirim ke server di setiap request. Bayangkan betapa borosnya bandwidth waktu itu!

📊 Tabel Perbandingan: localStorage vs sessionStorage vs Cookie

Fitur	localStorage	sessionStorage	Cookie
Kapasitas	5–10 MB	5–10 MB	~4 KB
Durasi	Permanen	Per sesi tab	Bisa diatur
Dikirim ke server	❌ Tidak	❌ Tidak	✅ Ya (setiap request)
Akses dari JS	✅ Mudah	✅ Mudah	⚠️ Lumayan
Keamanan	Rentan XSS	Rentan XSS	HttpOnly option

⚙️ Cara Menyimpan Data di Browser: Panduan Lengkap localStorage JavaScript

Web Storage API bekerja dengan sistem key-value — seperti kamus. Kamu simpan data dengan "nama" tertentu (key), dan nanti ambil lagi pakai nama yang sama. Sintaksnya super bersih dan intuitif.

4 Operasi Dasar Web Storage (CRUD)

Simpan Data — `setItem()`

Gunakan setItem(key, value) untuk menyimpan data. Ingat: value harus berupa string!

// localStorage — tersimpan permanen
localStorage.setItem('nama', 'Budi Santoso');
localStorage.setItem('tema', 'dark');

// sessionStorage — hanya selama tab terbuka
sessionStorage.setItem('langkahForm', '2');

// Menyimpan object? Gunakan JSON.stringify!
const user = { nama: 'Budi', umur: 25, kota: 'Jakarta' };
localStorage.setItem('userData', JSON.stringify(user));

Ambil Data — `getItem()`

Gunakan getItem(key) untuk mengambil data. Jika key tidak ada, hasilnya null.

const nama = localStorage.getItem('nama');
console.log(nama); // Output: "Budi Santoso"

// Mengambil object — gunakan JSON.parse()
const userRaw = localStorage.getItem('userData');
const user = JSON.parse(userRaw);
console.log(user.nama); // Output: "Budi"
console.log(user.kota); // Output: "Jakarta"

Hapus Data — `removeItem()` & `clear()`

// Hapus satu item saja
localStorage.removeItem('nama');

// Hapus SEMUA data localStorage (hati-hati!)
localStorage.clear();

Cek Jumlah Item — `.length`

console.log(localStorage.length); // Total item tersimpan
// Iterasi semua key
for (let i = 0; i < localStorage.length; i++) {
  const key = localStorage.key(i);
  console.log(key, localStorage.getItem(key));
}

💡

Tips Penting

Web Storage hanya bisa menyimpan string. Untuk menyimpan array atau object, kamu wajib menggunakan JSON.stringify() saat menyimpan dan JSON.parse() saat mengambilnya. Ini adalah pola yang paling sering dipakai dalam dunia nyata!

🛠️ Proyek Mini: To-Do List dengan localStorage JavaScript

Teori tanpa praktik itu membosankan. Yuk langsung bangun aplikasi To-Do List sederhana yang datanya tetap tersimpan walau browser di-refresh! Inilah keajaiban localStorage untuk menyimpan data di browser secara nyata.

📄 index.html

<div id="app">
  <h1>📝 To-Do List</h1>
  <input type="text" id="inputTodo" placeholder="Tambah tugas baru...">
  <button onclick="tambahTodo()">Tambah</button>
  <ul id="listTodo"></ul>
</div>

⚡ script.js

// Ambil data saat halaman pertama kali dibuka
let todos = JSON.parse(localStorage.getItem('todos')) || [];

function tampilkanTodo() {
  const list = document.getElementById('listTodo');
  list.innerHTML = '';
  todos.forEach((todo, index) => {
    list.innerHTML += `<li>
      ${todo} 
      <button onclick="hapusTodo(${index})">❌</button>
    </li>`;
  });
}

function tambahTodo() {
  const input = document.getElementById('inputTodo');
  if (!input.value.trim()) return;
  
  todos.push(input.value.trim());
  localStorage.setItem('todos', JSON.stringify(todos)); // Simpan!
  input.value = '';
  tampilkanTodo();
}

function hapusTodo(index) {
  todos.splice(index, 1);
  localStorage.setItem('todos', JSON.stringify(todos)); // Update!
  tampilkanTodo();
}

// Jalankan saat halaman dimuat
tampilkanTodo();

⚡

Insight Penting

Perhatikan pola ambil → modifikasi → simpan? Itu adalah workflow standar localStorage dalam aplikasi nyata. Kamu tidak bisa langsung "push" ke localStorage — kamu harus ambil array-nya dulu, modifikasi, lalu simpan ulang sebagai string JSON.

🎯 Kapan Menggunakan localStorage vs sessionStorage untuk Menyimpan Data Browser?

Memilih antara keduanya bukan soal mana yang lebih "canggih" — tapi soal kebutuhan datanya. Gunakan analogi ini:

🗺️ Panduan Memilih Storage yang Tepat

🗄️

Pilih localStorage

Preferensi tema (dark/light mode)
Bahasa pilihan pengguna
History pencarian
Data onboarding / tutorial
Bookmark atau favorit

📋

Pilih sessionStorage

Data form multi-langkah
Status langkah wizard checkout
Filter sementara halaman
Data autentikasi sesi
Undo/redo sementara

⚠️

Perhatian!

Jangan simpan data sensitif seperti password, token autentikasi penting, atau informasi kartu kredit di localStorage/sessionStorage! Keduanya rentan terhadap serangan XSS (Cross-Site Scripting). Untuk data sensitif, gunakan cookie dengan flag HttpOnly dan Secure, atau simpan di server.

💡

Tips Debugging

Mau lihat isi localStorage langsung? Buka DevTools browser (F12) → tab Application → lihat bagian Storage → Local Storage. Di sana kamu bisa melihat, mengedit, bahkan menghapus data secara manual. Fitur wajib untuk debugging!

#localStorage #sessionStorage #JavaScript #WebStorage #BelajarJavaScript #Tutorial

🎯

Kesimpulan: Kuasai Web Storage, Buat Aplikasi yang Lebih Pintar

Hari ini kamu sudah mempelajari dua senjata rahasia JavaScript untuk menyimpan data di browser tanpa server:

localStorage — untuk data yang perlu bertahan permanen (preferensi, tema, bookmark)
sessionStorage — untuk data sementara per sesi tab (form, wizard, filter)
JSON.stringify/parse — wajib dipakai untuk menyimpan object dan array
Selalu perhatikan keamanan data — jangan simpan informasi sensitif!

Dengan menguasai localStorage dan sessionStorage JavaScript, aplikasi web yang kamu buat akan terasa lebih responsif dan pintar — karena data pengguna tersimpan dengan aman di perangkat mereka. Di artikel berikutnya, kita akan masuk ke dunia Asynchronous JavaScript — salah satu konsep terpenting sekaligus paling sering bikin bingung. Siap?

💬 Tulis Komentar 📤 Share Artikel

📚 Seri Lengkap