Operator Ternary Pada JavaScript

Pada tutorial ini, Anda akan belajar bagaimana menggunakan operator ternary JavaScript untuk membuat kode Anda lebih ringkas.

Pengenalan Operator Ternary JavaScript

Ketika Anda ingin menjalankan suatu blok jika suatu kondisi bernilai true, seringkali Anda menggunakan pernyataan if…else. Contohnya:

let age = 18;
let message;

if (age >= 16) {
  message = 'Anda dapat mengemudi.';
} else {
  message = 'Anda tidak dapat mengemudi.';
}

console.log(message);

Pada contoh ini, kami menunjukkan pesan bahwa seseorang dapat mengemudi jika usianya lebih dari atau sama dengan 16. Sebagai alternatif, Anda dapat menggunakan operator ternary alih-alih pernyataan if-else seperti ini:

let age = 18;
let message;

age >= 16 ? (message = 'Anda dapat mengemudi.') : (message = 'Anda tidak dapat mengemudi.');

console.log(message);

Atau Anda dapat menggunakan operator ternary dalam suatu ekspresi seperti berikut:

let age = 18;
let message;

message = age >= 16 ? 'Anda dapat mengemudi.' : 'Anda tidak dapat mengemudi.';

console.log(message);

Berikut adalah sintaks dari operator ternary:

condition ? expressionIfTrue : expressionIfFalse;

Dalam sintaks ini, kondisi adalah suatu ekspresi yang mengevaluasi nilai Boolean, baik true atau false. Jika kondisinya true, ekspresi pertama (expressionIfTrue) dieksekusi. Jika false, ekspresi kedua (expressionIfFalse) dieksekusi.

Berikut ini menunjukkan sintaks dari operator ternary yang digunakan dalam suatu ekspresi:

let variableName = condition ? expressionIfTrue : expressionIfFalse;

Dalam sintaks ini, jika kondisinya true, variableName akan mengambil hasil dari ekspresi pertama (expressionIfTrue) atau expressionIfFalse sebaliknya.

Contoh Operator Ternary JavaScript

Mari kita lihat beberapa contoh penggunaan operator ternary.

1. Menggunakan Operator Ternary JavaScript untuk Melakukan Beberapa Pernyataan

Contoh berikut menggunakan operator ternary untuk melakukan beberapa operasi, di mana setiap operasi dipisahkan oleh koma. Sebagai contoh:

let authenticated = true;
let nextURL = authenticated
  ? (alert('Anda akan diarahkan ke area admin'), '/admin')
  : (alert('Akses ditolak'), '/403');

// diarahkan ke nextURL di sini
console.log(nextURL); // '/admin'

Pada contoh ini, nilai yang dikembalikan dari operator ternary adalah nilai terakhir dalam daftar yang dipisahkan oleh koma.

2. Menyederhanakan Contoh Operator Ternary

Lihat contoh berikut:

let locked = 1;
let canChange = locked !== 1 ? true : false;

Jika locked adalah 1, maka variabel canChange diatur ke false, sebaliknya, diatur ke true. Dalam kasus ini, Anda dapat menyederhanakannya dengan menggunakan ekspresi boolean seperti berikut:

let locked = 1;
let canChange = locked !== 1;

3. Menggunakan Beberapa Operator Ternary JavaScript

Contoh berikut menunjukkan bagaimana menggunakan dua operator ternary dalam satu ekspresi:

let speed = 90;
let message = speed >= 120 ? 'Terlalu Cepat' : speed >= 80 ? 'Cepat' : 'OK';

console.log(message);

Output:

Cepat

Menjadi praktik yang baik untuk menggunakan operator ternary ketika membuat kode menjadi lebih mudah dibaca. Jika logikanya mengandung banyak pernyataan if…else, sebaiknya hindari menggunakan operator ternary.

Ringkasan

Gunakan operator ternary JavaScript (?:) untuk membuat kode lebih ringkas.