let nama = "Kaos Onlenkan";   // bisa diubah nanti
nama = "Kaos Polos";              // ✅ boleh

const pajak = 0.11;              // TIDAK bisa diubah setelah diisi
pajak = 0.12;                     // ❌ TypeError: Assignment to constant variable

var lama = "gaya lama";         // cara lama, HINDARI di kode baru

const teks = "Halo";         // string
const angka = 42;             // number — JS TIDAK membedakan int/float, semua "number"
const desimal = 3.14;         // juga number
const benar = true;           // boolean
const kosong = null;           // sengaja "tidak ada nilai"
let belumDiisi;                // undefined — belum diberi nilai sama sekali

console.log(typeof teks);    // "string"
console.log(typeof angka);   // "number"

const nama = "Nus";
const umur = 28;

// cara lama: menyambung dengan +
const pesanLama = "Halo, " + nama + "! Umurmu " + umur + " tahun.";

// cara modern: template literal — pakai backtick ` , bukan kutip biasa
const pesan = `Halo, ${nama}! Umurmu ${umur} tahun.`;
// ${...} bisa berisi EKSPRESI apa pun, bukan cuma variabel
const info = `Tahun depan kamu ${umur + 1} tahun.`;

// bisa multi-baris langsung, tanpa perlu \n
const alamat = `Jl. Merdeka No. 1
Probolinggo, Jawa Timur`;

Number("42");          // 42 (number)
Number("abc");         // NaN (Not a Number — konversi gagal)
String(42);            // "42" (string)
Boolean(0);            // false
Boolean("");           // false
Boolean("halo");       // true

parseInt("42px");      // 42 — ambil angka di depan, abaikan sisanya
parseFloat("3.14em");  // 3.14

"5" == 5;      // true  — JS mengonversi tipe dulu sebelum membandingkan
"5" === 5;     // false — beda tipe (string vs number), TIDAK dianggap sama

0 == false;     // true  — mengejutkan!
0 === false;    // false — beda tipe

null == undefined;   // true
null === undefined;  // false

// enam nilai FALSY — semuanya dianggap "false" dalam kondisi:
false, 0, "", null, undefined, NaN

// SEMUA yang lain TRUTHY, termasuk yang mengejutkan:
"0"       // truthy! (string berisi karakter, walau isinya "0")
"false"   // truthy! (string tidak kosong)
[]         // truthy! (array kosong tetap truthy)
{}         // truthy! (objek kosong tetap truthy)

const nilai = 78;

if (nilai >= 90) {
  console.log("A");
} else if (nilai >= 80) {
  console.log("B");
} else if (nilai >= 70) {
  console.log("C");
} else {
  console.log("Belum lulus");
}

stok > 0 && aktif === true;   // AND — keduanya harus true
stok === 0 || diskontinu;           // OR — salah satu cukup
!aktif;                             // NOT — kebalikannya

// && dan || sering dipakai untuk nilai default (dibahas lebih dalam di Materi 21)
const nama = inputNama || "Tamu";   // kalau inputNama falsy, pakai "Tamu"

// ternary: kondisi ? nilai_true : nilai_false
const status = stok > 0 ? "Tersedia" : "Habis";

// nullish coalescing (??) — beda dari || !
const qty = 0;
qty || 10;    // 10 — karena 0 itu FALSY, dianggap "tidak ada"
qty ?? 10;    // 0  — ?? hanya peduli null/undefined, 0 tetap dipakai

switch (status) {
  case "lunas":
    console.log("Sudah dibayar");
    break;             // WAJIB — tanpa ini, lanjut ke case berikutnya
  case "pending":
    console.log("Menunggu pembayaran");
    break;
  default:
    console.log("Status tidak dikenal");
}

for (let i = 1; i <= 5; i++) {
  console.log(`Baris ${i}`);
}
// Baris 1, Baris 2, ... Baris 5

let stok = 5;
while (stok > 0) {
  console.log(`Sisa stok: ${stok}`);
  stok--;
}

let n = 0;
do {
  console.log("Jalan minimal sekali");
  n++;
} while (n < 3);

const produk = ["Kaos", "Hoodie", "Topi"];

for (const item of produk) {
  console.log(item);
}
// Kaos, Hoodie, Topi

