Operators #

let a: number = 20;
let b: number = 6;

console.log(a + b);  // 26  — addition
console.log(a - b);  // 14  — subtraction
console.log(a * b);  // 120 — multiplication
console.log(a / b);  // 3.3333... — division (always float in JS/TS)
console.log(a % b);  // 2   — modulus (remainder)
console.log(a ** b); // 64_000_000 — exponent (power)

// Increment and decrement
let counter = 0;
counter++;  // Post-increment: use the value first, then increment
++counter;  // Pre-increment: increment first, then use the value
counter--;  // Post-decrement
--counter;  // Pre-decrement

// ANTI-PATTERN: Large numbers without separators — hard to read
const batasTransaksi = 50000000;
const jarakBumi = 149600000000;

// CORRECT: Use underscores as thousands separators
const batasTransaksi2 = 50_000_000;     // 50 million
const jarakBumi2     = 149_600_000_000; // 149.6 billion meters
const satu_kb        = 1_024;
const rgb_merah      = 0xFF_00_00;      // Works in hex too

// Division by zero — no error, produces Infinity or NaN
console.log(10 / 0);    // Infinity
console.log(-10 / 0);   // -Infinity
console.log(0 / 0);     // NaN

// NaN (Not a Number) is a number in TypeScript — a source of subtle bugs
const hasil: number = NaN;        // ✓ No compilation error
console.log(typeof NaN);          // "number" — confusing, but that's the fact
console.log(NaN === NaN);         // false — NaN isn't equal to itself!

// CORRECT: Check NaN with isNaN() or Number.isNaN()
const inputPengguna = parseFloat("bukan-angka");
if (Number.isNaN(inputPengguna)) {
  console.log("Input bukan angka yang valid");
}

let skor: number = 100;

skor += 10;  // skor = skor + 10  → 110
skor -= 5;   // skor = skor - 5   → 105
skor *= 2;   // skor = skor * 2   → 210
skor /= 3;   // skor = skor / 3   → 70
skor %= 8;   // skor = skor % 8   → 6
skor **= 2;  // skor = skor ** 2  → 36

// ??= : Assign only if the current value is null or undefined
let konfigurasi: string | null = null;
konfigurasi ??= "nilai-default";  // konfigurasi = "nilai-default"
konfigurasi ??= "nilai-lain";     // Unchanged — konfigurasi already has a value

// ||= : Assign if the current value is falsy (null, undefined, 0, "", false)
let nama: string = "";
nama ||= "Anonim";  // nama = "Anonim" because "" is falsy

// &&= : Assign only if the current value is truthy
let pesan: string = "Halo";
pesan &&= pesan.toUpperCase();  // pesan = "HALO" because "Halo" is truthy

let pesanKosong: string = "";
pesanKosong &&= pesanKosong.toUpperCase(); // Unchanged — "" is falsy

// == (loose equality) — performs type coercion before comparing
console.log(1 == "1");    // true  — the string "1" is converted to the number 1
console.log(0 == false);  // true  — false is converted to 0
console.log(null == undefined); // true — special case

// === (strict equality) — compares value AND type, no coercion
console.log(1 === "1");   // false — different types, immediately false
console.log(0 === false); // false — different types
console.log(null === undefined); // false — different types

// TypeScript prevents comparisons that are clearly nonsensical
const angka: number = 42;
// if (angka == "42") {} // ✗ Error: This comparison appears to be unintentional...

// But for union types, == can still slip through — still use ===
let nilai: number | null = null;
if (nilai == null) {  // ✓ Old trick: == null catches both null AND undefined
  console.log("Nilai kosong");
}
// Equivalent to: if (nilai === null || nilai === undefined)

// && (AND) — returns the left operand if falsy, the right operand if the left is truthy
console.log(true && "halo");   // "halo"  — left truthy, return the right
console.log(false && "halo");  // false   — left falsy, return the left
console.log(0 && "halo");      // 0       — 0 falsy, return the left
console.log("ada" && "halo");  // "halo"  — left truthy, return the right

// || (OR) — returns the left operand if truthy, the right operand if the left is falsy
console.log(true || "fallback");   // true      — left truthy, return the left
console.log(false || "fallback");  // "fallback" — left falsy, return the right
console.log(0 || "fallback");      // "fallback" — 0 falsy, return the right
console.log("ada" || "fallback");  // "ada"     — left truthy, return the left

