Operator Ternary JavaScript: Shorthand Percabangan if..else

Operator ternary merupakan shorthand untuk percabangan if, tapi lebih singkat dan to the point.

Sama seperti if, kita bisa membuat percabangan lebih dari satu kondisi dan lebih dari dua pilihan (aksi).

Operator ini biasanya digunakan ketika kita ingin mengubah nilai variabel berdasarkan kondisi percabangan.

Mari kita pelajari lebih lanjut agar kita bisa menggunakan operator ternary dengan tepat dalam kondisi yang sesuai.

Berikut beberapa topik yang akan kita bahas terkait operator ternary.

1. Sintaks
2. Contoh Penggunaan Operator Ternary
   1. Contoh Sederhana
   2. Lebih Dari Satu Kondisi
   3. Ternary di Dalam Fungsi

Sintaks

kondisi ? ekspresiJikaTrue : ekspresiJikaFalse

• kondisi: ekspresi yang mengembalikan nilai boolean (true atau false). Jika bukan boolean, dikonversi secara otomatis ke nilai boolean sesuai truthy dan falsy.
• ekspresiJikaTrue: ekspresi yang dievaluasi jika kondisi bernilai true.
• ekspresiJikaFalse: ekspresi yang dievaluasi jika kondisi bernilai false.

Jadi, jika kondisi bernilai true, ekspresi yang ada di sebelah kiri : (titik dua) dievaluasi, jika false maka ekspresi kanannya.

Contoh Penggunaan Operator Ternary

Contoh Sederhana

Misalnya, kita ingin menentukan pesan lulus dan tidak berdasarkan nilai, pesan tersebut akan diinisialisasi ke variabel pesan.

Jika nilai lebih besar dari 70 pesannya Selamat Anda lulus., jika tidak Maaf, Anda tidak lulus..

Mari kita buat menggunakan percabangan if terlebih dahulu.

const nilai = 76;
let pesan;

if (nilai > 70) {
  pesan = 'Selamat Anda lulus.';
} else {
  pesan = 'Maaf, Anda tidak lulus.';
}

console.log(pesan); // Selamat Anda lulus.

Perilaku percabangan di atas dapat dicapai menggunakan operator ternary.

const nilai = 76;
const pesan = nilai > 70 ? 'Selamat Anda lulus.' : 'Maaf, Anda tidak lulus.';

console.log(pesan); // Selamat Anda lulus.

Keduanya memiliki perilaku yang sama dan menghasilkan nilai yang sama, tapi ternary jauh lebih singkat, hanya tiga baris.

Lebih Dari Satu Kondisi

Bagaimana jika kita ingin menggunkaan operator ternary dengan lebih dari satu kondisi dan dua pilihan?

Misalnya kita ingin menentukan nilai huruf (grade) berdasarkan nilai angka.

Berikut jika kita menggunakan percabangan if.

const nilai = 50;
let grade;

if (nilai > 80) {
  grade = 'A';
} else if (nilai > 60) {
  grade = 'B';
} else if (nilai > 40) {
  grade = 'C';
} else if (nilai > 20) {
  grade = 'D';
} else {
  grade = 'E';
}

console.log(grade); // C

Dan ini jika kita menggunakan operator ternary.

let nilai = 50;
const grade =
  nilai > 80
    ? 'A'
    : nilai > 60
    ? 'B'
    : nilai > 40
    ? 'C'
    : nilai > 20
    ? 'D'
    : 'E';

console.log(grade); // C

Agar lebih mudah dibaca, kita bisa membuat baris baru sebelum titik dua (:) seperti contoh di atas, ini tidak akan menghasilkan kesalahan.

Ternary di Dalam Fungsi

Saat membuat aplikasi kita seringkali memerlukan percabangan di dalam fungsi.

Untuk percabangan sederhana, operator ternary lebih sering digunakan.

Mari kita pelajari bagaimana pola penggunaan operator ternary di dalam fungsi.

Misalnya, kita ingin membuat fungsi untuk mengecek apakah angka bilangan bulat atau bukan, jika ya kembalikan nilai true, jika bukan kembalikan false.

Berikut contoh jika menggunakan percabangan if.

const apakahBulat = (num) => {
  if (num % 2 === 0) {
    return true;
  }

  return false;
};

const hasilYa = apakahBulat(2);
const hasilTidak = apakahBulat(1);
console.log(hasilYa); // true
console.log(hasilTidak); // false

Berikut jika kita menggunakan operator ternary.

const apakahBulat = (num) => (num % 2 === 0 ? true : false);

const hasilYa = apakahBulat(2);
const hasilTidak = apakahBulat(1);
console.log(hasilYa); // true
console.log(hasilTidak); // false