Ternary Operator

if-else versi ringkas

Ternary operator adalah cara ringkas menulis percabangan sederhana dalam satu baris. Polanya: kondisi ? nilaiJikaTrue : nilaiJikaFalse.

let umur = 17;
let status = umur >= 17 ? "dewasa" : "anak-anak";
console.log(status); // "dewasa"

Bandingkan dengan versi if-else yang butuh lima baris untuk hal yang sama. Untuk kasus sederhana, ternary jauh lebih ringkas.

Kapan cocok dipakai?

Ternary ideal untuk memilih antara dua nilai, terutama saat hasilnya langsung disimpan ke variabel atau ditampilkan:

let nama = "Rizky";
let sapaan = `Halo, ${nama ? nama : "tamu"}`;
console.log(sapaan);

Pola ini sangat umum di kode nyata, misalnya menentukan teks tombol, class CSS, atau pesan status.

Kapan jangan dipakai?

Jangan pakai ternary bertingkat (nested). Ini contoh yang harus dihindari:

// JANGAN: sulit dibaca
let hasil = nilai >= 90 ? "A" : nilai >= 75 ? "B" : nilai >= 60 ? "C" : "D";

Untuk logika bertingkat seperti itu, if-else atau switch jauh lebih jelas. Aturan praktisnya: satu level ternary boleh, dua level sudah bau, tiga level dilarang.

Catatan teknis: Ternary adalah expression (menghasilkan nilai), sedangkan if-else adalah statement. Artinya ternary bisa dipakai di dalam template literal atau sebagai argumen fungsi, tempat di mana if-else tidak bisa dipakai.

Alternatif rapi: object lookup

Untuk pilihan banyak yang sederhana, object lookup sering lebih rapi daripada ternary bertingkat atau switch:

// daripada ternary bertingkat...
let kode = 2;
let hari = kode === 1 ? "Senin" : kode === 2 ? "Selasa" : "Tidak tahu";

// ...pakai object lookup
let namaHari = { 1: "Senin", 2: "Selasa", 3: "Rabu" };
console.log(namaHari[kode] || "Tidak tahu"); // "Selasa"
console.log(namaHari[9] || "Tidak tahu");    // "Tidak tahu"

Pola namaHari[kode] || "default" menangani nilai tak dikenal dengan elegan. Ternary tetap juaranya untuk pilihan dua nilai, tapi untuk tiga atau lebih, pertimbangkan object lookup atau switch.

Ternary di JSX dan template

Di framework seperti React, ternary adalah cara standar render kondisional karena if-else tidak bisa dipakai di dalam JSX:

// pola yang akan sering kamu temui di React
let tombol = isLogin
  ? "<button>Keluar</button>"
  : "<button>Masuk</button>";

Aturan satu level tetap berlaku. Kalau kondisinya bercabang banyak, pindahkan logikanya ke fungsi helper yang memakai if-else biasa, lalu panggil fungsi itu di dalam ternary. UI tetap ringkas, logika tetap jelas.

Kesimpulan

Ternary adalah alat presisi untuk kondisi sederhana. Pakai untuk memilih dua nilai, hindari untuk logika kompleks. Keterbacaan selalu menang atas keringkasan.