// butuh index juga? pakai entries()
for (const [index, item] of produk.entries()) {
  console.log(`${index}: ${item}`);
}

const produk = { nama: "Kaos", harga: 85000, stok: 24 };

for (const kunci in produk) {
  console.log(`${kunci}: ${produk[kunci]}`);
}
// nama: Kaos, harga: 85000, stok: 24

for (const item of produk) {
  if (item.stok === 0) {
    continue;   // lewati item ini, lanjut ke berikutnya
  }
  if (item.nama === "Selesai") {
    break;      // hentikan seluruh perulangan
  }
  console.log(item.nama);
}

const produk = ["Kaos", "Hoodie", "Topi"];

produk[0];          // "Kaos" — index mulai dari 0
produk[2];          // "Topi"
produk.length;       // 3
produk[produk.length - 1];  // "Topi" — item terakhir

// array boleh campur tipe, walau jarang dianjurkan
const campur = ["teks", 42, true, null];

const produk = ["Kaos", "Hoodie"];

produk.push("Topi");       // tambah di akhir → ["Kaos","Hoodie","Topi"]
produk.unshift("Jaket");    // tambah di awal → ["Jaket","Kaos","Hoodie","Topi"]

produk.pop();               // hapus & kembalikan item TERAKHIR
produk.shift();              // hapus & kembalikan item PERTAMA

produk[0] = "Kaos Polos";   // ubah nilai di posisi tertentu

// splice: hapus/sisipkan di posisi manapun
produk.splice(1, 1);              // dari index 1, hapus 1 item
produk.splice(1, 0, "Baru");    // di index 1, hapus 0, SISIPKAN "Baru"

const angka = [3, 1, 4, 1, 5, 9];

angka.includes(4);        // true — apakah ada?
angka.indexOf(4);          // 2 — posisi pertama, -1 kalau tidak ada
angka.join(", ");          // "3, 1, 4, 1, 5, 9" — gabung jadi string

const produk = [{ nama: "Kaos", harga: 85000 }, { nama: "Topi", harga: 45000 }];
produk.find(p => p.nama === "Topi");       // objek Topi, atau undefined kalau tidak ada
produk.findIndex(p => p.harga > 50000);  // index item pertama yang cocok

const angka = [3, 1, 4, 1, 5, 9];

angka.sort();                      // ❌ jebakan: sort() default membandingkan sebagai STRING!
// hasil: [1, 1, 3, 4, 5, 9] — kebetulan benar di sini, tapi coba [10, 2, 1]:
[10, 2, 1].sort();                 // [1, 10, 2] — SALAH secara numerik!

// ✅ untuk angka, SELALU beri fungsi pembanding
[10, 2, 1].sort((a, b) => a - b);   // [1, 2, 10] — menaik
[10, 2, 1].sort((a, b) => b - a);   // [10, 2, 1] — menurun

function sapa(nama) {
  return `Halo, ${nama}!`;
}

sapa("Nus");       // "Halo, Nus!"

const sapa = function(nama) {
  return `Halo, ${nama}!`;
};

sapa("Nus");

const sapa = (nama) => {
  return `Halo, ${nama}!`;
};

// kalau isinya cuma satu ekspresi return, bisa disingkat:
const sapaSingkat = nama => `Halo, ${nama}!`;   // tanpa {}, tanpa return

// tanpa parameter: kurung tetap wajib
const acakAngka = () => Math.random();

// lebih dari satu parameter: kurung wajib
const jumlahkan = (a, b) => a + b;

// nilai default — dipakai kalau argumen tidak diberikan
function formatHarga(angka, prefix = "Rp ") {
  return prefix + angka.toLocaleString("id-ID");
}
formatHarga(85000);              // "Rp 85.000"
formatHarga(85000, "IDR ");      // "IDR 85.000"

// rest parameter — kumpulkan argumen sebanyak apa pun jadi array
function jumlahkanSemua(...angka) {
  return angka.reduce((total, n) => total + n, 0);
}
jumlahkanSemua(1, 2, 3, 4);      // 10

if (true) {
  let pesan = "di dalam blok";
  var pesanLama = "juga di dalam blok";
}

console.log(pesanLama);  // "juga di dalam blok" — var BOCOR keluar blok!
console.log(pesan);      // ❌ ReferenceError: pesan is not defined

