// Langsung (tanpa animasi)
$("#box").show();
$("#box").hide();
$("#box").toggle();

// Dengan durasi
$("#box").show(300);          // 300 milidetik
$("#box").hide("slow");       // ~600ms
$("#box").show("fast");       // ~200ms
$("#box").toggle(500);

// Dengan callback — dijalankan setelah animasi selesai
$("#box").hide(400, function() {
  console.log("Sudah tersembunyi!");
  $(this).remove();
});

// Fade in dan out (ubah opacity)
$("#box").fadeIn();
$("#box").fadeIn(500);
$("#box").fadeOut();
$("#box").fadeOut(300, function() {
  $(this).remove();  // hapus setelah fade selesai
});
$("#box").fadeToggle(400);

// FadeTo — fade ke opacity tertentu
$("#box").fadeTo(500, 0.5);   // fade ke 50% opacity dalam 500ms
$("#box").fadeTo("slow", 0.2);

// Slide up (collapse) dan slide down (expand)
$("#panel").slideDown();        // tampilkan dengan slide dari atas
$("#panel").slideDown(400);
$("#panel").slideUp();          // sembunyikan dengan slide ke atas
$("#panel").slideToggle(300);   // toggle antara slideDown dan slideUp

// Contoh praktis: accordion
$(".accordion-header").on("click", function() {
  const content = $(this).next(".accordion-content");
  content.slideToggle(300);

  // Tutup yang lain
  $(".accordion-content").not(content).slideUp(300);
});

// Format: .animate(properti, durasi, easing, callback)
$("#box").animate({
  width: "300px",
  height: "200px",
  opacity: 0.8,
  marginLeft: "50px"
}, 600);

// Dengan easing dan callback
$("#box").animate({
  left: "+=100px",   // += berarti relatif dari posisi saat ini
  top:  "-=50px"
}, {
  duration: 800,
  easing: "swing",   // "linear" atau "swing" (bawaan jQuery)
  complete: function() {
    console.log("Animasi selesai!");
  }
});

// Animasi berurutan (queue)
$("#box")
  .animate({ left: "200px" }, 500)
  .animate({ top: "100px" }, 500)
  .animate({ opacity: 0 }, 300, function() {
    $(this).remove();
  });

// Hentikan animasi yang sedang berjalan
$("#box").stop();              // hentikan, tetap di posisi saat ini
$("#box").stop(true);          // hentikan dan kosongkan antrian animasi
$("#box").stop(true, true);    // hentikan dan lompat ke akhir animasi

// Contoh: stop sebelum hover animasi baru agar tidak menumpuk
$(".card").hover(
  function() {
    $(this).stop(true).animate({ marginTop: "-5px" }, 200);
  },
  function() {
    $(this).stop(true).animate({ marginTop: "0px" }, 200);
  }
);

// Delay sebelum animasi
$("#box").delay(1000).fadeOut(500);

// Cek apakah sedang animasi
if ($("#box").is(":animated")) {
  console.log("Sedang animasi");
}

// Dengan plugin easing
$("#box").animate(
  { left: "300px" },
  { duration: 600, easing: "easeOutBounce" }
);

// Pilihan easing: easeInQuad, easeOutBounce, easeInOutElastic, dll.

function tampilkanLoading() {
  $("body").append('<div id="overlay"><div class="spinner"></div></div>');
  $("#overlay").hide().fadeIn(300);
}

function sembunyikanLoading() {
  $("#overlay").fadeOut(300, function() {
    $(this).remove();
  });
}

// Penggunaan
tampilkanLoading();
$.ajax("/api/data")
  .done(data => renderData(data))
  .always(() => sembunyikanLoading());

$("a[href^='#']").on("click", function(e) {
  e.preventDefault();

  const target = $(this.getAttribute("href"));
  if (!target.length) return;

  $("html, body").animate({
    scrollTop: target.offset().top - 80  // offset untuk navbar fixed
  }, 700, "swing");
});

function tampilkanNotif(pesan, tipe = "info") {
  const warna = { sukses: "#28a745", error: "#dc3545", info: "#17a2b8" };

  const toast = $(`
    <div class="toast" style="
      background: ${warna[tipe]};
      color: white;
      padding: 12px 20px;
      border-radius: 4px;
      margin-bottom: 10px;
    ">${pesan}</div>
  `);

  $("#toast-container").append(toast);
  toast.hide().slideDown(300);

  setTimeout(() => {
    toast.slideUp(300, function() { $(this).remove(); });
  }, 3000);
}

// Penggunaan
tampilkanNotif("Data berhasil disimpan!", "sukses");
tampilkanNotif("Terjadi kesalahan!", "error");

import $ from "jquery";

// Format umum: $(selector).action()

