Ads by Yasya El Hakim
Operator Conditional if dan Question Mark pada JavaScript

Terkadang, kita ingin melakukan aksi yang berbeda berdasarkan kondisi yang berbeda.

Untuk mengatasinya, kita dapat menggunakan statement if dan operator conditional ? yang sering disebut dengan operator tanda tanya (Qustion Mark).



Statement if pada JavaScript

Statement if(...) dapat mengevaluasi sebuah kondisi yang ada di dalam tanda dalam kurung, jika hasilnya adalah true, maka block kode akan di jalankan. Contoh:

let tahun = prompt('Pada tahun berapa Indonesia merdeka?', '');

if (tahun == 1945) alert( 'Benar!' );


Pada contoh kode diatas, kondisinya sangatlah sederhana dengan menggunakan persamaan (tahun == 1945), tetapi tidak kompleks.

Jika kita ingin menjalankan lebih dari satu statement, kita harus menambahkan block kode di dalam tanda dalam kurung "{}":

if (tahun == 1945) {
  alert( "Benar!" );
  alert( "Anda pintar!" );
}


Saya menyarankan agar kalian menggunakan baris baru pada block kode yang ada di dalam tanda "{}" setiap menggunakan statement if walaupun cuma satu baris kode. Mengapa? Lagi-lagi alasannya adalah agar mudah untuk dibaca.

Konversi Boolean

Statement if (...) dapat mengevaluasi expresi yang ada di dalam kurung dan mengubah hasilnya kedalam boolean.

Mari kita bahas ulang aturan konversi dari bagian Konversi Tipe sebelumnya:
  • Sebuah angka 0, string yang kosong "", null, undefined, dan NaN akan menjadi false. Karena mereka terdiri dari nilai yang salah (falsy).
  • Nilai lainnya kan menjadi true, atau dapat disebut dengan istilah Truthy.

Jadi, kode yang ada di bawah kondisi tidak akan dijalankan:

if (0) { // 0 adalah falsy
    ...
}


... dan yang ada di dalam kondisi berikut akan dijalankan:

if (1) { // 1 adalah truthy
    ...
}


Kita juga dapat melewatinya dengan mengevaluasi boolean kedalam if. Contoh:

let kondisi = (tahun == 1945); // evaluasi persamaan true atau false

if (kondisi) {
    ...
}


else pada JavaScript

Statement if dapat terdiri dari block kode yang berupa else. else dapat dijalankan ketika kondisinya adalah false. Contoh:

let tahun = prompt('Pada tahun berapakah Indonesia merdeka?', '');

if (tahun == 1945) {
    alert('Anda benar!');
} else {
    alert('Anda salah!'); // akan dijalankan jika jawabannya selain 1945
}


Beberapa Kondisi dengan else if pada JavaScript

Terkadang juga, kita ingin menguji beberapa kondisi. Maka, else if dapat melakukannya. Contoh:

let tahun = prompt('Pada tahun berapakah Indonesia merdeka?', '');

if (tahun < 1945) {
    alert('Terlalu cepat!');
} else if (tahun > 1945) {
    alert('Terlalu lama!');
} else {
    alert('Tepat sekali!');
}


Pada contoh kode diatas, pertama-tama JavaScript akan mengecek tahun < 1945. Jika salah, maka akan masuk ke kondisi berikutnya year > 1945. Jika masih salah juga, maka akan masuk ke kondisi terakhir. Kita juga dapat menambahkan block else if lagi. Hasilnya adalah pada else.

Operator Conditional Question Mark pada JavaScript

Terkadang pula, kita ingin menetapkan sebuah variabel tergantung dari kondisinya. Contoh:

let aksesIzin;
let umur = prompt('Berapa umurmu?', '');

if (umur > 18) {
  aksesIzin = true;
} else {
  aksesIzin = false;
}

alert(aksesIzin);


Operator tanda tanya atau Contional atau Question Mark dapat kita gunakan untuk melakukan cara seperti diatas dengan cara yang lebih sederhana.

Operator tanda tanya "?" yang terkadang disebut dengan Ternary (karena memiliki tiga operand). Sebenarnya hanya salah salah satu dari banyak operator yang ada di JavaScript. Berikut adalah contoh penulisannya:

let hasil = kondisi ? nilai1 : nilai2;


kondisinya akan di evaluasi: jika true maka nilai1 akan dihasilkan, jika tidak akan menampilkan nilai2. Contoh:

let izinAkses = (umur > 18) ? true : false;


Secara teknis, kita dapat menghilangkan tanda dalam kurung diantara umur > 18. Operator tanda tanya memiliki prioritas yang rendah, jadi hanya akan di jalankan setelah perbandingan >.

Contoh berikut akan melakukan cara yang sama dengan contoh kode sebelumnya:

// operator perbandingan "umur > 18" akan di jalankan pertama kali
// (tidak perlu dikelilingi dalam kurung)
let izinAkses = umut > 18 ? true " false;


Tetapi, tanda dalam kurung dapat membuat kode mudah untuk dibaca. Jadi, saya menyarankan agar kalian selalu menggunakannya.

Catatan:
Pada contoh diatas, kalian dapat menghindari penggunaan operator tanda tanya karena perbandingannya sendiri akan mengahsilkan true/false:

// sama
let izinAkses = umur > 18;


Lebih dari Satu Operator Question Mark

Urutan dari operator tanda tanya "?" dapat menghasilkan sebuah nilai tergantung pada lebih dari satu kondisi. Contoh:

let umur = prompt('umur?', 18);

let pesan = (umur < 3) ? 'Hai' :
            (umur < 18) ? 'Halo' :
            (umur < 100) ? 'Salam Hormat' :
            'Yakin?';
alert(pesan);


Kode diatas mungkin terlihat agak sulit. Tetapi setelah di perhatikan, kita dapat melihat bahwasanya hal tersebut adalah sebuah urutan:
  • Pertanyaan pertama akan mengecek umur < 3.
  • Jika benar - hasilnya akan menjadi 'Hai'. Jika tidak, maka akan lanjut ke expresi setelah tanda titik dua ":" yaitu mengecek umur < 18.
  • Jika benar - hasilnya akan menjadi 'Halo'. Jika tidak, maka akan lanjut ke expresi setelah tanda titik dua ":" yaitu mengecek umur < 100.
  • Jika benar - hasilnya akan menjadi 'Salam Hormat'. Jika tidak, maka akan lanjut ke expresi setelah tanda titik dua ":" yaitu menghasilkan 'Yakin?'.

Berikut adalah contoh lain dari kode diatas jika kita menggunakan if...else:

if (umur < 3) {
    pesan = 'Hai';
} else if (umur < 18) {
    pesan = 'Halo';
} else if (umur < 100) {
    pesan = 'Salam Hormat';
} else {
    pesan = 'Yakin?';
}


Penggunaan Question Mark

Terkadang, operator tanda tanya "?" di gunakan sebagai pengganti dari if. Contoh:

let penulis = prompt('Siapa nama penulis artikel ini?', '');

(penulis == 'Yasya') ? alert('Benar!') : alert('Salah!');


Tergantung dari kondisi penulis == 'Yasya', diantara expresei pertama atau kedua setelah ? akan di jalankan dan ditampilkan pada modal.

Disini, kita tidak menetapkan hasil kedalam variabel. Sebagai gantinya, kita dapat menjalankan kode yang berbeda tergantung dari kondisinya.

Contoh kode diatas tidak di rekomendasikan.

Notasinya akan sedikit lebih singkat setara dengan statement if yang mana akan menarik bagi beberapa programmer. Tetapi akan sedikit sulit untuk dibaca.

Berikut adalah kode yang sama seperti diatas tetapi menggunakan if:

let penulis = prompt('Siapa penulis artikel ini?', '');

if (penulis == 'Yasya') {
    alert('Benar!');
} else {
    alert('Salah!');
}


Mata kita pasti akan membacanya secara vertikal. Block kode tersebut dibagi dengan beberapa baris dan terlihat mudah dibaca.

Tujuan dari operator tanda tanya "?" adalah untuk menghasilkan satu nilai atau nilai lain dari kondisinya. Jadi, jangan menggunakannya seperti halnya dengan statement if.

0Komentar

Sebelumnya Selanjutnya