const pesan = "di luar";

function coba() {
  // bisa MEMBACA variabel dari luar (scope luar terlihat dari dalam)
  console.log(pesan);   // "di luar"

  const lokal = "cuma di sini";
}
coba();
console.log(lokal);   // ❌ ReferenceError — variabel di dalam fungsi TIDAK terlihat dari luar

function buatCounter() {
  let hitung = 0;   // variabel ini "terkunci" di dalam closure

  return function() {
    hitung++;
    return hitung;
  };
}

const counter1 = buatCounter();
counter1();   // 1
counter1();   // 2
counter1();   // 3 — hitung TERUS bertambah, "diingat" antar pemanggilan

const counter2 = buatCounter();
counter2();   // 1 — counter BARU, hitung-nya sendiri, terpisah dari counter1

function buatRekening(saldoAwal) {
  let saldo = saldoAwal;   // TIDAK bisa diakses langsung dari luar

  return {
    setor: (jumlah) => { saldo += jumlah; },
    tarik: (jumlah) => {
      if (jumlah > saldo) throw new Error("Saldo tidak cukup");
      saldo -= jumlah;
    },
    cekSaldo: () => saldo,
  };
}

const rekening = buatRekening(100000);
rekening.setor(50000);
rekening.cekSaldo();   // 150000
// rekening.saldo tidak ada — saldo betul-betul tersembunyi, hanya bisa lewat method

const produk = {
  nama: "Kaos Onlenkan",
  harga: 85000,
  stok: 24,
  aktif: true,
};

produk.nama;         // "Kaos Onlenkan" — dot notation, paling umum
produk["harga"];      // 85000 — bracket notation, untuk key dinamis

const kunci = "stok";
produk[kunci];        // 24 — bracket notation WAJIB kalau key-nya variabel

const produk = { nama: "Kaos", harga: 85000 };

produk.stok = 24;              // tambah properti baru
produk.harga = 90000;          // ubah nilai yang sudah ada
delete produk.stok;           // hapus properti

"nama" in produk;             // true — cek apakah key ada

const pesanan = {
  id: 1,
  pelanggan: { nama: "Rifki", email: "rifki@mail.com" },  // objek bersarang
  item: [                                                     // array bersarang
    { nama: "Kaos", qty: 2 },
    { nama: "Topi", qty: 1 },
  ],
};

pesanan.pelanggan.nama;     // "Rifki"
pesanan.item[0].nama;        // "Kaos"
pesanan.item.length;         // 2

const produk = { nama: "Kaos", harga: 85000, stok: 24 };

// tanpa destructuring
const nama1 = produk.nama;
const harga1 = produk.harga;

// dengan destructuring — lebih ringkas, nama variabel HARUS sama dengan nama key
const { nama, harga } = produk;
console.log(nama, harga);    // "Kaos" 85000

// beri nama variabel berbeda
const { nama: namaProduk } = produk;

// nilai default kalau key tidak ada
const { diskon = 0 } = produk;   // 0, karena produk tidak punya key "diskon"

const produk = { nama: "Kaos", harga: 85000 };

// salin objek, sambil menimpa satu field — TIDAK mengubah objek asli
const produkDiskon = { ...produk, harga: 70000 };
// { nama: "Kaos", harga: 70000 }

// gabung dua objek
const gabungan = { ...produk, stok: 24 };

const produk = ["Kaos", "Hoodie", "Topi"];

produk.forEach((item, index) => {
  console.log(`${index}: ${item}`);
});

const harga = [10000, 25000, 5000];

// map SELALU mengembalikan array BARU, dengan jumlah item SAMA
const hargaKenaPajak = harga.map(h => h * 1.11);
// [11100, 27750, 5550]

const produk = [{ nama: "Kaos", harga: 85000 }, { nama: "Topi", harga: 45000 }];
const namaSaja = produk.map(p => p.nama);
// ["Kaos", "Topi"]

const produk = [
  { nama: "Kaos", stok: 24 },
  { nama: "Hoodie", stok: 0 },
  { nama: "Topi", stok: 5 },
];

// filter mengembalikan array BARU berisi item yang membuat fungsinya return true
const tersedia = produk.filter(p => p.stok > 0);
// [{ nama: "Kaos", stok: 24 }, { nama: "Topi", stok: 5 }]

