Operator Ternary

Operator Ternary ❓

Operator ternary adalah cara singkat untuk menulis kondisi if...else dalam satu baris. Sangat berguna untuk penugasan nilai berdasarkan kondisi sederhana.

Sintaks Operator Ternary

kondisi ? nilaiJikaTrue : nilaiJikaFalse

let umur = 20;

// Cara panjang dengan if...else
let status;
if (umur >= 18) {
  status = 'Dewasa';
} else {
  status = 'Anak-anak';
}

// Cara singkat dengan ternary
let status = umur >= 18 ? 'Dewasa' : 'Anak-anak';
console.log(status); // "Dewasa"

Contoh Penggunaan Ternary

// Menentukan greeting berdasarkan waktu
let jam = new Date().getHours();
let greeting = jam < 12 ? 'Selamat Pagi' : 'Selamat Siang';

// Menentukan teks tombol
let sedangMuat = true;
let labelTombol = sedangMuat ? 'Memuat...' : 'Kirim';

// Menentukan class CSS
let aktif = true;
let kelas = aktif ? 'tombol-aktif' : 'tombol-nonaktif';

// Dalam template literal
let jumlah = 5;
console.log(`Ada ${jumlah} ${jumlah === 1 ? 'item' : 'items'} dalam keranjang`);
// "Ada 5 items dalam keranjang"

Ternary Bersarang

Bisa digunakan untuk beberapa kondisi, tapi jangan terlalu dalam:

let nilai = 75;

// Bisa dibaca jika diformat dengan rapi
let grade = nilai >= 90 ? 'A'
           : nilai >= 80 ? 'B'
           : nilai >= 70 ? 'C'
           : nilai >= 60 ? 'D'
           : 'F';

console.log(grade); // "C"

Jika lebih dari 2-3 kondisi bersarang, lebih baik kembali ke if...else if untuk keterbacaan.

Kapan Gunakan Ternary vs if...else

// ✅ Tepat: penugasan nilai sederhana
const pesan = berhasil ? 'Sukses!' : 'Gagal!';

// ✅ Tepat: dalam string
console.log(`Selamat ${umur >= 18 ? 'datang, dewasa' : 'datang, muda'}!`);

// ✅ Tepat: nilai prop/atribut
const warna = isError ? 'red' : 'green';

// ❌ Tidak tepat: terlalu banyak aksi
kondisi
  ? (lakukan_a(), lakukan_b())
  : (lakukan_c(), lakukan_d());
// Lebih baik pakai if...else untuk kasus ini

Perbandingan Ketiga Cara Kondisi

💡 Tips: Gunakan ternary hanya untuk kondisi satu lapis yang sederhana — ketika nilainya langsung ditugaskan ke variabel atau digunakan dalam ekspresi. Jika kondisinya mengandung beberapa baris aksi atau logika yang kompleks, gunakan if...else biasa agar kode tetap mudah dibaca. ✨