Python

⚡ JavaScript untuk Pemula: Panduan Lengkap

Tutorial lengkap belajar JavaScript dari nol — variabel, tipe data, operator, fungsi, array, object, dan DOM dasar dengan contoh kode praktis dan quiz interaktif

📅 18 Maret 2026 📖 15 menit baca Pemula

🐝

Tim BeebaneLabs Penulis & Kontributor Teknologi

📋 Daftar Isi

Pengenalan JavaScript
Variabel dan Tipe Data
Operator
Kontrol Alur
Fungsi
Array
Object
DOM Dasar
Error Handling
Quiz Pemahaman

1. Pengenalan JavaScript

JavaScript adalah bahasa pemrograman yang awalnya dikembangkan oleh Brendan Eich di Netscape pada tahun 1995. JavaScript merupakan bahasa pemrograman yang paling populer di dunia dan menjadi fondasi utama pengembangan web modern. Setiap browser modern sudah memiliki JavaScript engine built-in, sehingga Anda bisa langsung menulis dan menjalankan kode JavaScript tanpa instalasi tambahan.

JavaScript awalnya dirancang untuk membuat halaman web interaktif di sisi client (frontend), namun sekarang juga digunakan di sisi server (backend) melalui Node.js, pengembangan mobile (React Native), desktop (Electron), dan bahkan IoT. Fleksibilitas ini menjadikan JavaScript sebagai salah satu skill paling berharga di industri teknologi.

Mengapa Belajar JavaScript?

Keunggulan	Penjelasan
Universal	Bisa digunakan di frontend, backend, mobile, desktop, dan IoT
Populer	Bahasa pemrograman #1 di GitHub dan Stack Overflow Survey
Mudah Dimulai	Cukup buka browser dan tekan F12 untuk mulai menulis kode
Ekosistem Besar	npm memiliki jutaan package siap pakai
Dukungan Luas	Dijalankan oleh semua browser dan didukung komunitas global
Framework Modern	React, Vue, Angular, Svelte — semua berbasis JavaScript

Cara Menjalankan JavaScript

Diagram: EKOSISTEM JAVASCRIPT

EKOSISTEM JAVASCRIPT

2. Variabel dan Tipe Data

Variabel adalah wadah untuk menyimpan data. Di JavaScript modern, kita menggunakan let dan const untuk mendeklarasikan variabel (bukan var yang sudah usang). JavaScript adalah bahasa bertipe dinamis, sehingga tipe data variabel bisa berubah sesuai nilai yang disimpan.

Deklarasi Variabel: var, let, const

JavaScript — Variabel

// var — PUNCAK (function scope), JANGAN digunakan di kode modern
var namaLama = "Budi";
var namaLama = "Andi"; // Boleh dideklarasi ulang (berbahaya!)

// let — BLOCK scope, bisa diubah nilainya
let umur = 25;
umur = 26; // ✅ Boleh diubah
// let umur = 30; // ❌ Error: sudah dideklarasi

// const — BLOCK scope, TIDAK bisa diubah nilainya
const PI = 3.14159;
// PI = 3.14; // ❌ Error: Assignment to constant

// const dengan object — properti bisa diubah, referensi tidak
const orang = { nama: "Budi", umur: 25 };
orang.umur = 26;     // ✅ Boleh ubah properti
// orang = {};       // ❌ Error: tidak bisa reassign

// Aturan penamaan variabel
let namaUser = "Andi";       // ✅ camelCase (konvensi JS)
let _privateVar = true;      // ✅ underscore
let $harga = 50000;          // ✅ dollar sign
// let 2angka = 10;          // ❌ Tidak boleh diawali angka
// let my-name = "test";     // ❌ Tidak boleh pakai dash
// let class = "X";          // ❌ Kata reservasi

Tipe Data Dasar

Tipe	Contoh	Penjelasan
`string`	"hello", 'world', `template`	Teks — bisa pakai '', "", atau ``
`number`	`42, 3.14, -10, NaN`	Semua angka (integer & float)
`boolean`	`true, false`	Logika benar-salah
`null`	`null`	Nilai kosong yang disengaja
`undefined`	`undefined`	Belum diberi nilai
`object`	`{nama: "Budi"}`	Kumpulan key-value
`array`	`[1, 2, 3]`	Kumpulan data terurut
`symbol`	`Symbol('id')`	Pengenal unik
`bigint`	`9007199254740991n`	Angka sangat besar

