Belajar JavaScript

const nama = "Ari";       // tidak bisa re-assign
let poin = 0;             // bisa
poin += 10;

console.log(`${nama} punya ${poin} poin`);
console.log(typeof nama, typeof poin);  // string number

let teks = "42";
let angka = Number(teks);
console.log(teks + "5");   // "425" — string concat
console.log(angka + 5);    // 47 — number add

console.log(typeof null);         // "object" (bug!)
console.log(Array.isArray([1]));  // true
console.log(Boolean(0), Boolean(""));  // false false
console.log(Boolean("0"));        // true — string tidak kosong!

const umur = 17;
const nama = umur >= 17 ? "dewasa" : "anak";

// nullish vs or
const nol = 0;
console.log(nol || 10);   // 10 — 0 falsy
console.log(nol ?? 10);   // 0 — 0 bukan null/undefined

// optional chaining
const user = { profil: { kota: "Bandung" } };
console.log(user.profil?.kota);    // Bandung
console.log(user.alamat?.kota);    // undefined — tidak error

// strict equality
console.log("5" === 5);  // false
console.log(5 === 5);    // true

const nilai = 82;

if (nilai >= 90) console.log("A");
else if (nilai >= 80) console.log("B");
else console.log("C");

// truthy/falsy
console.log(Boolean([]));    // true — array kosong truthy!
console.log(Boolean("0"));   // true
console.log(Boolean(0));     // false

// switch
const hari = 3;
switch (hari) {
  case 1: console.log("Senin"); break;
  case 2: console.log("Selasa"); break;
  case 3: console.log("Rabu"); break;
  default: console.log("?");
}

// for klasik
for (let i = 1; i <= 5; i++) console.log(i);

// for-of untuk array
const buah = ["apel", "mangga", "jeruk"];
for (const b of buah) console.log(b);

// entries: indeks + elemen
for (const [i, b] of buah.entries()) console.log(`${i}: ${b}`);

// for-in untuk objek
const data = { nama: "Ari", umur: 17 };
for (const kunci in data) console.log(kunci, data[kunci]);

const nama = "Ari";
const umur = 17;
console.log(`Halo ${nama}, tahun depan ${umur + 1}`);

// multi-baris
const puisi = `Baris pertama
Baris kedua`;
console.log(puisi);

// method
console.log("  halo  ".trim());
console.log("a,b,c".split(","));
console.log("Belajar".toUpperCase());
console.log("5".padStart(3, "0"));   // 005
console.log("ab".repeat(3));         // ababab

console.log(0.1 + 0.2);           // 0.30000000000000004
console.log(0.1 + 0.2 === 0.3);   // false!
console.log(Math.abs(0.1 + 0.2 - 0.3) < Number.EPSILON);  // true

console.log(parseInt("42px"));      // 42
console.log(parseFloat("3.14m"));   // 3.14
console.log(Number("42"));          // 42

console.log(Math.floor(3.7), Math.ceil(3.2));  // 3 4
console.log((1234567).toLocaleString("id-ID")); // 1.234.567
console.log((3.14159).toFixed(2));  // "3.14" — string!

const unik1 = Symbol("id");
const unik2 = Symbol("id");
console.log(unik1 === unik2);  // false — selalu unik

// sebagai kunci yang aman dari tabrakan
const ID = Symbol("userId");
const user = { [ID]: 42, nama: "Ari" };
console.log(user[ID]);         // 42
console.log(Object.keys(user)); // ["nama"] — symbol tersembunyi

// well-known: iterator
const angka = {
  *[Symbol.iterator]() {
    yield 1; yield 2; yield 3;
  }
};
console.log([...angka]);  // [1, 2, 3]

// declaration — hoisted
function tambah(a, b) { return a + b; }

// arrow — satu ekspresi, return implisit
const kali = (a, b) => a * b;

// arrow dengan body
const gabung = (a, b) => {
  const hasil = `${a} ${b}`;
  return hasil;
};

// default + rest
const sapa = (nama = "Tamu") => `Halo ${nama}!`;
const rata = (...angka) => angka.reduce((a, b) => a + b, 0) / angka.length;

console.log(tambah(3, 5), kali(3, 5));
console.log(sapa(), sapa("Ari"));
console.log(rata(10, 20, 30));

// closure: penghitung
function buatPenghitung() {
  let hitung = 0;  // private — tertutup dalam closure
  return {
    naik: () => ++hitung,
    turun: () => --hitung,
    nilai: () => hitung,
  };
}