// The crucial difference between || and ??
const stok = 0;

// ANTI-PATTERN: Using || for number fallbacks
const tampilStok1 = stok || "Tidak ada stok";
// "Tidak ada stok" — WRONG! 0 is valid stock, not "no value"

// CORRECT: Using ?? for null/undefined-only fallbacks
const tampilStok2 = stok ?? "Data tidak tersedia";
// 0 — CORRECT! 0 isn't null/undefined, so the original value is kept

// Real example: configuration with default values
interface Konfigurasi {
  timeout?: number;  // might be undefined
  retries?: number;
}

function buatKoneksi(konfig: Konfigurasi): void {
  const timeout = konfig.timeout ?? 5000;   // Default 5 seconds
  const retries = konfig.retries ?? 3;      // Default 3 times

  // With ||, timeout = 0 would be replaced by 5000 — a subtle bug!
  // With ??, timeout = 0 stays 0 — the correct behavior
}

interface Profil {
  pengguna?: {
    alamat?: {
      kota?: string;
    };
  };
}

const data: Profil = {};

// ANTI-PATTERN: Verbose manual checks
const kota1 =
  data.pengguna !== undefined &&
  data.pengguna.alamat !== undefined &&
  data.pengguna.alamat.kota !== undefined
    ? data.pengguna.alamat.kota
    : undefined;

// CORRECT: Optional chaining — concise and safe
const kota2 = data.pengguna?.alamat?.kota; // undefined — no crash

// Optional chaining also works for function calls
const panjangKota = data.pengguna?.alamat?.kota?.length; // undefined

// And for array element access
const items: string[] | undefined = undefined;
const item = items?.[0]; // undefined — no crash

function prosesNilai(nilai: string | number | boolean | null): string {
  // typeof works for primitive types
  if (typeof nilai === "string") {
    return nilai.toUpperCase();   // TypeScript knows: nilai is a string here
  }
  if (typeof nilai === "number") {
    return nilai.toFixed(2);      // TypeScript knows: nilai is a number here
  }
  if (typeof nilai === "boolean") {
    return nilai ? "Ya" : "Tidak"; // TypeScript knows: nilai is a boolean
  }
  return "Nilai kosong"; // TypeScript knows: nilai is null here
}

// The typeof result table for common types
// typeof "teks"     → "string"
// typeof 42         → "number"
// typeof true       → "boolean"
// typeof undefined  → "undefined"
// typeof {}         → "object"
// typeof []         → "object"  ← trap! Arrays are "object"
// typeof null       → "object"  ← a historical JavaScript bug
// typeof function(){} → "function"

class HewanPeliharaan {
  constructor(public nama: string) {}
}

class Kucing extends HewanPeliharaan {
  mengeong(): void { console.log("Meow!"); }
}

class Anjing extends HewanPeliharaan {
  menggonggong(): void { console.log("Woof!"); }
}

function suaraHewan(hewan: Kucing | Anjing): void {
  // instanceof for class narrowing
  if (hewan instanceof Kucing) {
    hewan.mengeong();      // TypeScript knows: hewan is a Kucing here
  } else {
    hewan.menggonggong();  // TypeScript knows: hewan is an Anjing here
  }
}

// instanceof is also useful for error handling
try {
  JSON.parse("invalid");
} catch (error) {
  if (error instanceof SyntaxError) {
    console.log("JSON tidak valid:", error.message);
  } else if (error instanceof Error) {
    console.log("Error lain:", error.message);
  }
}

interface KuciPersegi {
  tipe: "persegi";
  sisi: number;
}

interface KuciiLingkaran {
  tipe: "lingkaran";
  jariJari: number;
}

type Bentuk = KuciPersegi | KuciiLingkaran;

function hitungLuas(bentuk: Bentuk): number {
  // Narrowing with 'in' — check for the existence of a specific property
  if ("sisi" in bentuk) {
    return bentuk.sisi ** 2; // TypeScript knows: bentuk is a KuciPersegi
  }
  return Math.PI * bentuk.jariJari ** 2; // TypeScript knows: bentuk is a KuciiLingkaran
}

const usia: number = 17;

// Simple ternary — TypeScript infers the string type
const status = usia >= 18 ? "Dewasa" : "Belum dewasa";
// Type of status: string