const keranjang = [
  { nama: "Kaos", harga: 85000, qty: 2 },
  { nama: "Topi", harga: 45000, qty: 1 },
];

// reduce(fungsi, nilaiAwal)
// fungsi menerima (akumulator, itemSaatIni), harus RETURN akumulator baru
const total = keranjang.reduce((total, item) => {
  return total + (item.harga * item.qty);
}, 0);   // 0 = nilai awal akumulator

// total = 215000

const produk = [
  { nama: "Kaos", harga: 85000, stok: 24 },
  { nama: "Hoodie", harga: 210000, stok: 0 },
  { nama: "Topi", harga: 45000, stok: 5 },
];

// filter dulu (hanya yang tersedia), lalu map (ambil nama saja)
const namaTersedia = produk
  .filter(p => p.stok > 0)
  .map(p => p.nama);
// ["Kaos", "Topi"]

// filter, lalu reduce — total nilai inventori yang tersedia
const totalNilai = produk
  .filter(p => p.stok > 0)
  .reduce((total, p) => total + (p.harga * p.stok), 0);

const produk = {
  nama: "Kaos",
  harga: 85000,
  info() {
    // this MERUJUK ke objek yang memanggil method ini
    return `${this.nama}: Rp ${this.harga}`;
  },
};

produk.info();   // "Kaos: Rp 85000" — this === produk

const ambilInfo = produk.info;   // method "dilepas" dari objeknya
ambilInfo();   // ❌ Error — this bukan lagi produk, jadi undefined

// kasus nyata: dipakai sebagai callback event (Materi 12)
button.addEventListener("click", produk.info);   // this JADI SALAH di dalam info()

const produk = {
  nama: "Kaos",
  tags: ["promo", "baru"],

  // function biasa di dalam forEach — this DI DALAMNYA bukan produk lagi!
  tampilkanSalah() {
    this.tags.forEach(function(tag) {
      console.log(this.nama, tag);   // ❌ this.nama = undefined
    });
  },

  // arrow function TIDAK punya this sendiri — dia "meminjam" this dari sekitarnya
  tampilkanBenar() {
    this.tags.forEach((tag) => {
      console.log(this.nama, tag);   // ✅ this.nama = "Kaos", sesuai harapan
    });
  },
};

const ambilInfo = produk.info.bind(produk);   // "kunci" this ke produk secara permanen
ambilInfo();   // sekarang bekerja dengan benar, di mana pun dipanggil

// querySelector — cara PALING umum, memakai selector CSS
const judul = document.querySelector("h1");
const tombol = document.querySelector(".btn-utama");   // class
const form = document.querySelector("#form-login");     // id

// querySelectorAll — ambil SEMUA yang cocok, hasilnya NodeList
const semuaTombol = document.querySelectorAll("button");
semuaTombol.forEach(btn => console.log(btn));

const judul = document.querySelector("h1");

judul.textContent = "Judul Baru";        // ubah teks (aman, tidak parse HTML)
judul.innerHTML = "Judul <b>Tebal</b>";   // bisa sisipkan HTML — hati-hati, dibahas di bawah

const gambar = document.querySelector("img");
gambar.src = "foto-baru.jpg";
gambar.setAttribute("alt", "Deskripsi gambar");
gambar.getAttribute("src");              // baca nilai atribut

const kotak = document.querySelector(".kotak");

// style langsung (untuk kasus sederhana)
kotak.style.backgroundColor = "red";
kotak.style.display = "none";   // sembunyikan elemen

// classList — cara yang LEBIH DISUKAI, biarkan CSS mengurus tampilan
kotak.classList.add("aktif");
kotak.classList.remove("tersembunyi");
kotak.classList.toggle("terbuka");      // tambah kalau belum ada, hapus kalau sudah ada
kotak.classList.contains("aktif");      // true / false

const item = document.querySelector(".item");

item.parentElement;         // elemen induk
item.children;               // elemen anak langsung
item.nextElementSibling;     // elemen "saudara" setelahnya
item.previousElementSibling; // elemen "saudara" sebelumnya

// mencari di dalam elemen tertentu, bukan seluruh halaman
const daftar = document.querySelector(".daftar-produk");
daftar.querySelectorAll("li");   // hanya <li> DI DALAM .daftar-produk