const c = buatPenghitung();
c.naik(); c.naik(); c.naik();
console.log(c.nilai());  // 3
console.log(c.hitung);    // undefined — private!

// block scope
if (true) {
  let dalam = "hanya di sini";
  var bocor = "keluar dari if";
}
console.log(bocor);       // "keluar dari if"
// console.log(dalam);    // ReferenceError

// higher-order + callback
function proses(data, format, tampilkan) {
  const hasil = format(data);
  tampilkan(hasil);
}

proses(
  [3, 1, 4, 1, 5],
  (d) => [...d].sort((a, b) => a - b),
  (h) => console.log("Hasil:", h)
);

// callback di sort dengan custom comparator
const siswa = [{ nama: "Budi", poin: 92 }, { nama: "Ari", poin: 85 }];
siswa.sort((a, b) => b.poin - a.poin);
console.log(siswa[0].nama);  // Budi

const angka = [3, 8, 1, 9, 4, 6, 7, 2, 5];

// map: transformasi
const dobel = angka.map(x => x * 2);
console.log(dobel);

// filter: saring
const besar = angka.filter(x => x > 5);
console.log(besar);

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

// chaining
const hasil = angka
  .filter(x => x % 2 === 0)
  .map(x => x * x)
  .reduce((a, b) => a + b, 0);
console.log(hasil);  // 4+64+16+36+4 = 124

// find, some, every
console.log(angka.find(x => x > 7));   // 8
console.log(angka.some(x => x > 8));   // true
console.log(angka.every(x => x > 0));  // true

// array destructuring
const [pertama, kedua, ...sisanya] = [1, 2, 3, 4, 5];
console.log(pertama, kedua, sisanya);  // 1 2 [3,4,5]

// object destructuring + rename + default
const { nama, umur: tahun = 0, kota = "Tidak ada" } = { nama: "Ari", umur: 17 };
console.log(nama, tahun, kota);  // Ari 17 "Tidak ada"

// swap
let a = 1, b = 2;
[a, b] = [b, a];
console.log(a, b);  // 2 1

// spread
const arr1 = [1, 2], arr2 = [3, 4];
console.log([...arr1, ...arr2]);  // [1,2,3,4]

const obj1 = { a: 1 }, obj2 = { b: 2 };
console.log({ ...obj1, ...obj2 });  // {a:1, b:2}

console.log(Math.max(...[3, 8, 1, 9]));  // 9

function bagi(a, b) {
  if (b === 0) throw new Error("Pembagi tidak boleh nol");
  return a / b;
}

try {
  console.log(bagi(10, 2));
  console.log(bagi(10, 0));
} catch (e) {
  console.log(`Gagal: ${e.message}`);
} finally {
  console.log("Selalu berjalan.");
}

// custom error
class ValidationError extends Error {
  constructor(nama) {
    super(`${nama} tidak valid`);
    this.name = "ValidationError";
  }
}

try { throw new ValidationError("harga"); }
catch (e) { console.log(e.name, e.message); }

// generator
function* fibonacci(n) {
  let a = 0, b = 1;
  for (let i = 0; i < n; i++) {
    yield a;
    [a, b] = [b, a + b];
  }
}

for (const f of fibonacci(8)) {
  console.log(f);  // 0 1 1 2 3 5 8 13
}

// rekursi
function faktorial(n) {
  if (n <= 1) return 1;         // kasus dasar
  return n * faktorial(n - 1);   // kasus rekursif
}
console.log(faktorial(5));  // 120

// manual: memanggil next()
const arr = ["a", "b", "c"];
const it = arr[Symbol.iterator]();
console.log(it.next());  // {value: "a", done: false}
console.log(it.next());  // {value: "b", done: false}
console.log(it.next());  // {value: "c", done: false}
console.log(it.next());  // {value: undefined, done: true}

// custom iterable
class Rentang {
  constructor(awal, akhir) { this.awal = awal; this.akhir = akhir; }
  *[Symbol.iterator]() {
    for (let i = this.awal; i <= this.akhir; i++) yield i;
  }
}

const r = new Rentang(1, 5);
console.log([...r]);           // [1,2,3,4,5]
for (const n of r) console.log(n);

const user = {
  nama: "Ari",
  umur: 17,
  sapa() { return `Halo ${this.nama}!`; },
  ["level_" + 1]: "gold",  // computed key
};

console.log(user.sapa());
console.log(user["umur"]);    // kurung siku
console.log(user.level_1);    // gold

// shorthand
const nama = "Budi", umur = 20;
const singkat = { nama, umur };
console.log(singkat);

const stok = { kopi: 12, teh: 8, susu: 5 };