typeof dan Template Literals

JavaScript — typeof & Template

// typeof — mengecek tipe data
console.log(typeof 42);          // "number"
console.log(typeof "hello");     // "string"
console.log(typeof true);        // "boolean"
console.log(typeof undefined);   // "undefined"
console.log(typeof null);        // "object" (bug historis!)
console.log(typeof [1,2,3]);     // "object"
console.log(typeof {});          // "object"

// Template Literals (backtick `) — string modern
let nama = "Budi";
let umur = 25;
console.log(`Nama saya ${nama}, umur ${umur} tahun`);
// Output: Nama saya Budi, umur 25 tahun

// Multi-line string
let pesan = `Halo ${nama},
Selamat datang di tutorial JavaScript!
Kita akan belajar bersama.`;
console.log(pesan);

// Ekspresi di dalam template literal
let harga = 50000;
let qty = 3;
console.log(`Total: Rp${(harga * qty).toLocaleString('id-ID')}`);
// Output: Total: Rp150.000

💡 Tips

Selalu gunakan const secara default, dan ubah ke let hanya jika nilai variabel perlu diubah. Hindari var di kode modern karena perilaku hoisting-nya sering menyebabkan bug yang sulit dilacak. Konsistensi dalam penamaan variabel menggunakan camelCase adalah konvensi standar JavaScript.

3. Operator

JavaScript menyediakan berbagai jenis operator untuk manipulasi data. Penting untuk memahami perbedaan antara == (loose equality) dan === (strict equality) karena ini adalah salah satu sumber bug paling umum di JavaScript.

Operator Aritmatika

JavaScript — Aritmatika

// Operator aritmatika dasar
let a = 15, b = 4;

console.log(a + b);   // 19  (penjumlahan)
console.log(a - b);   // 11  (pengurangan)
console.log(a * b);   // 60  (perkalian)
console.log(a / b);   // 3.75 (pembagian)
console.log(a % b);   // 3   (modulus/sisa bagi)
console.log(a ** b);  // 50625 (pangkat: 15^4)

// Increment & Decrement
let x = 10;
x++;     // x sekarang 11 (post-increment)
x--;     // x sekarang 10 (post-decrement)
++x;     // x sekarang 11 (pre-increment)

// Shortcut assignment
let y = 10;
y += 5;   // y = y + 5 → 15
y -= 3;   // y = y - 3 → 12
y *= 2;   // y = y * 2 → 24
y /= 4;   // y = y / 4 → 6
y **= 3;  // y = y ** 3 → 216

Operator Perbandingan dan Logika

JavaScript — Perbandingan

// Perbandingan — selalu gunakan === (strict equality)!

console.log(5 == "5");    // true  ← TYPE COERCION (berbahaya!)
console.log(5 === "5");   // false ← strict: tipe berbeda
console.log(5 != "5");    // false ← loose
console.log(5 !== "5");   // true  ← strict inequality

console.log(10 > 5);      // true
console.log(10 < 5);      // false
console.log(10 >= 10);    // true
console.log(5 <= 3);      // false

// Operator logika
let umur = 25;
let punyaSIM = true;

// AND (&&) — semua harus true
console.log(umur >= 17 && punyaSIM);  // true

// OR (||) — salah satu harus true
console.log(umur < 18 || punyaSIM);   // true

// NOT (!) — membalik boolean
console.log(!punyaSIM);               // false

// Nullish coalescing (??) — ES2020
// Hanya null/undefined yang dianggap kosong
let nama = null ?? "Anonymous";
console.log(nama);  // "Anonymous"

let umur2 = 0 ?? 18;
console.log(umur2);  // 0 ← nol BUKAN null!

// Optional chaining (?.) — ES2020
let user = { profile: { name: "Budi" } };
console.log(user?.profile?.name);   // "Budi"
console.log(user?.address?.city);   // undefined (tidak error!)

4. Kontrol Alur

Kontrol alur menentukan jalannya eksekusi program berdasarkan kondisi atau pengulangan. JavaScript mendukung if-else, switch, for, while, do-while, dan for...of/for...in.

If-Else dan Ternary

JavaScript — If-Else

// If-Else dasar
let nilai = 85;

if (nilai >= 90) {
  console.log("Grade A — Excellent!");
} else if (nilai >= 80) {
  console.log("Grade B — Good!");
} else if (nilai >= 70) {
  console.log("Grade C — Average");
} else if (nilai >= 60) {
  console.log("Grade D — Below Average");
} else {
  console.log("Grade F — Fail");
}
// Output: Grade B — Good!