const tombol = document.querySelector("#tombol-suka");

tombol.addEventListener("click", () => {
  console.log("Tombol diklik!");
});

tombol.addEventListener("click", (event) => {
  console.log(event.target);        // elemen yang di-klik
  console.log(event.type);          // "click"
});

// event delegation: satu listener untuk banyak elemen anak
const daftar = document.querySelector(".daftar-produk");
daftar.addEventListener("click", (event) => {
  if (event.target.matches(".tombol-hapus")) {
    console.log("Tombol hapus diklik, di item:", event.target.closest(".item"));
  }
});

const input = document.querySelector("input");

input.addEventListener("input", (e) => {
  console.log("Nilai sekarang:", e.target.value);   // setiap kali mengetik
});

input.addEventListener("focus", () => console.log("Input fokus"));
input.addEventListener("blur", () => console.log("Input kehilangan fokus"));

document.addEventListener("keydown", (e) => {
  if (e.key === "Escape") console.log("Tombol Escape ditekan");
});

window.addEventListener("resize", () => console.log("Ukuran window berubah"));

const link = document.querySelector("a");

link.addEventListener("click", (event) => {
  event.preventDefault();   // cegah browser pindah halaman
  console.log("Link diklik, tapi tidak pindah halaman");
});

const daftar = document.querySelector(".daftar-produk");

const item = document.createElement("li");
item.textContent = "Kaos Polos";
item.classList.add("item-produk");

daftar.appendChild(item);   // masukkan ke dalam <ul class="daftar-produk">

const produk = [
  { nama: "Kaos", harga: 85000 },
  { nama: "Hoodie", harga: 210000 },
  { nama: "Topi", harga: 45000 },
];

const daftar = document.querySelector(".daftar-produk");

function renderProduk(daftarProduk) {
  daftar.innerHTML = "";   // kosongkan dulu, supaya tidak menumpuk tiap render ulang

  daftarProduk.forEach(p => {
    const li = document.createElement("li");
    li.innerHTML = `
      <span>${p.nama}</span>
      <span>Rp ${p.harga.toLocaleString("id-ID")}</span>
    `;
    daftar.appendChild(li);
  });
}

renderProduk(produk);

function renderProduk(daftarProduk) {
  daftar.innerHTML = daftarProduk.map(p => `
    <li class="item-produk">
      <h3>${p.nama}</h3>
      <p>Rp ${p.harga.toLocaleString("id-ID")}</p>
      <button data-id="${p.id}" class="tombol-hapus">Hapus</button>
    </li>
  `).join("");
}

<form id="form-kontak">
  <input type="text" name="nama">
  <input type="email" name="email">
  <button type="submit">Kirim</button>
</form>

const form = document.querySelector("#form-kontak");

form.addEventListener("submit", (event) => {
  event.preventDefault();   // cegah reload halaman (perilaku default form)

  const nama = form.nama.value;      // akses input lewat name-nya
  const email = form.email.value;

  console.log("Data form:", { nama, email });
});

form.addEventListener("submit", (event) => {
  event.preventDefault();

  const nama = form.nama.value.trim();
  const email = form.email.value.trim();
  const errors = {};

  if (nama === "") errors.nama = "Nama wajib diisi";
  if (!email.includes("@")) errors.email = "Email tidak valid";

  // tampilkan error di halaman
  document.querySelectorAll(".error").forEach(el => el.textContent = "");
  Object.entries(errors).forEach(([field, pesan]) => {
    const errorEl = document.querySelector(`[data-error="${field}"]`);
    if (errorEl) errorEl.textContent = pesan;
  });

  if (Object.keys(errors).length > 0) return;   // berhenti di sini kalau ada error

  console.log("Form valid, kirim data:", { nama, email });
});

<input type="email" required>                    <!-- wajib diisi, harus format email -->
<input type="text" minlength="3" maxlength="50">  <!-- panjang karakter -->
<input type="number" min="1" max="100">         <!-- rentang angka -->
<input type="text" pattern="[0-9]{10,13}">        <!-- regex, untuk nomor HP -->

// localStorage HANYA menyimpan STRING
localStorage.setItem("nama", "Nus");
localStorage.getItem("nama");      // "Nus"