// Ternary with different types — TypeScript creates a union
const nilai = usia >= 18 ? 100 : null;
// Type of nilai: number | null

// ANTI-PATTERN: Hard-to-read nested ternaries
const label = usia < 13 ? "Anak" : usia < 18 ? "Remaja" : usia < 60 ? "Dewasa" : "Lansia";
// Hard to read, hard to debug

// CORRECT: Use a function or if-else for multi-level conditions
function kategorikanUsia(usia: number): string {
  if (usia < 13) return "Anak";
  if (usia < 18) return "Remaja";
  if (usia < 60) return "Dewasa";
  return "Lansia";
}

const a: number = 5;  // Binary: 0000 0101
const b: number = 3;  // Binary: 0000 0011

console.log(a & b);   // AND: 0000 0001 = 1
console.log(a | b);   // OR:  0000 0111 = 7
console.log(a ^ b);   // XOR: 0000 0110 = 6
console.log(~a);       // NOT: 1111 1010 = -6 (two's complement)
console.log(a << 1);  // Left shift:  0000 1010 = 10 (× 2)
console.log(a >> 1);  // Right shift: 0000 0010 = 2  (÷ 2)
console.log(a >>> 1); // Unsigned right shift: 2 (same for positive numbers)

// Permission flags pattern — each bit represents one permission
const IZIN_BACA   = 0b0001; // 1
const IZIN_TULIS  = 0b0010; // 2
const IZIN_HAPUS  = 0b0100; // 4
const IZIN_ADMIN  = 0b1000; // 8

// Combine permissions with OR
const izinEditor = IZIN_BACA | IZIN_TULIS;         // 0011 = 3
const izinAdmin  = IZIN_BACA | IZIN_TULIS | IZIN_HAPUS | IZIN_ADMIN; // 1111 = 15

// Check permissions with AND
function punyaIzin(izinPengguna: number, izinDicek: number): boolean {
  return (izinPengguna & izinDicek) === izinDicek;
}

console.log(punyaIzin(izinEditor, IZIN_BACA));   // true
console.log(punyaIzin(izinEditor, IZIN_HAPUS));  // false
console.log(punyaIzin(izinAdmin, IZIN_ADMIN));   // true

// Legitimate case: narrowing a type known to be more specific
const inputElemen = document.getElementById("nama") as HTMLInputElement;
console.log(inputElemen.value); // ✓ TypeScript knows this is HTMLInputElement, not HTMLElement

// ANTI-PATTERN: Misusing as to force an incompatible type
const angka = "bukan angka" as unknown as number;
// Two as's: first to unknown (passes), then to number — this is "forcing" an assertion
// No compilation error, but the logic is totally wrong

type PaletWarna = {
  [kunci: string]: string | [number, number, number];
};

// With a regular type annotation — the specific type is lost
const palet1: PaletWarna = {
  merah: [255, 0, 0],
  hijau: "#00FF00",
};
// palet1.merah — type: string | [number, number, number]
// Can't use .length on the tuple directly

// With satisfies — the specific type is preserved
const palet2 = {
  merah: [255, 0, 0],
  hijau: "#00FF00",
} satisfies PaletWarna;
// palet2.merah — type: [number, number, number] — TypeScript knows this is a tuple!
// palet2.hijau — type: string — TypeScript knows this is a string!
palet2.merah[0]; // ✓ Access tuple elements directly
palet2.hijau.toUpperCase(); // ✓ String methods directly

const konfigurasi = {
  host: "localhost",
  port: 5432,
  ssl: false,
};

// typeof at the type level — extract the type from a value
type TipeKonfigurasi = typeof konfigurasi;
// { host: string; port: number; ssl: boolean }

// keyof — extract the union of all keys of a type
type KunciKonfigurasi = keyof TipeKonfigurasi;
// "host" | "port" | "ssl"

// A very useful combination
function ambilKonfigurasi<K extends keyof typeof konfigurasi>(
  kunci: K
): typeof konfigurasi[K] {
  return konfigurasi[kunci];
}

const host = ambilKonfigurasi("host"); // Type: string
const port = ambilKonfigurasi("port"); // Type: number
// ambilKonfigurasi("invalid");         // ✗ Error — key doesn't exist