// Ternary operator (shortcut if-else)
let status = nilai >= 60 ? "Lulus" : "Tidak Lulus";
console.log(status); // "Lulus"

// Nested ternary (gunakan dengan bijak)
let grade = nilai >= 90 ? "A" :
            nilai >= 80 ? "B" :
            nilai >= 70 ? "C" : "D";
console.log(grade); // "B"

// Switch statement
let hari = "Senin";
switch (hari) {
  case "Senin":
    console.log("Hari kerja pertama");
    break;
  case "Jumat":
    console.log("Hari Jumat, alhamdulillah");
    break;
  case "Sabtu":
  case "Minggu":
    console.log("Weekend!");
    break;
  default:
    console.log("Hari biasa");
}
// Output: Hari kerja pertama

Perulangan (Loops)

JavaScript — Loops

// for loop klasik
for (let i = 0; i < 5; i++) {
  console.log(`Iterasi ke-${i}`);
}
// Output: Iterasi ke-0, 1, 2, 3, 4

// while loop
let counter = 0;
while (counter < 3) {
  console.log(`Counter: ${counter}`);
  counter++;
}
// Output: Counter: 0, 1, 2

// do-while — minimal sekali dieksekusi
let angka = 10;
do {
  console.log(`Angka: ${angka}`);
  angka--;
} while (angka > 7);
// Output: Angka: 10, 9, 8

// for...of — iterasi array/string
let buah = ["apel", "mangga", "jeruk"];
for (let item of buah) {
  console.log(item);
}
// Output: apel, mangga, jeruk

// for...in — iterasi object properties
let orang = { nama: "Budi", umur: 25, kota: "Jakarta" };
for (let key in orang) {
  console.log(`${key}: ${orang[key]}`);
}
// Output: nama: Budi, umur: 25, kota: Jakarta

// break dan continue
for (let i = 0; i < 10; i++) {
  if (i === 3) continue; // skip angka 3
  if (i === 7) break;    // stop di angka 7
  console.log(i);
}
// Output: 0, 1, 2, 4, 5, 6

5. Fungsi

Fungsi adalah blok kode yang bisa dipanggil berulang kali. JavaScript memiliki beberapa cara mendefinisikan fungsi: function declaration, function expression, dan arrow function. Memahami fungsi adalah kunci untuk menulis kode yang rapi dan reusable.

Function Declaration & Expression

JavaScript — Fungsi

// 1. Function Declaration — bisa dipanggil sebelum deklarasi (hoisting)
function sapa(nama) {
  return `Halo, ${nama}! Selamat datang.`;
}
console.log(sapa("Budi"));
// Output: Halo, Budi! Selamat datang.

// 2. Function Expression — tidak di-hoist
const tambah = function(a, b) {
  return a + b;
};
console.log(tambah(5, 3));  // 8

// 3. Arrow Function — sintaks singkat (ES6+)
const kali = (a, b) => a * b;
console.log(kali(4, 5));    // 20

// Arrow function dengan body block
const hitungLuas = (panjang, lebar) => {
  const luas = panjang * lebar;
  return luas;
};
console.log(hitungLuas(10, 5));  // 50

// Parameter default
function greet(name = "Guest") {
  return `Hello, ${name}!`;
}
console.log(greet());         // "Hello, Guest!"
console.log(greet("Budi"));   // "Hello, Budi!"

// Rest parameter (...args) — menerima banyak argumen
function jumlah(...angka) {
  return angka.reduce((total, n) => total + n, 0);
}
console.log(jumlah(1, 2, 3, 4, 5));  // 15

// Destructuring parameter
function tampilkanUser({ nama, umur, kota }) {
  console.log(`${nama}, ${umur} tahun, dari ${kota}`);
}
tampilkanUser({ nama: "Andi", umur: 30, kota: "Bandung" });
// Output: Andi, 30 tahun, dari Bandung

Higher-Order Function

JavaScript — Higher-Order Functions

// Higher-Order Function: fungsi yang menerima/mengembalikan fungsi

// Contoh 1: Fungsi sebagai argumen
function prosesArray(arr, operasi) {
  return arr.map(operasi);
}
const angka = [1, 2, 3, 4, 5];
const kuadrat = prosesArray(angka, x => x ** 2);
console.log(kuadrat);  // [1, 4, 9, 16, 25]