localStorage.removeItem("nama");   // hapus satu key
localStorage.clear();               // hapus SEMUA data localStorage untuk domain ini

const keranjang = [
  { nama: "Kaos", harga: 85000, qty: 2 },
  { nama: "Topi", harga: 45000, qty: 1 },
];

// objek/array HARUS diubah jadi string JSON dulu sebelum disimpan
localStorage.setItem("keranjang", JSON.stringify(keranjang));

// saat dibaca kembali, ubah balik dari string JSON jadi objek/array
const keranjangTersimpan = JSON.parse(localStorage.getItem("keranjang"));
console.log(keranjangTersimpan[0].nama);   // "Kaos"

function ambilKeranjang() {
  return JSON.parse(localStorage.getItem("keranjang")) ?? [];
}

function simpanKeranjang(keranjang) {
  localStorage.setItem("keranjang", JSON.stringify(keranjang));
}

function tambahKeKeranjang(produk) {
  const keranjang = ambilKeranjang();
  keranjang.push(produk);
  simpanKeranjang(keranjang);
}

tambahKeKeranjang({ nama: "Kaos", harga: 85000 });
// keranjang sekarang tersimpan — refresh halaman, datanya TETAP ada

console.log("1. Mulai");

setTimeout(() => {
  console.log("3. Ini jalan SETELAH 2 detik");
}, 2000);

console.log("2. Ini langsung jalan, TIDAK menunggu");

// urutan output: 1, 2, lalu (setelah 2 detik) 3

function ambilUser(id, callback) {
  setTimeout(() => {
    callback({ id, nama: "Nus" });
  }, 1000);
}

function ambilPesanan(userId, callback) {
  setTimeout(() => {
    callback([{ id: 1, total: 85000 }]);
  }, 1000);
}

// kalau ambilPesanan BUTUH hasil dari ambilUser dulu...
ambilUser(1, (user) => {
  console.log("User:", user);
  ambilPesanan(user.id, (pesanan) => {
    console.log("Pesanan:", pesanan);
    // kalau ada langkah ketiga, keempat... semakin dalam BERSARANG
  });
});

// konvensi lama: callback pertama untuk error, kedua untuk hasil
function ambilData(id, callback) {
  setTimeout(() => {
    if (id < 0) {
      callback(new Error("ID tidak valid"), null);
      return;
    }
    callback(null, { id, nama: "Kaos" });
  }, 500);
}

ambilData(1, (error, data) => {
  if (error) {
    console.error("Gagal:", error.message);
    return;
  }
  console.log("Berhasil:", data);
});

function ambilUser(id) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (id <= 0) {
        reject(new Error("ID tidak valid"));
        return;
      }
      resolve({ id, nama: "Nus" });
    }, 1000);
  });
}

// .then() untuk hasil sukses, .catch() untuk error
ambilUser(1)
  .then(user => console.log("User:", user))
  .catch(error => console.error("Gagal:", error.message));

ambilUser(1)
  .then(user => {
    console.log("User:", user);
    return ambilPesanan(user.id);   // return Promise lain — otomatis "disambung"
  })
  .then(pesanan => {
    console.log("Pesanan:", pesanan);
  })
  .catch(error => {
    // SATU catch menangkap error dari LANGKAH MANA PUN di atas
    console.error("Terjadi kesalahan:", error.message);
  });

// kalau operasi-operasi ini TIDAK saling bergantung, jalankan BERSAMAAN
Promise.all([
  ambilUser(1),
  ambilUser(2),
  ambilUser(3),
]).then(([user1, user2, user3]) => {
  console.log("Ketiganya sudah selesai:", user1, user2, user3);
});
// total waktu ≈ waktu operasi TERLAMA, bukan jumlah semuanya

// fungsi yang memakai await HARUS ditandai "async"
async function tampilkanUser() {
  const user = await ambilUser(1);   // "tunggu" sampai Promise ini selesai
  console.log("User:", user);          // baris ini BARU jalan setelah await selesai
}

tampilkanUser();

async function tampilkanSemua() {
  const user = await ambilUser(1);
  console.log("User:", user);

  const pesanan = await ambilPesanan(user.id);
  console.log("Pesanan:", pesanan);
}

