Ekspresi dan Operasi

Kenapa ini penting

Ekspresi adalah potongan kode yang menghasilkan sebuah nilai. 2 + 3 adalah ekspresi yang menghasilkan 5. umur >= 17 adalah ekspresi yang menghasilkan true atau false. Seluruh logika program, mulai dari menghitung total belanja, mengecek apakah pengguna sudah login, sampai memilih harga diskon, dibangun dari ekspresi dan operator. JavaScript punya beberapa operator yang perilakunya mengejutkan bagi pemula, terutama == yang suka mengonversi tipe diam-diam dan || yang menganggap angka 0 sebagai "tidak ada". Modul ini membekalimu dengan versi yang aman: ===, ??, dan ?..

Konsep inti

Operator aritmatika

Urutan operasi mengikuti matematika: pangkat dulu, lalu kali/bagi/modulus, lalu tambah/kurang. Kalau ragu, pakai kurung ( ).

Jebakan + dengan string: kalau salah satu operand adalah string, + menggabungkan teks. "5" + 3 menghasilkan "53". Operator lain (-, *, /) justru mengubah string ke number: "5" - 3 menghasilkan 2. Ketidakkonsistenan ini alasan kenapa input harus dikonversi secara eksplisit.

Assignment gabungan: x += 5 sama dengan x = x + 5. Ada juga -=, *=, /=, %=, **=.

Operator perbandingan: == vs ===

== melakukan type coercion (konversi diam-diam) sebelum membandingkan, sehingga hasilnya sering tidak terduga:

Aturan praktis: selalu pakai === dan !==. Satu-satunya pemakaian == yang kadang dianggap wajar adalah x == null untuk mengecek null atau undefined sekaligus, tapi operator ?? biasanya lebih jelas untuk kasus itu.

Operator logika

Dua sifat penting:

1. Short-circuit: && berhenti di nilai falsy pertama, || berhenti di nilai truthy pertama. Sisi kanan tidak dievaluasi kalau tidak perlu.
2. Mengembalikan salah satu operand, bukan selalu boolean. "Budi" || "Tamu" menghasilkan "Budi". 0 || 10 menghasilkan 10.

(Truthy dan falsy dibahas lengkap di modul berikutnya. Singkatnya, nilai falsy adalah false, 0, "", null, undefined, NaN, dan sejenisnya.)

Ternary: if-else dalam satu ekspresi

kondisi ? nilaiJikaBenar : nilaiJikaSalah

Cocok untuk memilih satu dari dua nilai. Contoh: const status = umur >= 17 ? "dewasa" : "anak". Jangan disusun bertingkat terlalu dalam karena sulit dibaca.

Nullish coalescing ??

a ?? b menghasilkan b hanya kalau a adalah null atau undefined. Bedanya dengan ||:

Gunakan ?? untuk nilai default ketika 0, "", atau false adalah nilai yang sah. Contohnya stok 0, diskon 0, atau volume 0.

Optional chaining ?.

Mengakses properti dari null atau undefined menghasilkan error: TypeError: Cannot read properties of undefined. Operator ?. menghentikan akses dengan aman dan menghasilkan undefined:

• user?.alamat?.kota untuk properti.
• daftar?.[0] untuk index array.
• obj.method?.() untuk memanggil method yang belum tentu ada.

Gabungan yang sering dipakai: user?.alamat?.kota ?? "Kota tidak diketahui".

Contoh kode

// Aritmatika
console.log(7 / 2, 7 % 2, 2 ** 10);  // → 3.5 1 1024
console.log(2 + 3 * 4, (2 + 3) * 4); // → 14 20

// Jebakan string
console.log("5" + 3);   // → 53  (string)
console.log("5" - 3);   // → 2   (number)
console.log("5" * "2"); // → 10
console.log(1 + 2 + "3"); // → 33  (1+2=3 dulu, lalu digabung "3")
console.log("1" + 2 + 3); // → 123

// Assignment gabungan dan increment
let poin = 10;
poin += 5;   // 15
poin *= 2;   // 30
poin++;      // 31
console.log(poin); // → 31

// == vs ===
console.log(5 == "5", 5 === "5");             // → true false
console.log(0 == false, 0 === false);         // → true false
console.log(null == undefined, null === undefined); // → true false