// Contoh 2: Fungsi yang mengembalikan fungsi (factory function)
function buatPengali(multiplier) {
  return function(angka) {
    return angka * multiplier;
  };
}
const kaliDua = buatPengali(2);
const kaliTiga = buatPengali(3);
console.log(kaliDua(10));   // 20
console.log(kaliTiga(10));  // 30

// Contoh 3: Callback function
function fetchData(callback) {
  setTimeout(() => {
    const data = { nama: "Budi", umur: 25 };
    callback(data);
  }, 1000);
}
fetchData((result) => {
  console.log("Data diterima:", result);
});
// Output (setelah 1 detik): Data diterima: {nama: "Budi", umur: 25}

💡 Tips

Gunakan arrow function untuk callback singkat dan fungsi satu baris. Gunakan function declaration untuk fungsi utama yang perlu di-hoist. Arrow function tidak memiliki this sendiri — mereka menggunakan this dari enclosing scope, jadi jangan gunakan arrow function sebagai method pada object.

6. Array

Array adalah struktur data yang menyimpan kumpulan elemen dalam urutan tertentu. JavaScript Array sangat fleksibel — bisa menyimpan berbagai tipe data dan memiliki banyak method built-in yang powerful.

Membuat dan Mengakses Array

JavaScript — Array Dasar

// Membuat array
let buah = ["apel", "mangga", "jeruk", "pisang"];
let angka = [10, 20, 30, 40, 50];
let campur = ["hello", 42, true, null, { nama: "Budi" }];

// Mengakses elemen (index dimulai dari 0)
console.log(buah[0]);      // "apel"
console.log(buah[2]);      // "jeruk"
console.log(buah.length);  // 4
console.log(buah[buah.length - 1]);  // "pisang" (elemen terakhir)

// Mengubah elemen
buah[1] = "durian";
console.log(buah);  // ["apel", "durian", "jeruk", "pisang"]

// Spread operator untuk copy/merge
let buahBaru = [...buah, "mangga", "anggur"];
console.log(buahBaru);
// ["apel", "durian", "jeruk", "pisang", "mangga", "anggur"]

// Destructuring array
let [pertama, kedua, ...sisa] = buah;
console.log(pertama);  // "apel"
console.log(kedua);    // "durian"
console.log(sisa);     // ["jeruk", "pisang"]

// Skip elemen dengan destructuring
let [, , ketiga] = buah;
console.log(ketiga);   // "jeruk"

Array Methods Penting

JavaScript — Array Methods

let siswa = ["Andi", "Budi", "Citra", "Dewi", "Eka"];

// Menambah & menghapus elemen
siswa.push("Fani");      // Tambah di akhir
siswa.unshift("Gilang"); // Tambah di awal
siswa.pop();             // Hapus dari akhir
siswa.shift();           // Hapus dari awal

// Menghapus elemen tertentu (splice)
// splice(index, jumlah_hapus, ...tambah)
let buah = ["apel", "mangga", "jeruk", "pisang"];
buah.splice(1, 1);              // Hapus 1 elemen di index 1
console.log(buah);              // ["apel", "jeruk", "pisang"]

buah.splice(1, 0, "durian");   // Sisipkan "durian" di index 1
console.log(buah);              // ["apel", "durian", "jeruk", "pisang"]

// Mencari elemen
console.log(buah.includes("jeruk"));  // true
console.log(buah.indexOf("pisang"));  // 3
console.log(buah.indexOf("mangga"));  // -1 (tidak ditemukan)

// Join & Split
let kalimat = buah.join(", ");
console.log(kalimat);  // "apel, durian, jeruk, pisang"

let kata = "Halo Dunia JavaScript";
let arr = kata.split(" ");
console.log(arr);  // ["Halo", "Dunia", "JavaScript"]

// Concat & Slice
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let gabung = arr1.concat(arr2);
console.log(gabung);  // [1, 2, 3, 4, 5, 6]

let subset = gabung.slice(1, 4);
console.log(subset);  // [2, 3, 4]

7. Object

Object adalah struktur data fundamental di JavaScript yang menyimpan data dalam bentuk pasangan key-value. Hampir semua hal di JavaScript adalah object atau bisa dianggap sebagai object — termasuk array, function, dan bahkan Date.

Membuat dan Menggunakan Object

JavaScript — Object