async function tampilkanUser() {
  try {
    const user = await ambilUser(-1);   // ID tidak valid — akan reject
    console.log("User:", user);
  } catch (error) {
    console.error("Gagal mengambil user:", error.message);
  }
}

async function ambilSemuaUser() {
  const [user1, user2, user3] = await Promise.all([
    ambilUser(1),
    ambilUser(2),
    ambilUser(3),
  ]);
  console.log(user1, user2, user3);
}

async function ambilProduk() {
  const respons = await fetch("https://api.tokosaya.com/produk");
  const data = await respons.json();   // urai body respons sebagai JSON
  console.log(data);
}

async function ambilProduk() {
  const respons = await fetch("https://api.tokosaya.com/produk");

  if (!respons.ok) {   // true untuk status 200-299, false untuk 404/500/dll
    throw new Error(`Gagal mengambil data: ${respons.status}`);
  }

  return await respons.json();
}

async function buatProduk(produk) {
  const respons = await fetch("https://api.tokosaya.com/produk", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(produk),   // objek HARUS diubah jadi string JSON
  });

  if (!respons.ok) {
    const error = await respons.json();
    throw new Error(error.message ?? "Gagal menyimpan produk");
  }

  return await respons.json();
}

buatProduk({ nama: "Kaos", harga: 85000 });

async function muatDanTampilkanProduk() {
  const daftar = document.querySelector(".daftar-produk");
  daftar.innerHTML = "Memuat...";

  try {
    const { data } = await ambilProduk();   // destructuring, asumsi API balas { data: [...] }
    daftar.innerHTML = data.map(p => `
      <li>${p.nama} — Rp ${p.harga.toLocaleString("id-ID")}</li>
    `).join("");
  } catch (error) {
    daftar.innerHTML = `<li>Gagal memuat produk: ${error.message}</li>`;
  }
}

async function muatProduk() {
  const kontainer = document.querySelector(".produk-kontainer");

  // 1. keadaan LOADING
  kontainer.innerHTML = '<p class="loading">Memuat produk...</p>';

  try {
    const respons = await fetch("/api/produk");
    if (!respons.ok) throw new Error(`Status ${respons.status}`);

    const { data } = await respons.json();

    // 2. keadaan BERHASIL (dengan sub-kasus: kosong vs ada isi)
    if (data.length === 0) {
      kontainer.innerHTML = '<p class="kosong">Belum ada produk</p>';
      return;
    }
    kontainer.innerHTML = data.map(p => `<div>${p.nama}</div>`).join("");

  } catch (error) {
    // 3. keadaan GAGAL
    kontainer.innerHTML = `
      <p class="error">Gagal memuat produk: ${error.message}</p>
      <button onclick="muatProduk()">Coba Lagi</button>
    `;
  }
}

async function fetchDenganTimeout(url, batasWaktu = 5000) {
  const controller = new AbortController();
  const timer = setTimeout(() => controller.abort(), batasWaktu);

  try {
    const respons = await fetch(url, { signal: controller.signal });
    clearTimeout(timer);
    return respons;
  } catch (error) {
    if (error.name === "AbortError") {
      throw new Error("Permintaan terlalu lama, coba lagi");
    }
    throw error;
  }
}

async function simpanProduk(data) {
  const tombol = document.querySelector("#tombol-simpan");

  tombol.disabled = true;         // cegah klik berulang saat sedang proses
  tombol.textContent = "Menyimpan...";

  try {
    await fetch("/api/produk", { method: "POST", body: JSON.stringify(data) });
    tombol.textContent = "Tersimpan!";
  } catch (error) {
    tombol.textContent = "Gagal, coba lagi";
  } finally {
    tombol.disabled = false;
  }
}

const a = [1, 2, 3];
const b = [4, 5];

const gabungan = [...a, ...b];        // [1, 2, 3, 4, 5]
const salinan = [...a];               // salinan BARU, bukan referensi ke array asli
const denganTambahan = [...a, 4, 5];   // [1, 2, 3, 4, 5]

// mencari nilai terbesar/terkecil dari array
Math.max(...a);   // 3

const koordinat = [10, 20, 30];
const [x, y, z] = koordinat;   // x=10, y=20, z=30

const [pertama, , ketiga] = koordinat;   // lewati elemen kedua dengan koma kosong