// $ adalah alias untuk jQuery
$(document).ready(function() {
  // Kode di sini berjalan setelah DOM siap
  console.log("DOM siap!");
});

// Shorthand yang sama
$(function() {
  console.log("DOM siap!");
});

// JavaScript native
document.querySelector("#judul");
document.querySelectorAll(".kartu");
document.getElementById("navbar");

// jQuery — lebih ringkas, return jQuery object
$("#judul");           // by ID
$(".kartu");           // by class
$("p");               // by tag
$("input[type=text]"); // by attribute
$("ul > li");          // CSS selector
$(".kartu:first");     // pseudo-class
$(".kartu:last");
$(".kartu:even");      // indeks genap
$(".kartu:odd");       // indeks ganjil
$(".kartu:eq(2)");     // indeks ke-2

// Baca konten
$("#judul").text();        // baca teks (tanpa HTML)
$("#konten").html();       // baca HTML inner

// Tulis konten
$("#judul").text("Judul Baru");
$("#konten").html("<strong>Teks tebal</strong>");

// Value pada input
$("#email").val();            // baca nilai input
$("#email").val("budi@contoh.com"); // set nilai

// Method chaining — bisa di-chain!
$("#judul")
  .text("Judul Baru")
  .addClass("highlighted")
  .css("color", "blue");

// CSS
$(".box").css("background-color", "red");
$(".box").css({
  "background-color": "red",
  "font-size": "20px",
  "padding": "10px"
});
console.log($(".box").css("color")); // baca nilai CSS

// Class
$(".box").addClass("aktif");
$(".box").removeClass("aktif");
$(".box").toggleClass("aktif");
$(".box").hasClass("aktif");          // true/false

// Show/hide
$(".modal").show();
$(".modal").hide();
$(".modal").toggle();
$(".modal").show(300);  // animasi 300ms
$(".modal").hide("slow");

// Atribut HTML
$("img").attr("src");                      // baca
$("img").attr("src", "/images/baru.jpg");  // tulis
$("img").attr({ src: "/images/baru.jpg", alt: "Gambar baru" });
$("img").removeAttr("alt");

// Data attribute (data-*)
$(".card").data("id");              // baca data-id
$(".card").data("id", 42);         // tulis
$(".card").removeData("id");

// Naik
$(".item").parent();
$(".item").parents(".container");
$(".item").closest(".wrapper");

// Turun
$(".list").children();
$(".list").children("li.aktif");
$(".list").find("li");    // semua keturunan, bukan hanya children
$(".list").find("span");

// Saudara
$(".item").next();
$(".item").prev();
$(".item").siblings();
$(".item").siblings(".highlight");

// Filter
$("li").first();
$("li").last();
$("li").eq(2);         // elemen indeks ke-2
$("li").filter(".aktif");
$("li").not(".disabled");

// Tambah elemen
$("<li>Item Baru</li>").appendTo("#daftar");   // ke akhir
$("<li>Item Awal</li>").prependTo("#daftar");  // ke awal

// Atau dari sisi parent
$("#daftar").append("<li>Item Akhir</li>");
$("#daftar").prepend("<li>Item Awal</li>");
$("#item-2").before("<li>Sebelum Item 2</li>");
$("#item-2").after("<li>Sesudah Item 2</li>");

// Hapus elemen
$(".hapus").remove();          // hapus termasuk event listener
$(".bersihkan").empty();       // hapus semua children
$(".item").detach();           // hapus tapi simpan di memori (bisa dipasang kembali)

// .on() — cara modern
$("#tombol").on("click", function() {
  alert("Tombol diklik!");
});

// Shorthand untuk event umum
$(".btn").click(function() { /* ... */ });
$("form").submit(function(e) {
  e.preventDefault();
  /* ... */
});
$("#nama").keyup(function() {
  console.log($(this).val());  // $(this) = elemen yang trigger event
});

// Multiple events sekaligus
$(".input")
  .on("focus", function() { $(this).addClass("fokus"); })
  .on("blur",  function() { $(this).removeClass("fokus"); });

// Event delegation — untuk elemen dinamis
$(document).on("click", ".btn-hapus", function() {
  $(this).closest("li").remove();
});

// Hapus event listener
$(".btn").off("click");
$(".btn").off("click", handlerFunction);

// .each() — iterasi semua elemen yang cocok
$("li").each(function(index, element) {
  console.log(index, $(element).text());
  // atau: console.log(index, $(this).text());
});

// .map() — transformasi ke array baru
const texts = $("li").map(function() {
  return $(this).text();
}).get();  // .get() konversi jQuery object ke array biasa

// Sinkron — berjalan berurutan, memblokir
console.log("Mulai");
const data = ambilDataDariServer();  // blok sampai selesai
console.log("Selesai");