// Membuat object literal
const mahasiswa = {
  nama: "Budi Santoso",
  umur: 22,
  jurusan: "Teknik Informatika",
  ipk: 3.75,
  aktif: true,
  hobi: ["coding", "gaming", "membaca"],
  alamat: {
    kota: "Jakarta",
    provinsi: "DKI Jakarta",
    kodePos: "12345"
  }
};

// Mengakses properti
console.log(mahasiswa.nama);          // "Budi Santoso"
console.log(mahasiswa["jurusan"]);     // "Teknik Informatika"
console.log(mahasiswa.alamat.kota);    // "Jakarta"
console.log(mahasiswa.hobi[0]);        // "coding"

// Menambah & mengubah properti
mahasiswa.email = "budi@email.com";    // Tambah properti baru
mahasiswa.umur = 23;                   // Ubah properti
delete mahasiswa.aktif;                // Hapus properti

// Mengecek properti
console.log("nama" in mahasiswa);      // true
console.log(mahasiswa.hasOwnProperty("email"));  // true

// Object.keys, Object.values, Object.entries
console.log(Object.keys(mahasiswa));
// ["nama", "umur", "jurusan", "ipk", "hobi", "alamat", "email"]

console.log(Object.values(mahasiswa));
// ["Budi Santoso", 22, "Teknik Informatika", 3.75, ...]

// Object.entries → array of [key, value] pairs
for (let [key, value] of Object.entries(mahasiswa)) {
  console.log(`${key}: ${value}`);
}

Destructuring dan Spread pada Object

JavaScript — Object Advanced

// Object destructuring
const { nama, umur, jurusan } = mahasiswa;
console.log(nama);     // "Budi Santoso"
console.log(umur);     // 22

// Rename saat destructure
const { nama: fullName, umur: age } = mahasiswa;
console.log(fullName);  // "Budi Santoso"

// Default value
const { ipk, semester = 6 } = mahasiswa;
console.log(semester);  // 6 (tidak ada di object, pakai default)

// Nested destructuring
const { alamat: { kota, provinsi } } = mahasiswa;
console.log(kota);  // "Jakarta"

// Spread operator untuk merge object
const defaultConfig = { theme: "dark", lang: "id", fontSize: 14 };
const userConfig = { theme: "light", fontSize: 16 };
const finalConfig = { ...defaultConfig, ...userConfig };
console.log(finalConfig);
// { theme: "light", lang: "id", fontSize: 16 }

// Shorthand properties
let nama2 = "Andi";
let umur2 = 30;
const orang = { nama2, umur2 };  // Shorthand!
console.log(orang);  // { nama2: "Andi", umur2: 30 }

// Shorthand methods
const kalkulator = {
  tambah(a, b) { return a + b; },
  kurang(a, b) { return a - b; },
  kali(a, b) { return a * b; }
};
console.log(kalkulator.tambah(5, 3));  // 8

// Computed property names
let field = "harga";
let produk = {
  [field]: 50000,
  [`${field}Diskon`]: 45000
};
console.log(produk.harga);        // 50000
console.log(produk.hargaDiskon);  // 45000

8. DOM Dasar

DOM (Document Object Model) adalah representasi struktur HTML dalam bentuk tree/object yang bisa dimanipulasi dengan JavaScript. Melalui DOM, JavaScript bisa mengubah konten, style, dan struktur halaman web secara dinamis. Ini adalah salah satu kemampuan paling powerful dari JavaScript.

Memilih Elemen DOM

JavaScript — DOM Selection

// getElementById — pilih elemen berdasarkan ID
const judul = document.getElementById("judul");
console.log(judul.textContent);  // Isi teks elemen

// querySelector — pilih elemen pertama yang cocok (CSS selector)
const paragraf = document.querySelector("p.intro");
const tombol = document.querySelector("#btn-submit");
const item = document.querySelector("ul li:first-child");

// querySelectorAll — pilih SEMUA elemen yang cocok (NodeList)
const semuaParagraf = document.querySelectorAll("p");
const semuaList = document.querySelectorAll(".menu-item");

// Iterasi NodeList
semuaParagraf.forEach(p => {
  console.log(p.textContent);
});

// getElementsByClassName — HTMLCollection (live)
const items = document.getElementsByClassName("item");

// getElementsByTagName — HTMLCollection (live)
const divs = document.getElementsByTagName("div");

