Ternary Operator

Antarmuka aplikasi penuh teks yang bergantung kondisi: “Gratis ongkir” atau “Ongkir Rp15.000”, “Stok tersedia” atau “Stok habis”, “Dewasa” atau “Anak-anak”. Pola di balik semuanya sama — satu kondisi, dua kemungkinan teks. Menulis pola semacam itu dengan statement if terasa panjang, apalagi ketika hasilnya hanya ingin disimpan ke satu variabel.

JavaScript menyediakan satu-satunya operator yang menerima tiga operand: ternary operator, dengan bentuk kondisi ? nilaiJikaBenar : nilaiJikaSalah. Operator ini adalah expression — ia menghasilkan nilai — sehingga bisa langsung disimpan ke variabel atau dikirim ke console.log.

Titik Awal: Pemilihan dengan if #

Karena statement kondisi baru dibahas penuh di section Control Flow, kita lihat bentuknya seperlunya saja sebagai pembanding. Program berikut memilih label ongkir dengan if dan else:

const totalBelanja = 320000;
let labelOngkir;

if (totalBelanja >= 250000) {
  labelOngkir = "Gratis ongkir";
} else {
  labelOngkir = "Ongkir Rp15.000";
}

console.log(labelOngkir);

Output yang Dihasilkan:

Gratis ongkir

Programnya benar, tetapi enam baris (tanpa deklarasi) dipakai hanya untuk memilih satu nilai. Engine harus membaca labelOngkir sebagai let yang kosong dulu, mengisinya di salah satu cabang, lalu membacanya lagi. Perhatikan pula labelOngkir dideklarasikan dengan let karena isinya ditentukan belakangan — kebalikan dari kebiasaan const yang kita bakukan di section Dasar Pemrograman. Bagian if dan else sendiri akan kita bahas tuntas di section Control Flow; untuk saat ini cukup jadi pembanding bentuk.

Anatomi Ternary Operator #

Namanya berasal dari jumlah operandnya: ternary berarti tiga, dan operator ini memang satu-satunya operator JavaScript yang menerima tiga operand sekaligus — kondisi, nilai bila benar, dan nilai bila salah. Ternary operator memadatkan pola pada bagian sebelumnya menjadi satu baris:

const labelOngkir = totalBelanja >= 250000 ? "Gratis ongkir" : "Ongkir Rp15.000";

Keterbagiannya sebagai berikut: totalBelanja >= 250000 adalah kondisi yang dievaluasi menjadi boolean; tanda ? membuka cabang “kondisi benar”; "Gratis ongkir" adalah nilainya; tanda : membuka cabang “kondisi salah”; dan "Ongkir Rp15.000" mengisi cabang kedua. Engine mengevaluasi kondisi, lalu mengevaluasi salah satu saja dari dua nilai — cabang yang tidak dipilih tidak dieksekusi, mirip perilaku short-circuit pada && dan ||.

Karena ternary adalah expression, hasilnya bisa disimpan ke const. Variabel tidak perlu dideklarasikan kosong lalu diisi, dan kepastian “nilai ini terisi di baris yang sama” membuat kode lebih mudah dipindai.

Contoh: Label Tampilan #

Berkas berikut memakai ternary dalam tiga gaya umum: disimpan ke variabel, dipakai langsung di dalam pemanggilan console.log, dan menghasilkan angka alih-alih teks:

// label-harga.js
// Memilih teks tampilan dengan ternary operator.

const totalBelanja = 320000;

// Satu kondisi, dua kemungkinan teks.
const labelOngkir = totalBelanja >= 250000 ? "Gratis ongkir" : "Ongkir Rp15.000";
console.log(labelOngkir);

// Ternary bisa langsung dipakai di dalam pemanggilan console.log.
const stok = 0;
console.log(stok > 0 ? "Stok tersedia" : "Stok habis");

// Hasilnya bisa berupa angka, bukan hanya teks.
const biayaKirim = totalBelanja >= 250000 ? 0 : 15000;
console.log("Biaya kirim:", biayaKirim);

const umurPendaftar = 19;
const kategori = umurPendaftar >= 17 ? "Dewasa" : "Anak-anak";
console.log("Kategori pendaftar:", kategori);

Output yang Dihasilkan:

Gratis ongkir
Stok habis
Biaya kirim: 0
Kategori pendaftar: Dewasa

Mari kita telaah baris-baris pentingnya:

1. Baris 7 (const labelOngkir = ... ? "Gratis ongkir" : "Ongkir Rp15.000";): kondisi 320000 >= 250000 bernilai true, sehingga cabang pertama yang dievaluasi. Hasilnya "Gratis ongkir", disimpan ke const.
2. Baris 12 (console.log(stok > 0 ? "Stok tersedia" : "Stok habis");): ternary ditempatkan langsung sebagai argumen. Kondisi 0 > 0 bernilai false, sehingga "Stok habis" yang dicetak. Untuk pilihan sekali pakai, gaya ini paling hemat.
3. Baris 15 (const biayaKirim = ... ? 0 : 15000;): kedua cabang menghasilkan angka. Ternary tidak mengharuskan cabang berupa teks; kedua cabang boleh bertipe apa pun asalkan hasilnya cocok dengan kebutuhan program.
4. Baris 19 (const kategori = umurPendaftar >= 17 ? "Dewasa" : "Anak-anak";): 19 >= 17 bernilai true, sehingga kategori berisi "Dewasa". Pembanding di kondisi berasal dari chapter Comparison Operators; polanya kini bergabung utuh.

Kapan Ternary Lebih Tepat daripada ?? #

Karena ternary dan ?? sama-sama memilih nilai, keduanya mudah tertukar. Bedanya: ?? bertanya “apakah nilai ini null atau undefined?”, sedangkan ternary membiarkan kita merumuskan kondisi apa pun. Kasus catatan yang boleh kosong memperlihatkan bedanya:

const catatan = "";

console.log(catatan ?? "(kosong)");
console.log(catatan || "(kosong)");
console.log(catatan !== "" ? catatan : "(kosong)");

Output yang Dihasilkan:

(kosong)
(kosong)

Baris pertama tampak kosong karena ?? menganggap "" bukan nullish — nilai sah yang dipertahankan, sesuai aturan chapter Nullish Coalescing. Baris kedua memakai ||, yang mengganti "" dengan cadangan, tetapi caranya tidak eksplisit. Baris ketiga memakai ternary dengan kondisi tertulis jelas: catatan !== "". Ketika aturan penggantian nilainya spesifik — “ganti hanya jika string kosong”, “ganti jika nol”, “ganti jika di bawah ambang” — ternary mengungkapkan maksud itu tanpa bergantung pada daftar nilai falsy.

Ternary Bersarang: Bisa, Tetapi Jangan #

Karena cabang ternary adalah expression, cabang itu sendiri boleh berisi ternary lain. Bentuk seperti ini disebut nested ternary:

const nilai = 78;
const predikat = nilai >= 85 ? "A" : nilai >= 75 ? "B" : nilai >= 60 ? "C" : "D";
console.log(predikat);

Output yang Dihasilkan:

B

Hasilnya benar — 78 tidak memenuhi >= 85, memenuhi >= 75, sehingga predikat "B". Masalahnya bukan kebenaran, melainkan keterbacaan: satu baris itu memuat tiga kondisi dan empat hasil yang menumpuk tanpa petunjuk visual mana yang berpasangan. Pembaca lain (termasuk kita sendiri enam bulan kemudian) harus membongkar urutannya manual, dan risiko salah menyisipkan : atau ? meningkat.

Dengan ternary, kotak peralatan expression kita lengkap: aritmatika, perbandingan, logika, nilai cadangan, rantai aman, dan kini pemilihan nilai. Persoalan yang tersisa lebih halus: ketika beberapa operator bertemu dalam satu baris, siapa yang dievaluasi lebih dulu? Chapter Operator Precedence menjawabnya.

// label-harga.js
// Memilih teks tampilan dengan ternary operator.

const totalBelanja = 320000;

// Satu kondisi, dua kemungkinan teks.
const labelOngkir = totalBelanja >= 250000 ? "Gratis ongkir" : "Ongkir Rp15.000";
console.log(labelOngkir);

// Ternary bisa langsung dipakai di dalam pemanggilan console.log.
const stok = 0;
console.log(stok > 0 ? "Stok tersedia" : "Stok habis");

// Hasilnya bisa berupa angka, bukan hanya teks.
const biayaKirim = totalBelanja >= 250000 ? 0 : 15000;
console.log("Biaya kirim:", biayaKirim);

const umurPendaftar = 19;
const kategori = umurPendaftar >= 17 ? "Dewasa" : "Anak-anak";
console.log("Kategori pendaftar:", kategori);