// Asinkron — tidak memblokir, berjalan di background
console.log("Mulai");
ambilDataDariServer(function(data) {  // callback — dijalankan setelah selesai
  console.log("Data:", data);
});
console.log("Ini jalan duluan!");
// Output: "Mulai" → "Ini jalan duluan!" → "Data: ..."

// Promise: representasi nilai yang akan tersedia di masa depan
const janji = new Promise((resolve, reject) => {
  const berhasil = true;
  if (berhasil) resolve("Data berhasil!");
  else reject(new Error("Gagal!"));
});

janji
  .then(data => console.log(data))    // berhasil
  .catch(err => console.error(err))   // gagal
  .finally(() => console.log("Selesai")); // selalu dijalankan

async function ambilData() {
  try {
    const response = await fetch("https://api.contoh.com/data");
    const data = await response.json();
    return data;
  } catch (error) {
    console.error("Gagal ambil data:", error);
  }
}

// GET request
fetch("https://jsonplaceholder.typicode.com/posts/1")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

// Dengan async/await (lebih bersih)
async function getPost(id) {
  const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`);

  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
  }

  const data = await response.json();
  return data;
}

getPost(1).then(post => console.log(post));

const BASE_URL = "https://jsonplaceholder.typicode.com";

// GET — ambil data
async function getUsers() {
  const res = await fetch(`${BASE_URL}/users`);
  return res.json();
}

// POST — kirim data baru
async function createPost(postData) {
  const res = await fetch(`${BASE_URL}/posts`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "Authorization": `Bearer ${token}`
    },
    body: JSON.stringify(postData)
  });
  return res.json();
}

// PUT — update penuh
async function updatePost(id, data) {
  const res = await fetch(`${BASE_URL}/posts/${id}`, {
    method: "PUT",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(data)
  });
  return res.json();
}

// PATCH — update sebagian
async function patchPost(id, changes) {
  const res = await fetch(`${BASE_URL}/posts/${id}`, {
    method: "PATCH",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(changes)
  });
  return res.json();
}

// DELETE — hapus data
async function deletePost(id) {
  const res = await fetch(`${BASE_URL}/posts/${id}`, {
    method: "DELETE"
  });
  return res.ok;
}

const api = {
  baseURL: "https://api.kiki.my.id",

  async request(endpoint, options = {}) {
    const url = `${this.baseURL}${endpoint}`;
    const headers = {
      "Content-Type": "application/json",
      ...options.headers
    };

    const token = localStorage.getItem("token");
    if (token) headers["Authorization"] = `Bearer ${token}`;

    const response = await fetch(url, { ...options, headers });

    if (!response.ok) {
      const error = await response.json().catch(() => ({}));
      throw new Error(error.message || `HTTP ${response.status}`);
    }

    if (response.status === 204) return null;
    return response.json();
  },

  get(endpoint)         { return this.request(endpoint); },
  post(endpoint, data)  { return this.request(endpoint, { method: "POST", body: JSON.stringify(data) }); },
  put(endpoint, data)   { return this.request(endpoint, { method: "PUT", body: JSON.stringify(data) }); },
  patch(endpoint, data) { return this.request(endpoint, { method: "PATCH", body: JSON.stringify(data) }); },
  delete(endpoint)      { return this.request(endpoint, { method: "DELETE" }); }
};

// Penggunaan
const posts = await api.get("/posts");
const newPost = await api.post("/posts", { title: "Judul", body: "Isi..." });

async function tampilkanUsers() {
  const loading = document.querySelector("#loading");
  const errorEl = document.querySelector("#error");
  const daftar = document.querySelector("#daftar-user");

  loading.style.display = "block";
  errorEl.style.display = "none";

  try {
    const users = await api.get("/users");

    daftar.innerHTML = users.map(user => `
      <li>
        <strong>${user.nama}</strong> — ${user.email}
      </li>
    `).join("");
  } catch (error) {
    errorEl.textContent = `Error: ${error.message}`;
    errorEl.style.display = "block";
  } finally {
    loading.style.display = "none";
  }
}

document.addEventListener("DOMContentLoaded", tampilkanUsers);

// Jalankan beberapa fetch SECARA BERSAMAAN
async function loadDashboard() {
  const [users, posts, stats] = await Promise.all([
    api.get("/users"),
    api.get("/posts"),
    api.get("/stats")
  ]);

  renderUsers(users);
  renderPosts(posts);
  renderStats(stats);
}

// Promise.allSettled — jalan semua, tidak peduli yang gagal
const results = await Promise.allSettled([
  fetch("/api/a"),
  fetch("/api/b"),
  fetch("/api/c")
]);

results.forEach(result => {
  if (result.status === "fulfilled") console.log(result.value);
  else console.error(result.reason);
});

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

// addEventListener(namaEvent, callbackFunction)
tombol.addEventListener("click", function(event) {
  console.log("Tombol diklik!");
  console.log(event);  // objek Event berisi detail event
});

// Dengan arrow function
tombol.addEventListener("click", (e) => {
  console.log("Diklik!", e.target);  // e.target = elemen yang di-klik
});

// Hapus event listener
function handleClick() { console.log("klik"); }
tombol.addEventListener("click", handleClick);
tombol.removeEventListener("click", handleClick);  // harus referensi fungsi yang sama

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

box.addEventListener("click",      e => console.log("klik"));
box.addEventListener("dblclick",   e => console.log("double klik"));
box.addEventListener("mouseenter", e => console.log("mouse masuk"));
box.addEventListener("mouseleave", e => console.log("mouse keluar"));
box.addEventListener("mousemove",  e => {
  console.log(`Posisi: ${e.clientX}, ${e.clientY}`);
});
box.addEventListener("contextmenu", e => {
  e.preventDefault();  // cegah menu kanan bawaan browser
  console.log("klik kanan");
});

document.addEventListener("keydown", e => {
  console.log(`Tombol ditekan: ${e.key}`);
  console.log(`Kode: ${e.code}`);

  // Cek kombinasi tombol
  if (e.ctrlKey && e.key === "s") {
    e.preventDefault();  // cegah save browser
    simpanData();
  }
  if (e.key === "Escape") tutupModal();
});

document.addEventListener("keyup",   e => console.log("tombol dilepas"));
document.addEventListener("keypress",e => console.log("karakter diketik")); // deprecated

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

form.addEventListener("submit", e => {
  e.preventDefault();                   // PENTING: cegah reload
  const data = new FormData(form);
  console.log(Object.fromEntries(data));
});

input.addEventListener("input",  e => console.log("nilai berubah:", e.target.value));
input.addEventListener("change", e => console.log("blur setelah berubah"));
input.addEventListener("focus",  e => console.log("input difokus"));
input.addEventListener("blur",   e => console.log("focus hilang"));

// Halaman selesai dimuat sepenuhnya (termasuk gambar)
window.addEventListener("load", () => console.log("semua resource dimuat"));

// DOM siap, gambar belum tentu (lebih cepat dari load)
document.addEventListener("DOMContentLoaded", () => {
  console.log("DOM siap");
  initApp();
});

// Scroll
window.addEventListener("scroll", () => {
  const scrollY = window.scrollY;
  if (scrollY > 300) navbar.classList.add("sticky");
});

// Resize
window.addEventListener("resize", () => {
  console.log(`Lebar: ${window.innerWidth}, Tinggi: ${window.innerHeight}`);
});

// Sebelum meninggalkan halaman
window.addEventListener("beforeunload", e => {
  e.preventDefault();
  e.returnValue = "";  // trigger dialog "tinggalkan halaman?"
});

document.querySelector("a").addEventListener("click", function(e) {
  e.preventDefault();    // cegah perilaku default (navigasi link)
  e.stopPropagation();   // hentikan event bubble ke parent

  console.log(e.type);       // "click"
  console.log(e.target);     // elemen yang memicu event
  console.log(e.currentTarget); // elemen yang punya listener
  console.log(e.timeStamp);  // waktu event terjadi
});

// Secara default: bubbling (dari dalam ke luar)
document.querySelector("#tombol").addEventListener("click", () => console.log("tombol"));
document.querySelector("#dalam").addEventListener("click", () => console.log("dalam"));
document.querySelector("#luar").addEventListener("click", () => console.log("luar"));
// Output saat klik tombol: "tombol" → "dalam" → "luar"

// Hentikan bubbling
document.querySelector("#dalam").addEventListener("click", e => {
  e.stopPropagation();  // event tidak naik ke #luar
  console.log("dalam — event berhenti di sini");
});

// Capturing — parameter ketiga: true
document.querySelector("#luar").addEventListener("click", () => {
  console.log("luar (capturing)");
}, true);
// Output: "luar" → "dalam" → "tombol"

// KURANG EFISIEN — listener di setiap item
document.querySelectorAll(".btn-hapus").forEach(btn => {
  btn.addEventListener("click", hapusItem);
});

// LEBIH BAIK — event delegation
document.querySelector("#daftar").addEventListener("click", function(e) {
  // Cek apakah yang diklik adalah tombol hapus
  if (e.target.matches(".btn-hapus")) {
    const li = e.target.closest("li");
    li.remove();
  }

  // Cek tombol edit
  if (e.target.matches(".btn-edit")) {
    const id = e.target.dataset.id;
    editItem(id);
  }
});

// Debounce — tunggu N ms setelah event terakhir
function debounce(fn, delay) {
  let timer;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}

const cariProduk = debounce(function(e) {
  console.log("Mencari:", e.target.value);
  // panggil API di sini
}, 400);

document.querySelector("#search").addEventListener("input", cariProduk);

// Throttle — eksekusi maksimal sekali per N ms
function throttle(fn, limit) {
  let inThrottle;
  return function(...args) {
    if (!inThrottle) {
      fn.apply(this, args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  };
}

window.addEventListener("scroll", throttle(() => {
  console.log("Scroll position:", window.scrollY);
}, 200));

// querySelector — pilih elemen pertama yang cocok (CSS selector)
const judul = document.querySelector("#judul");
const teks = document.querySelector(".teks");
const btn = document.querySelector("button");
const input = document.querySelector("input[type='email']");

// querySelectorAll — pilih SEMUA elemen yang cocok (NodeList)
const semuaLi = document.querySelectorAll("ul li");
const semuaCard = document.querySelectorAll(".card");

// Cara lama (masih berlaku)
document.getElementById("judul");
document.getElementsByClassName("teks");  // HTMLCollection
document.getElementsByTagName("p");       // HTMLCollection

// Iterasi querySelectorAll
semuaLi.forEach(li => {
  console.log(li.textContent);
});

const el = document.querySelector("#judul");

// Membaca konten
console.log(el.textContent);   // teks murni (tanpa tag HTML)
console.log(el.innerHTML);      // termasuk tag HTML di dalamnya
console.log(el.outerHTML);      // termasuk tag elemennya sendiri

// Mengubah konten
el.textContent = "Judul Baru";
el.innerHTML = "Judul <strong>Baru</strong>";  // hati-hati XSS!

// Cara aman menambah konten (tanpa risiko XSS)
const p = document.querySelector("p");
p.textContent = "<script>alert('xss')</script>";  // ditampilkan literal, aman

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

// Mengubah style langsung (inline style)
box.style.backgroundColor = "red";
box.style.fontSize = "20px";
box.style.display = "none";      // sembunyikan
box.style.display = "block";     // tampilkan kembali

// Lebih baik: manipulasi via class
box.classList.add("aktif");          // tambah class
box.classList.remove("aktif");       // hapus class
box.classList.toggle("aktif");       // tambah jika tidak ada, hapus jika ada
box.classList.contains("aktif");     // cek apakah punya class

// Set class sekaligus (mengganti semua class)
box.className = "card aktif highlighted";

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

// Baca atribut
console.log(img.getAttribute("src"));
console.log(img.alt);  // properti HTML standar bisa diakses langsung

// Ubah atribut
img.setAttribute("src", "/assets/images/baru.jpg");
img.setAttribute("alt", "Deskripsi gambar baru");
link.href = "https://kiki.my.id";

// Hapus atribut
img.removeAttribute("alt");

// Data attribute
const card = document.querySelector("[data-id]");
console.log(card.dataset.id);       // nilai data-id
console.log(card.dataset.kategori); // nilai data-kategori
card.dataset.status = "aktif";      // set data-status="aktif"

// Buat elemen baru
const li = document.createElement("li");
li.textContent = "Item Baru";
li.classList.add("item-list");

// Tambahkan ke DOM
const ul = document.querySelector("ul");
ul.appendChild(li);                    // tambah di akhir
ul.prepend(li);                        // tambah di awal
ul.insertBefore(li, ul.children[1]);   // sisipkan sebelum elemen indeks 1

// insertAdjacentHTML — cara cepat
ul.insertAdjacentHTML("beforeend", "<li class='item-list'>Item dari HTML</li>");
// Posisi: "beforebegin", "afterbegin", "beforeend", "afterend"

// Cara modern: append dengan teks atau node
ul.append("teks biasa", li, document.createElement("li"));

const el = document.querySelector(".hapus-saya");

// Cara modern
el.remove();

// Cara lama (via parent)
el.parentNode.removeChild(el);

// Hapus semua child
const container = document.querySelector("#container");
container.innerHTML = "";  // cepat tapi tidak optimal
while (container.firstChild) {
  container.removeChild(container.firstChild);  // lebih bersih
}

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

// Naik ke parent
item.parentElement;
item.closest(".container");  // cari ancestor terdekat yang cocok selector

// Turun ke children
item.children;               // semua child elements (HTMLCollection)
item.firstElementChild;      // child pertama
item.lastElementChild;       // child terakhir
item.childNodes;             // semua child nodes (termasuk teks dan komentar)

// Saudara (sibling)
item.nextElementSibling;     // elemen berikutnya
item.previousElementSibling; // elemen sebelumnya

const form = document.querySelector("#form-tambah");
const input = document.querySelector("#input-item");
const daftar = document.querySelector("#daftar");

form.addEventListener("submit", function(e) {
  e.preventDefault();  // cegah reload halaman

  const teks = input.value.trim();
  if (!teks) return;

  const li = document.createElement("li");
  li.textContent = teks;

  // Tombol hapus
  const btnHapus = document.createElement("button");
  btnHapus.textContent = "×";
  btnHapus.addEventListener("click", () => li.remove());
  li.appendChild(btnHapus);

  daftar.appendChild(li);
  input.value = "";     // kosongkan input
  input.focus();        // fokus kembali ke input
});

// Membuat array
const buah = ["apel", "mangga", "jeruk", "pisang"];
const angka = [1, 2, 3, 4, 5];
const campur = ["teks", 42, true, null, { nama: "Budi" }];
const kosong = [];

// Akses elemen
console.log(buah[0]);   // "apel"
console.log(buah[2]);   // "jeruk"
console.log(buah[buah.length - 1]);  // "pisang" (elemen terakhir)

const arr = [1, 2, 3, 4, 5];

// Menambah dan menghapus
arr.push(6);         // tambah di akhir → [1,2,3,4,5,6]
arr.pop();           // hapus dari akhir → kembalikan 6
arr.unshift(0);      // tambah di awal → [0,1,2,3,4,5]
arr.shift();         // hapus dari awal → kembalikan 0
arr.splice(1, 2);    // hapus 2 elemen mulai indeks 1 → [1,4,5]

// Mencari
console.log(arr.indexOf(4));        // 1 (indeks dari nilai 4)
console.log(arr.includes(5));       // true
console.log(arr.find(n => n > 3));  // 4 (elemen pertama yang cocok)
console.log(arr.findIndex(n => n > 3)); // indeks dari elemen yang cocok

// Transformasi — selalu return array BARU
const double = [1,2,3].map(n => n * 2);      // [2, 4, 6]
const genap  = [1,2,3,4].filter(n => n % 2 === 0); // [2, 4]
const total  = [1,2,3,4].reduce((acc, n) => acc + n, 0); // 10
const flat   = [[1,2],[3,4]].flat();          // [1, 2, 3, 4]

// Sortir dan balik
[3,1,4,1,5].sort((a, b) => a - b);  // [1, 1, 3, 4, 5]
[1,2,3].reverse();                   // [3, 2, 1]

// Utilitas
[1,2,3].join(" - ");   // "1 - 2 - 3"
[1,2,3].slice(1, 3);   // [2, 3] (copy sebagian)
[...arr1, ...arr2];    // gabung dua array (spread)

const koordinat = [10, 20, 30];
const [x, y, z] = koordinat;
console.log(x, y, z);  // 10 20 30

// Skip elemen
const [pertama, , ketiga] = [1, 2, 3];
console.log(pertama, ketiga);  // 1 3

// Rest
const [kepala, ...ekor] = [1, 2, 3, 4, 5];
console.log(kepala);  // 1
console.log(ekor);    // [2, 3, 4, 5]

const pengguna = {
  id: 1,
  nama: "Miftakhuddin",
  email: "me@kiki.my.id",
  aktif: true,
  alamat: {             // nested object
    kota: "Surabaya",
    provinsi: "Jawa Timur"
  },
  hobi: ["coding", "gaming"]  // array di dalam object
};

// Akses property
console.log(pengguna.nama);            // "Miftakhuddin" (dot notation)
console.log(pengguna["email"]);        // "me@kiki.my.id" (bracket notation)
console.log(pengguna.alamat.kota);     // "Surabaya"

// Ubah dan tambah property
pengguna.nama = "Kiki";
pengguna.telepon = "081234567890";

// Hapus property
delete pengguna.aktif;

// Cek keberadaan property
console.log("nama" in pengguna);            // true
console.log(pengguna.hasOwnProperty("nama")); // true

const nama = "Budi";
const usia = 25;

// Tanpa shorthand
const user1 = { nama: nama, usia: usia };

// Dengan shorthand (ES6) — jika nama variabel sama dengan key
const user2 = { nama, usia };

// Method di dalam object
const kalkulator = {
  nilai: 0,

  // Cara lama
  tambah: function(n) { this.nilai += n; },

  // Shorthand method (ES6)
  kurang(n) { this.nilai -= n; },

  // Arrow function — JANGAN untuk method yang pakai this
  tampilkan: () => console.log("nilai saat ini")
};

const produk = {
  id: 101,
  nama: "Laptop Gaming",
  harga: 15000000,
  stok: 5
};

// Destructuring dasar
const { nama, harga } = produk;
console.log(nama, harga);  // "Laptop Gaming" 15000000

// Rename variabel
const { nama: namaProduk, harga: hargaProduk } = produk;

// Default value
const { warna = "hitam" } = produk;
console.log(warna);  // "hitam" (karena tidak ada di produk)

// Nested destructuring
const { alamat: { kota } } = pengguna;

// Destructuring di parameter fungsi
function tampilkanProduk({ nama, harga, stok = 0 }) {
  console.log(`${nama}: Rp${harga.toLocaleString()} (stok: ${stok})`);
}

tampilkanProduk(produk);

const dasar = { a: 1, b: 2 };
const tambahan = { c: 3, d: 4 };

// Gabungkan object (spread)
const gabungan = { ...dasar, ...tambahan };  // { a:1, b:2, c:3, d:4 }

// Copy object (shallow)
const salinan = { ...dasar };

// Override property
const updated = { ...produk, harga: 14000000, stok: 10 };

const obj = { a: 1, b: 2, c: 3 };

Object.keys(obj);    // ["a", "b", "c"]
Object.values(obj);  // [1, 2, 3]
Object.entries(obj); // [["a",1], ["b",2], ["c",3]]

// Iterasi object
Object.entries(obj).forEach(([key, value]) => {
  console.log(`${key}: ${value}`);
});

// Gabungkan object
Object.assign({}, dasar, tambahan);

// Freeze — cegah perubahan
const config = Object.freeze({ env: "production", port: 3000 });

const produkList = [
  { id: 1, nama: "Laptop", harga: 15000000, kategori: "elektronik" },
  { id: 2, nama: "Mouse",  harga: 250000,   kategori: "elektronik" },
  { id: 3, nama: "Meja",   harga: 500000,   kategori: "furnitur" }
];

// Filter produk elektronik
const elektronik = produkList.filter(p => p.kategori === "elektronik");

// Hitung total harga
const totalHarga = produkList.reduce((total, p) => total + p.harga, 0);

// Ambil hanya nama produk
const namaList = produkList.map(p => p.nama);
// ["Laptop", "Mouse", "Meja"]

// Sort berdasarkan harga
produkList.sort((a, b) => a.harga - b.harga);

// Cari produk berdasarkan id
const produkDicari = produkList.find(p => p.id === 2);

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

console.log(sapa("Budi"));   // "Halo, Budi!"
console.log(sapa("Sari"));   // "Halo, Sari!"

console.log(tambah(3, 4));  // 7 — bekerja meskipun fungsi di bawah

function tambah(a, b) {
  return a + b;
}

// Fungsi disimpan di variabel
const kali = function(a, b) {
  return a * b;
};

console.log(kali(4, 5));  // 20

// Format: (parameter) => ekspresi atau { blok kode }

// Satu baris — return implicit
const kuadrat = (n) => n * n;
const salam = nama => `Halo, ${nama}!`;  // satu parameter, () opsional

// Multi baris — perlu return eksplisit
const hitungLuas = (panjang, lebar) => {
  const luas = panjang * lebar;
  return luas;
};

console.log(kuadrat(5));       // 25
console.log(salam("Budi"));    // "Halo, Budi!"
console.log(hitungLuas(4, 6)); // 24

// Default parameter — nilai jika tidak dikirim
function buat(nama, role = "member", aktif = true) {
  return { nama, role, aktif };
}

console.log(buat("Budi"));               // { nama: "Budi", role: "member", aktif: true }
console.log(buat("Sari", "admin"));      // { nama: "Sari", role: "admin", aktif: true }
console.log(buat("Tono", "guest", false));

// Rest parameter — kumpulkan argumen sisa ke array
function jumlahSemua(...angka) {
  return angka.reduce((total, n) => total + n, 0);
}

console.log(jumlahSemua(1, 2, 3));         // 6
console.log(jumlahSemua(10, 20, 30, 40));  // 100

// Fungsi bisa return nilai apapun
function cekGenap(n) {
  return n % 2 === 0;  // return boolean
}

function getUser(id) {
  return { id, nama: "Budi" };  // return object
}

// Tanpa return → function mengembalikan undefined
function cetakHalo() {
  console.log("Halo!");
  // tidak ada return
}

const hasil = cetakHalo();
console.log(hasil);  // undefined

const appNama = "Blog Kiki";  // variabel global

function tampilkanNama() {
  console.log(appNama);  // bisa akses variabel global
}

tampilkanNama();  // "Blog Kiki"

function hitungDiskon(harga) {
  const diskon = 0.1;        // hanya ada di dalam fungsi ini
  const hasil = harga * diskon;
  return hasil;
}

// console.log(diskon);  // ReferenceError: diskon tidak terdefinisi

{
  let temp = 100;
  const MAX = 200;
  console.log(temp);  // 100
}

// console.log(temp);  // ReferenceError
// console.log(MAX);   // ReferenceError

function buatCounter() {
  let count = 0;  // variabel di outer function

  return function() {
    count++;           // akses variabel dari outer function
    return count;
  };
}

const counter = buatCounter();
console.log(counter());  // 1
console.log(counter());  // 2
console.log(counter());  // 3

const counter2 = buatCounter();
console.log(counter2()); // 1 ← counter baru, independen

// Fungsi sebagai argumen (callback)
function prosesData(angka, transform) {
  return transform(angka);
}

const duaKali = n => n * 2;
const kuadrat = n => n ** 2;

console.log(prosesData(5, duaKali));  // 10
console.log(prosesData(5, kuadrat));  // 25

// Ini adalah dasar dari map, filter, reduce!
const angka = [1, 2, 3, 4, 5];

const digandakan = angka.map(n => n * 2);
console.log(digandakan);  // [2, 4, 6, 8, 10]

const genap = angka.filter(n => n % 2 === 0);
console.log(genap);       // [2, 4]

const total = angka.reduce((acc, n) => acc + n, 0);
console.log(total);       // 15

(function() {
  const rahasia = "tidak bisa diakses dari luar";
  console.log("IIFE berjalan!");
})();

// Versi arrow function
(() => {
  console.log("Arrow IIFE");
})();

const nilai = 78;

if (nilai >= 90) {
  console.log("Grade A — Sangat Baik");
} else if (nilai >= 80) {
  console.log("Grade B — Baik");
} else if (nilai >= 70) {
  console.log("Grade C — Cukup");
} else if (nilai >= 60) {
  console.log("Grade D — Kurang");
} else {
  console.log("Grade E — Gagal");
}
// Output: Grade C — Cukup

// Semua ini dianggap false dalam kondisi
if (0)         { } // false — angka 0
if ("")        { } // false — string kosong
if (null)      { } // false
if (undefined) { } // false
if (NaN)       { } // false
if (false)     { } // false

// Semua nilai lain dianggap truthy
if (1)         { console.log("truthy"); }  // true
if ("halo")    { console.log("truthy"); }  // true
if ([])        { console.log("truthy"); }  // true — array kosong!
if ({})        { console.log("truthy"); }  // true — object kosong!

const umur = 20;

// Format: kondisi ? nilaiJikaTrue : nilaiJikaFalse
const status = umur >= 18 ? "dewasa" : "anak-anak";
console.log(status);  // "dewasa"

// Cocok untuk assignment sederhana
const sambutan = nama ? `Halo, ${nama}!` : "Halo, tamu!";

// ?? — gunakan nilai kanan jika kiri null atau undefined
const nama = null;
const tampilan = nama ?? "Anonim";
console.log(tampilan);  // "Anonim"

// Berbeda dari || yang juga mengganti falsy (0, "")
const harga = 0;
console.log(harga || 100);   // 100 ← salah! 0 adalah harga valid
console.log(harga ?? 100);   // 0   ← benar!

// ?. — akses property tanpa error jika null/undefined
const user = null;
console.log(user?.nama);         // undefined (tidak error)
console.log(user?.alamat?.kota); // undefined (tidak error)

const hari = "Senin";

switch (hari) {
  case "Senin":
  case "Selasa":
  case "Rabu":
  case "Kamis":
  case "Jumat":
    console.log("Hari kerja");
    break;  // PENTING: tanpa break, akan lanjut ke case berikutnya
  case "Sabtu":
  case "Minggu":
    console.log("Akhir pekan");
    break;
  default:
    console.log("Hari tidak dikenal");
}

// for (inisialisasi; kondisi; increment)
for (let i = 0; i < 5; i++) {
  console.log(`Iterasi ke-${i}`);
}
// Iterasi ke-0, ke-1, ke-2, ke-3, ke-4

// Hitung mundur
for (let i = 10; i >= 1; i--) {
  console.log(i);
}

// Lompat 2
for (let i = 0; i <= 10; i += 2) {
  console.log(i);  // 0, 2, 4, 6, 8, 10
}

const buah = ["apel", "mangga", "jeruk"];

for (const item of buah) {
  console.log(item);
}
// apel, mangga, jeruk

// Dengan string
for (const huruf of "Hello") {
  console.log(huruf);  // H, e, l, l, o
}

const orang = { nama: "Budi", usia: 25, kota: "Jakarta" };

for (const key in orang) {
  console.log(`${key}: ${orang[key]}`);
}
// nama: Budi
// usia: 25
// kota: Jakarta

let angka = 1;

while (angka <= 5) {
  console.log(angka);
  angka++;
}
// 1, 2, 3, 4, 5

// Gunakan while saat tidak tahu jumlah iterasinya
let input = "";
while (input !== "keluar") {
  input = prompt("Ketik 'keluar' untuk berhenti:");
}