console.log(Object.keys(stok));
console.log(Object.values(stok));
console.log(Object.entries(stok));

// entries + destructuring
for (const [produk, jumlah] of Object.entries(stok)) {
  console.log(`${produk}: ${jumlah}`);
}

// assign vs spread
const ekstra = { matcha: 3 };
const gabung1 = Object.assign({}, stok, ekstra);
const gabung2 = { ...stok, ...ekstra };
console.log(gabung2);

console.log(Object.hasOwn(stok, "kopi"));  // true

const induk = { sapa() { return "Halo!"; } };
const anak = Object.create(induk);
anak.nama = "Ari";

console.log(anak.nama);       // sendiri
console.log(anak.sapa());     // dari prototype
console.log(Object.getPrototypeOf(anak) === induk);  // true

// prototype chain
grandChild = Object.create(anak);
console.log(grandChild.sapa());  // naik 2 tingkat ke induk
console.log(grandChild.nama);     // naik 1 tingkat ke anak

class Siswa {
  #sandi;  // private field

  constructor(nama, poin = 0) {
    this.nama = nama;
    this.poin = poin;
    this.#sandi = "rahasia";
  }

  tambah(n) { this.poin += n; }

  get status() {
    return this.poin >= 70 ? "lulus" : "remedial";
  }

  set reset(v) { this.poin = v; }

  static bandingkan(a, b) {
    return a.poin > b.poin ? a.nama : b.nama;
  }
}

const ari = new Siswa("Ari", 50);
ari.tambah(25);
console.log(ari.status);  // lulus (dipanggil tanpa kurung!)

const budi = new Siswa("Budi", 80);
console.log(Siswa.bandingkan(ari, budi));  // Budi

class Pengguna {
  constructor(nama, email) {
    this.nama = nama;
    this.email = email;
  }
  info() { return `${this.nama} <${this.email}>`; }
}

class Admin extends Pengguna {
  constructor(nama, email, level) {
    super(nama, email);
    this.level = level;
  }
  info() {
    return `[L${this.level}] ${super.info()}`;
  }
}

const a = new Admin("Zaky", "ops@dev", 5);
console.log(a.info());
console.log(a instanceof Admin);     // true
console.log(a instanceof Pengguna);  // true

class Kalkulator {
  #riwayat = [];  // private field

  #simpan(operasi) {  // private method
    this.#riwayat.push(operasi);
  }

  tambah(a, b) {
    const hasil = a + b;
    this.#simpan(`tambah: ${hasil}`);
    return hasil;
  }

  get log() { return this.#riwayat; }
}

const k = new Kalkulator();
k.tambah(3, 5);
k.tambah(10, 20);
console.log(k.log);      // ["tambah: 8", "tambah: 30"]
// console.log(k.#riwayat);  // SyntaxError!

// mixin
const Loggable = { log() { console.log(this.nama); } };
class Item { constructor(nama) { this.nama = nama; } }
Object.assign(Item.prototype, Loggable);
new Item("test").log();

const m = new Map();
m.set("nama", "Ari");
m.set(42, "angka sebagai kunci");
m.set({ id: 1 }, "objek sebagai kunci");

console.log(m.get("nama"));
console.log(m.size);
for (const [k, v] of m) console.log(k, "->", v);

const s = new Set([1, 2, 2, 3, 3, 3]);
console.log(s);         // {1, 2, 3}
console.log(s.size);    // 3
console.log(s.has(2));  // true

// deduplikasi array
const duplikat = [1, 2, 2, 3, 3];
console.log([...new Set(duplikat)]);  // [1,2,3]

const sekarang = new Date();
console.log(sekarang.getFullYear(), sekarang.getMonth() + 1);

const lahir = new Date(2009, 2, 15);  // 15 Maret 2009 (bulan 2 = Maret!)
console.log(lahir.toLocaleDateString("id-ID"));

// timestamp
const mulai = Date.now();
// ... kerja berat ...
const selesai = Date.now();
console.log(`Durasi: ${selesai - mulai}ms`);

// selisih hari
const a = new Date("2026-01-01");
const b = new Date("2026-12-31");
console.log(Math.round((b - a) / 86400000));  // 364 hari

const data = {
  nama: "Ari",
  umur: 17,
  sandi: "rahasia",
  hobi: ["coding", "game"],
};

// stringify dengan replacer (sensor sandi)
const teks = JSON.stringify(data, (k, v) =>
  k === "sandi" ? "***" : v
);
console.log(teks);

