⚡ JavaScript untuk Pemula: Panduan Lengkap

// Cara 1: Buka browser (Chrome/Firefox), tekan F12
// Pilih tab "Console", lalu ketik:
console.log("Halo, dunia!");
// Output: Halo, dunia!

// Cara 2: Di dalam file HTML dengan tag <script>
// <script>
//   document.write("Hello from JavaScript!");
// </script>

// Cara 3: File eksternal (.js)
// Buat file: app.js
// Isi: console.log("Hello!");
// Panggil di HTML: <script src="app.js"></script>

// Cara 4: Dengan Node.js (install dari https://nodejs.org)
// Simpan kode di file, jalankan: node app.js
console.log("JavaScript berjalan!");
// Output: JavaScript berjalan!

// Contoh interaktif pertama
let nama = "Budi";
console.log(`Selamat datang, ${nama}!`);
// Output: Selamat datang, Budi!

// 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

// 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

// 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

// 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!)

// 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

// 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

// 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: 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}

// 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"

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]

// 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}`);
}

// 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

// 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

// 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 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

// 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;
  }
}