Operator Ternary Adalah: Cara Menyingkat If-Else di JavaScript (+ Contoh)

Operator ternary adalah cara ringkas menulis percabangan if-else hanya dalam satu baris di JavaScript, memakai sintaks kondisi ? nilaiJikaBenar : nilaiJikaSalah. Bayangkan seorang satpam di pintu masuk yang cuma punya satu pertanyaan: “Sudah 18 tahun?” Kalau jawabannya ya, kamu boleh masuk; kalau tidak, kamu ditolak. Operator ternary bekerja persis seperti itu, ia mengecek satu kondisi, lalu memilih salah satu dari dua kemungkinan hasil. Karena bentuknya melibatkan tiga bagian (kondisi, hasil-benar, dan hasil-salah), operator ini disebut ternary (dari kata “ter” yang berarti tiga).

Di panduan ini kamu akan belajar operator ternary dari nol: cara membaca sintaksnya, kenapa ia bisa menggantikan if-else dalam banyak kasus, perbedaannya dengan if-else biasa, kapan sebaiknya dipakai dan kapan justru dihindari, sampai contoh-contoh praktis yang benar-benar sering muncul di proyek nyata (termasuk di React). Semua contoh memakai istilah dan komentar berbahasa Indonesia supaya gampang dicerna.

Apa Itu Operator Ternary?

Operator ternary adalah satu-satunya operator di JavaScript yang membutuhkan tiga operand (tiga bagian). Struktur lengkapnya seperti ini:

kondisi ? nilaiJikaBenar : nilaiJikaSalah

Cara membacanya: “Apakah kondisi bernilai true? Kalau ya, pakai nilai setelah tanda ?. Kalau tidak, pakai nilai setelah tanda :.” Tanda tanya (?) dan titik dua (:) adalah dua penanda wajib yang memisahkan ketiga bagian tadi.

Mari lihat contoh paling sederhana:

const umur = 20

// Ternary: satu baris menggantikan if-else
const status = umur >= 18 ? 'Dewasa' : 'Anak-anak'

console.log(status) // 'Dewasa'

Karena umur >= 18 bernilai true (20 memang lebih besar dari 18), maka status diisi dengan 'Dewasa'. Kalau umur misalnya 15, kondisinya jadi false dan status akan berisi 'Anak-anak'. Konsep kondisi seperti ini adalah inti dari percabangan di JavaScript, kamu bisa mempelajarinya lebih dalam lewat pelajaran kondisi interaktif di Hyper Sheets yang bisa langsung dikerjakan di browser.

Ternary Sebagai Pengganti If-Else

Untuk benar-benar paham kekuatan ternary, bandingkan langsung dengan if-else yang menghasilkan hal yang sama. Perhatikan versi if-else yang panjang berikut:

const nilai = 85
let keterangan

// Versi if-else, 6 baris
if (nilai >= 70) {
  keterangan = 'Lulus'
} else {
  keterangan = 'Remedial'
}

console.log(keterangan) // 'Lulus'

Sekarang lihat versi ternary yang melakukan hal persis sama:

const nilai = 85

// Versi ternary, 1 baris
const keterangan = nilai >= 70 ? 'Lulus' : 'Remedial'

console.log(keterangan) // 'Lulus'

Enam baris menyusut jadi satu, dan kamu bahkan bisa langsung memakai const (bukan let) karena nilainya ditentukan sekali saat itu juga. Inilah kegunaan utama ternary: memilih satu dari dua nilai untuk disimpan ke dalam sebuah variabel. Kalau kamu masih baru dengan if-else sendiri, ada baiknya mengulas dulu dasar JavaScript untuk pemula supaya fondasi percabanganmu kuat sebelum menyingkatnya dengan ternary.

Coba Sendiri: Evaluator Ternary Interaktif

Teori lebih gampang menempel kalau kamu melihatnya bergerak. Geser nilai atau ubah status login di bawah, lalu perhatikan bagaimana kondisi berubah menjadi true/false dan cabang mana yang akhirnya dipilih:

Coba Sendiri

Nilai UjianStatus Login

Nilai75

const status = nilai >= 70 → true

?

Jika true

'Lulus'

← cabang ini yang jalan

Jika false (:)

'Remedial'

status berisi"Lulus"

Perhatikan polanya: hanya satu cabang yang pernah jalan dalam satu waktu, persis seperti if-else. Kalau kondisinya true, cabang setelah ? yang dipakai; kalau false, cabang setelah : yang dipakai.

Perbedaan Operator Ternary dan If-Else

Meskipun keduanya bisa saling menggantikan dalam banyak kasus, ada perbedaan penting yang menentukan kapan sebaiknya memakai yang mana. Inilah pertanyaan “perbedaan ternary dan if-else” yang paling sering dicari:

Aspek	Operator Ternary	If-Else
Bentuk	kondisi ? a : b (satu baris)	Blok if { } else { } (banyak baris)
Menghasilkan nilai?	Ya, bisa langsung di-assign	Tidak, hanya menjalankan blok kode
Cocok untuk	Memilih satu dari dua nilai	Menjalankan beberapa baris aksi
Bisa dipakai di JSX/template?	Ya	Tidak (harus di luar JSX)
Keterbacaan saat rumit	Cepat berantakan	Tetap jelas

Poin paling teknis di tabel di atas adalah baris “menghasilkan nilai”. Ternary adalah ekspresi, ia menghasilkan sebuah nilai yang bisa langsung dipakai. Sedangkan if-else adalah statement, ia hanya menjalankan blok kode dan tidak menghasilkan nilai apa pun. Itulah sebabnya kamu bisa menulis const x = a ? b : c, tapi tidak bisa menulis const x = if (a) {...}.

// BISA, ternary adalah ekspresi
const pesan = sudahLogin ? 'Selamat datang' : 'Silakan masuk'

// TIDAK BISA, if adalah statement, bukan nilai
// const pesan = if (sudahLogin) { 'Selamat datang' } // SyntaxError!

Ternary Bersarang (Nested Ternary)

Kadang kamu butuh lebih dari dua kemungkinan. Ternary bisa disusun bertingkat, tapi hati-hati, ini pisau bermata dua. Contoh mengubah angka nilai menjadi huruf:

const nilai = 82

const grade =
  nilai >= 90 ? 'A'
  : nilai >= 80 ? 'B'
  : nilai >= 70 ? 'C'
  : 'D'

console.log(grade) // 'B'

Cara membacanya bertahap: kalau nilai >= 90 pakai 'A'; kalau tidak, cek nilai >= 80 pakai 'B'; dan seterusnya sampai 'D' sebagai fallback terakhir. Selama diformat rapi seperti di atas (satu kondisi per baris), nested ternary masih terbaca. Tapi kalau ditumpuk dalam satu baris panjang, ia cepat berubah jadi mimpi buruk.

Ternary di React (Conditional Rendering)

Inilah tempat di mana ternary benar-benar bersinar dan jadi wajib. Di dalam JSX, kamu tidak bisa memakai if-else biasa, jadi ternary menjadi cara utama menampilkan sesuatu secara kondisional:

function Tombol({ sudahLogin }) {
  return (
    <button>
      {sudahLogin ? 'Keluar' : 'Masuk'}
    </button>
  )
}

Tombol di atas akan menampilkan teks “Keluar” kalau sudahLogin bernilai true, dan “Masuk” kalau false, semuanya di dalam satu baris JSX. Kamu juga bisa memilih antara dua komponen berbeda:

function Halaman({ loading }) {
  return (
    <div>
      {loading ? <Spinner /> : <DaftarProduk />}
    </div>
  )
}

Pola inilah yang membuat ternary jadi salah satu sintaks paling sering kamu tulis begitu masuk React. Kalau kamu ingin melihat bagaimana kondisi seperti ini dipakai untuk membangun antarmuka interaktif, belajar React dari nol menunjukkan langkah-langkahnya dari awal.

Contoh Praktis Sehari-hari

Supaya makin nyata, berikut beberapa pola ternary yang benar-benar kamu pakai di proyek:

Menampilkan teks jamak/tunggal:

const jumlah = 3
const teks = `${jumlah} item${jumlah > 1 ? 's' : ''}`
// '3 items'  kalau jumlah 1, jadi '1 item'

Memberi nilai default kalau data kosong:

const namaUser = data.nama ? data.nama : 'Tamu'
// pakai nama asli kalau ada, kalau tidak pakai 'Tamu'

Menentukan kelas CSS berdasarkan status:

const warna = saldo >= 0 ? 'text-hijau' : 'text-merah'

Menghitung diskon berdasarkan syarat:

const totalBelanja = 150000
const ongkir = totalBelanja >= 100000 ? 0 : 15000
// gratis ongkir kalau belanja minimal 100rb

Pola-pola singkat seperti inilah yang membuat ternary begitu produktif, kamu bisa memasukkan logika kecil langsung ke tempat kamu membutuhkannya, tanpa memecahnya jadi blok if yang panjang.

Kesalahan Umum Saat Memakai Ternary

Beberapa jebakan yang sering menimpa pemula:

1. Lupa titik dua (:). Ternary WAJIB punya kedua cabang. Menulis kondisi ? nilai tanpa : nilaiLain akan menyebabkan SyntaxError. Berbeda dengan if yang boleh berdiri tanpa else.