// pola sangat umum: tukar nilai dua variabel
let a = 1, b = 2;
[a, b] = [b, a];   // a=2, b=1 — tanpa variabel sementara

const user = { nama: "Nus" };   // tidak punya properti "alamat"

user.alamat.kota;    // ❌ TypeError: Cannot read properties of undefined
user.alamat?.kota;   // ✅ undefined — tidak error, "berhenti dengan aman" di titik yang tidak ada

// berguna untuk data dari server yang strukturnya tidak selalu pasti
const kotaPengguna = respons?.data?.user?.alamat?.kota ?? "Tidak diketahui";

const nama = "Kaos";
const harga = 85000;

// cara lama
const produkLama = { nama: nama, harga: harga };

// shorthand — kalau nama variabel SAMA dengan nama key, cukup tulis sekali
const produk = { nama, harga };   // sama persis hasilnya

// computed property name — key dari variabel
const kunciDinamis = "stok";
const data = { [kunciDinamis]: 24 };   // { stok: 24 }

// Set — kumpulan nilai UNIK, tanpa duplikat
const tagUnik = new Set(["promo", "baru", "promo"]);
tagUnik.size;         // 2 — duplikat otomatis dibuang
[...tagUnik];          // ["promo", "baru"] — ubah balik jadi array kalau perlu

// Map — mirip objek, tapi key-nya boleh tipe APA PUN (bukan cuma string)
const cache = new Map();
cache.set("user-1", { nama: "Nus" });
cache.get("user-1");   // { nama: "Nus" }
cache.has("user-1");   // true

class Produk {
  constructor(nama, harga, stok = 0) {
    this.nama = nama;
    this.harga = harga;
    this.stok = stok;
  }

  // method — TANPA kata kunci "function"
  hargaFormat() {
    return `Rp ${this.harga.toLocaleString("id-ID")}`;
  }

  tersedia() {
    return this.stok > 0;
  }
}

const kaos = new Produk("Kaos Polos", 85000, 12);
kaos.nama;              // "Kaos Polos"
kaos.hargaFormat();     // "Rp 85.000"
kaos.tersedia();        // true

class Rekening {
  #saldo = 0;   // tanda # di depan = PRIVATE, tidak bisa diakses dari luar class

  setor(jumlah) {
    this.#saldo += jumlah;
  }

  tarik(jumlah) {
    if (jumlah > this.#saldo) {
      throw new Error("Saldo tidak cukup");
    }
    this.#saldo -= jumlah;
  }

  get saldo() {   // getter — diakses seperti properti biasa, bukan dipanggil ()
    return this.#saldo;
  }
}

const akun = new Rekening();
akun.setor(100000);
akun.saldo;          // 100000 — dibaca TANPA kurung, berkat getter
// akun.#saldo;    ← ❌ SyntaxError dari luar class

class Pegawai {
  constructor(nama, gajiPokok) {
    this.nama = nama;
    this.gajiPokok = gajiPokok;
  }

  totalGaji() {
    return this.gajiPokok;
  }
}

class Manajer extends Pegawai {
  constructor(nama, gajiPokok, tunjangan) {
    super(nama, gajiPokok);   // panggil constructor induk
    this.tunjangan = tunjangan;
  }

  // override method induk
  totalGaji() {
    return this.gajiPokok + this.tunjangan;
  }
}

const manajer = new Manajer("Nus", 8000000, 3000000);
manajer.totalGaji();   // 11000000

// export terpisah untuk tiap hal yang ingin dibagikan
export function formatRupiah(angka) {
  return `Rp ${angka.toLocaleString("id-ID")}`;
}

export const PAJAK = 0.11;

export class Produk {
  constructor(nama, harga) {
    this.nama = nama;
    this.harga = harga;
  }
}

import { formatRupiah, PAJAK, Produk } from "./helpers.js";

const kaos = new Produk("Kaos", 85000);
console.log(formatRupiah(kaos.harga * (1 + PAJAK)));

export default class Produk {
  // ...
}

// import default TIDAK pakai kurung kurawal, dan namanya bebas kamu pilih
import Produk from "./produk.js";
import ApaSaja from "./produk.js";   // nama variabel ini bebas, tetap merujuk export default yang sama

<!-- type="module" WAJIB supaya import/export bisa dipakai -->
<script type="module" src="main.js"></script>