// Logika dan short-circuit
const login = true;
const admin = false;
console.log(login && admin);   // → false
console.log(login || admin);   // → true
console.log(!login);           // → false
console.log("Budi" || "Tamu"); // → Budi
console.log("" || "Tamu");     // → Tamu
console.log(login && "Selamat datang"); // → Selamat datang

Ternary, ??, dan ?.:

// Ternary
const nilai = 72;
const hasil = nilai >= 75 ? "Lulus" : "Remedial";
console.log(hasil); // → Remedial

// ?? vs ||
const stok = 0;
console.log(stok || "Tidak tersedia"); // → Tidak tersedia (salah! stok 0 itu sah)
console.log(stok ?? "Tidak tersedia"); // → 0 (benar)

const pengaturan = { volume: 0, tema: null };
const volume = pengaturan.volume ?? 50;
const tema = pengaturan.tema ?? "terang";
console.log(volume, tema); // → 0 terang

// Optional chaining
const user = { nama: "Dina", alamat: null };
// console.log(user.alamat.kota); // → TypeError: Cannot read properties of null (reading 'kota')
console.log(user.alamat?.kota);                  // → undefined
console.log(user.alamat?.kota ?? "Belum diisi"); // → Belum diisi

const pesanan = { item: [{ nama: "Kopi" }] };
console.log(pesanan.item?.[0]?.nama);  // → Kopi
console.log(pesanan.item?.[5]?.nama);  // → undefined
console.log(user.sapa?.());            // → undefined (method tidak ada, tidak error)

Kesalahan umum

1. Memakai == alih-alih ===. "0" == false bernilai true, padahal jelas berbeda. Biasakan === di mana-mana.
2. Menjumlahkan input tanpa konversi. "10" + 5 menghasilkan "105". Konversi dulu dengan Number().
3. Memakai || untuk default ketika 0 atau string kosong itu sah. Gunakan ??.
4. Menyusun ternary bertingkat-tingkat. a ? b : c ? d : e ? f : g sulit dibaca. Untuk lebih dari dua pilihan, pakai if/else atau switch.
5. Menaburkan ?. di mana-mana. Pakai hanya untuk data yang memang boleh tidak ada. Kalau sebuah data wajib ada, lebih baik error muncul sejak awal supaya bug cepat ketahuan.

Latihan

1. Mudah, Hitung luas dan keliling lingkaran berjari-jari 7 (pakai Math.PI), lalu tampilkan dengan 2 angka di belakang koma.
2. Sedang, Buat ekspresi yang menentukan apakah sebuah tahun adalah tahun kabisat: habis dibagi 4 dan tidak habis dibagi 100, atau habis dibagi 400. Uji dengan 2024, 1900, 2000, dan 2026.
3. Menantang, Diberikan const data = { profil: { nama: "Eko", diskon: 0 } } dan const kosong = {}. Buat function infoDiskon(obj) yang mengembalikan "Eko dapat diskon 0%" untuk data dan "Tamu dapat diskon 5%" untuk kosong. Gunakan ?. dan ??.

const r = 7;
const luas = Math.PI * r ** 2;
const keliling = 2 * Math.PI * r;
console.log(luas.toFixed(2), keliling.toFixed(2)); // → 153.94 43.98

for (const tahun of [2024, 1900, 2000, 2026]) {
  const kabisat = (tahun % 4 === 0 && tahun % 100 !== 0) || tahun % 400 === 0;
  console.log(tahun, kabisat);
}
// → 2024 true
// → 1900 false
// → 2000 true
// → 2026 false

function infoDiskon(obj) {
  const nama = obj?.profil?.nama ?? "Tamu";
  const diskon = obj?.profil?.diskon ?? 5;
  return `${nama} dapat diskon ${diskon}%`;
}
const data = { profil: { nama: "Eko", diskon: 0 } };
const kosong = {};
console.log(infoDiskon(data));   // → Eko dapat diskon 0%
console.log(infoDiskon(kosong)); // → Tamu dapat diskon 5%

Ringkasan

• Ekspresi menghasilkan nilai. Operator aritmatika: + - * / % **. Waspadai + yang menggabungkan string.
• Selalu pakai === / !==. == melakukan konversi tipe diam-diam.
• &&, ||, ! bersifat short-circuit dan mengembalikan salah satu operand.
• Ternary k ? a : b memilih satu dari dua nilai dalam satu ekspresi.
• ?? memberi default hanya untuk null/undefined. ?. mengakses properti dengan aman.