// parse dengan reviver
const balik = JSON.parse('{"nama":"Budi","tanggal":"2026-01-15"}',
  (k, v) => k === "tanggal" ? new Date(v) : v
);
console.log(balik.tanggal.getFullYear());  // 2026

// format rapi
console.log(JSON.stringify(data, null, 2));

const arr = [1, 2, 3, 4, 5];
arr.push(6);           // [1,2,3,4,5,6]
arr.pop();             // [1,2,3,4,5]
arr.unshift(0);        // [0,1,2,3,4,5]
arr.shift();           // [1,2,3,4,5]

arr.splice(2, 1, 99);  // hapus indeks 2, sisip 99
console.log(arr);       // [1,2,99,4,5]
console.log(arr.slice(1, 3));  // [2,99]
console.log(arr.includes(99));  // true

// sort numerik
const angka = [10, 2, 1, 33, 5];
console.log(angka.sort());                 // [1,10,2,33,5] — string!
console.log([...angka].sort((a, b) => a - b));  // [1,2,5,10,33]

// sort objek
const siswa = [{ n: "Budi", p: 92 }, { n: "Ari", p: 85 }];
siswa.sort((a, b) => b.p - a.p);
console.log(siswa[0].n);  // Budi

// flat
console.log([[1, 2], [3, [4, 5]]].flat(2));  // [1,2,3,4,5]

// at
const d = [10, 20, 30];
console.log(d.at(-1));  // 30

// Array.from
console.log(Array.from("halo"));  // ["h","a","l","o"]

// dari string
console.log(Array.from("halo"));

// dari Map
const m = new Map([["a", 1], ["b", 2]]);
console.log([...m]);  // [["a",1],["b",2]]

// dari Set
console.log([...new Set([1, 2, 2, 3])]);  // [1,2,3]

// dari generator
function* range(n) {
  for (let i = 0; i < n; i++) yield i;
}
console.log([...range(5)]);  // [0,1,2,3,4]
console.log(Array.from(range(5), x => x * x));  // [0,1,4,9,16]

const teks = "Kontak: andi@kampus.com, budi@kantor.com, 08123456789";

// test: ada tidak
console.log(/d+/.test(teks));  // true

// match: semua angka
console.log(teks.match(/d+/g));

// match: email (sederhana)
console.log(teks.match(/w+@w+.w+/g));

// replace dengan flag g
console.log(teks.replace(/d+/g, "XXX"));

// exec: detail kecocokan
const pola = /(w+)@(w+)/;
const hasil = pola.exec(teks);
console.log(hasil[0], hasil[1], hasil[2]);  // andi@kampus andi kampus

// named group
const tanggal = "2026-10-10";
const m = tanggal.match(/(?<tahun>d{4})-(?<bulan>d{2})-(?<hari>d{2})/);
console.log(m.groups.tahun, m.groups.bulan);  // 2026 10

// replace dengan fungsi
const teks = "halo dunia belajar javascript";
const kapital = teks.replace(/w+/g, kata =>
  kata[0].toUpperCase() + kata.slice(1)
);
console.log(kapital);  // Halo Dunia Belajar Javascript

// lookbehind
console.log("Rp1000 Rp2000".match(/(?<=Rp)d+/g));  // ["1000","2000"]

console.log("1: mulai");

setTimeout(() => console.log("3: timer 0ms"), 0);
setTimeout(() => console.log("4: timer 100ms"), 100);

console.log("2: sinkron selesai");
// Urutan keluaran: 1, 2, 3, 4
// setTimeout 0 TIDAK berjalan seketika — menunggu stack kosong.

// Promise dasar
const ambilData = new Promise((resolve, reject) => {
  const sukses = true;
  if (sukses) resolve({ nama: "Ari", umur: 17 });
  else reject(new Error("gagal mengambil"));
});

ambilData
  .then(d => `${d.nama} (${d.umur})`)
  .then(teks => console.log(teks))
  .catch(e => console.error(e.message));

// Promise.all
const p1 = Promise.resolve(10);
const p2 = Promise.resolve(20);
Promise.all([p1, p2]).then(([a, b]) => console.log(a + b));  // 30

function buatPromise(ms, nilai) {
  return new Promise(resolve => setTimeout(() => resolve(nilai), ms));
}

async function main() {
  // berurutan
  const a = await buatPromise(100, "A");
  const b = await buatPromise(100, "B");
  console.log(a, b);  // A B (total 200ms)

  // paralel
  const [x, y] = await Promise.all([
    buatPromise(100, "X"),
    buatPromise(100, "Y"),
  ]);
  console.log(x, y);  // X Y (total 100ms)
}

main();