// Perbedaan NodeList vs HTMLCollection:
// NodeList: bisa forEach, snapshot (kecuali dari getElementsByTagName)
// HTMLCollection: live, tidak bisa forEach langsung

Manipulasi Konten dan Style

JavaScript — DOM Manipulation

// Mengubah konten
const heading = document.querySelector("h1");
heading.textContent = "Judul Baru";          // Ubah teks (aman)
heading.innerHTML = "<em>Judul</em> Baru"; // Ubah HTML

// Mengubah atribut
const gambar = document.querySelector("img");
gambar.setAttribute("src", "foto-baru.jpg");
gambar.setAttribute("alt", "Foto baru");
console.log(gambar.getAttribute("alt"));     // "Foto baru"

// Mengubah style
const box = document.querySelector(".box");
box.style.backgroundColor = "#ff0000";
box.style.padding = "20px";
box.style.borderRadius = "8px";
box.style.display = "none";  // Sembunyikan
box.style.display = "block"; // Tampilkan

// Mengubah class
box.classList.add("active");        // Tambah class
box.classList.remove("hidden");     // Hapus class
box.classList.toggle("dark-mode");  // Toggle class
box.classList.replace("old", "new"); // Ganti class

// Cek class
if (box.classList.contains("active")) {
  console.log("Box sedang aktif!");
}

Membuat Elemen dan Event Listener

JavaScript — Create & Events

// Membuat elemen baru
const container = document.querySelector("#container");
const newDiv = document.createElement("div");
newDiv.textContent = "Elemen baru!";
newDiv.classList.add("card");
newDiv.setAttribute("id", "card-1");
container.appendChild(newDiv);           // Tambah di akhir
container.insertBefore(newDiv, container.firstChild); // Tambah di awal

// Menghapus elemen
const oldElement = document.querySelector("#old");
oldElement.remove();                     // Hapus diri sendiri
// parent.removeChild(child)            // Hapus anak

// Cloning elemen
const clone = newDiv.cloneNode(true);    // true = deep clone
document.body.appendChild(clone);

// Event Listener — menangkap interaksi user
const tombol = document.querySelector("#btn");

tombol.addEventListener("click", function(event) {
  console.log("Tombol diklik!");
  console.log("Target:", event.target);
});

// Event delegation — satu listener untuk banyak elemen
document.querySelector("#list").addEventListener("click", function(e) {
  if (e.target.matches("li.item")) {
    console.log("Item diklik:", e.target.textContent);
  }
});

// Common events:
// "click"       — tombol diklik
// "input"       — input berubah (real-time)
// "change"      — input selesai diubah
// "submit"      — form disubmit
// "keydown"     — tombol keyboard ditekan
// "mouseover"   — mouse masuk elemen
// "mouseout"    — mouse keluar elemen
// "scroll"      — halaman di-scroll
// "load"        — halaman selesai dimuat

Diagram: DOM Tree

DOM Tree

9. Error Handling

JavaScript menggunakan try...catch untuk menangani error secara graceful. Tanpa error handling yang baik, satu error kecil bisa membuat seluruh program crash. Error handling yang baik adalah tanda programmer yang profesional.

JavaScript — Error Handling

// try...catch...finally
try {
  let hasil = JSON.parse('{"nama": "Budi"}');
  console.log(hasil.nama);  // "Budi"
} catch (error) {
  console.log("Error:", error.message);
} finally {
  console.log("Selalu dijalankan, baik ada error atau tidak");
}

// Custom Error
class SaldoTidakCukupError extends Error {
  constructor(saldo, jumlah) {
    super(`Saldo Rp${saldo.toLocaleString()} kurang dari Rp${jumlah.toLocaleString()}`);
    this.name = "SaldoTidakCukupError";
    this.saldo = saldo;
    this.jumlah = jumlah;
  }
}

function tarikTunai(saldo, jumlah) {
  if (jumlah > saldo) {
    throw new SaldoTidakCukupError(saldo, jumlah);
  }
  return saldo - jumlah;
}

try {
  let sisa = tarikTunai(100000, 150000);
} catch (e) {
  if (e instanceof SaldoTidakCukupError) {
    console.log(`❌ ${e.message}`);
  } else {
    console.log("Error tidak diketahui:", e);
  }
}

// Async error handling dengan async/await
async function ambilData(url) {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const data = await response.json();
    return data;
  } catch (error) {
    console.log("Gagal mengambil data:", error.message);
    return null;
  }
}