2. Menumpuk terlalu banyak nested ternary dalam satu baris. Ini membuat kode nyaris mustahil dibaca. Kalau cabangnya lebih dari tiga, ganti dengan if-else if atau switch.

3. Memakai ternary demi efek samping, bukan nilai. Seperti dibahas di atas, kondisi ? kirimData() : hapusData() adalah gaya yang buruk. Ternary untuk memilih nilai, bukan mengganti alur logika.

4. Salah paham soal truthy/falsy. Kondisi ternary mengikuti aturan truthy/falsy JavaScript. Nilai seperti 0, '' (string kosong), null, dan undefined dianggap false. Jadi nama ? nama : 'Tamu' akan memakai 'Tamu' bahkan kalau nama adalah string kosong '', bukan cuma saat null.

🧠Cek Pemahaman

Apa nilai variabel hasil pada kode: const hasil = 5 > 10 ? "besar" : "kecil"

A"besar"B"kecil"CtrueDError karena sintaks salah

FAQ Seputar Operator Ternary

Apa itu operator ternary dengan bahasa sederhana?

Operator ternary adalah cara singkat menulis if-else dalam satu baris memakai sintaks kondisi ? nilaiJikaBenar : nilaiJikaSalah. Ia mengecek satu kondisi, lalu memilih salah satu dari dua nilai. Contoh: umur >= 18 ? 'Dewasa' : 'Anak' akan menghasilkan 'Dewasa' jika umur minimal 18, dan 'Anak' jika tidak.

Apa perbedaan operator ternary dan if-else?

Perbedaan utamanya: ternary adalah ekspresi yang menghasilkan nilai (bisa langsung di-assign ke variabel), sedangkan if-else adalah statement yang hanya menjalankan blok kode. Ternary cocok untuk memilih satu dari dua nilai dalam satu baris; if-else cocok untuk menjalankan beberapa baris aksi. Ternary juga bisa dipakai di dalam JSX React, sementara if-else tidak.

Kapan sebaiknya memakai ternary dan kapan if-else?

Pakai ternary kalau kamu ingin memilih satu nilai untuk disimpan atau ditampilkan, misalnya menentukan teks, warna, atau kelas CSS. Pakai if-else kalau kamu perlu menjalankan beberapa baris aksi atau logikanya rumit dengan banyak cabang. Aturan singkat: ternary untuk nilai, if-else untuk aksi.

Apakah operator ternary bisa bersarang (nested)?

Bisa. Kamu bisa menulis ternary di dalam cabang ternary lain untuk menangani lebih dari dua kemungkinan, misalnya mengubah angka nilai menjadi grade A/B/C/D. Tapi hati-hati: nested ternary cepat menjadi sulit dibaca. Selalu format satu kondisi per baris, dan kalau cabangnya lebih dari tiga, pertimbangkan if-else if atau switch.

Kenapa disebut operator “ternary”?

Karena ia membutuhkan tiga operand (bagian): kondisi, nilai jika benar, dan nilai jika salah. Bandingkan dengan operator binary seperti + yang butuh dua operand, dan unary seperti ! yang butuh satu. Ternary adalah satu-satunya operator di JavaScript yang butuh tiga bagian, jadi sering disebut langsung “the ternary operator”.

Apakah ternary lebih cepat daripada if-else?

Dari sisi performa, keduanya praktis sama, perbedaan kecepatannya tidak berarti dan tidak perlu jadi pertimbangan. Alasan memilih ternary adalah keringkasan dan keterbacaan untuk kasus memilih nilai, bukan performa. Fokuslah menulis kode yang jelas, bukan yang tercepat secara mikro.

Langkah Selanjutnya

Setelah menguasai operator ternary, konsep-konsep berikut akan terasa lebih mudah karena saling terkait:

1. Truthy & falsy, memahami nilai mana yang dianggap true/false membuat kondisi ternary-mu jauh lebih akurat.
2. Operator && dan ||, pasangan ternary untuk conditional rendering “tampil atau tidak” dan memberi nilai default.
3. Conditional rendering di React, di sinilah ternary paling sering dipakai setiap hari.

Operator ternary kelihatan sepele, tapi ia adalah salah satu sintaks yang membuat kode JavaScript-mu jadi lebih ringkas dan ekspresif. Untuk latihan bertahap dengan umpan balik langsung, kerjakan materi kondisi & percabangan di Hyper Sheets. Semakin sering kamu menulis ? :, semakin alami rasanya, dan kodemu akan jadi lebih pendek tanpa kehilangan kejelasan.