Ada empat operator logika dalam JavaScript: ||
(ATAU), &&
(DAN), !
(BUKAN), ??
(Penggabungan Nullish). Di sini kita membahas tiga yang pertama, ??
operator ada di artikel berikutnya.
Meskipun disebut “logis”, namun dapat diterapkan pada nilai jenis apa pun, tidak hanya boolean. Hasilnya juga bisa jenis apa pun.
Mari kita lihat detailnya.
Operator “OR” diwakili dengan dua simbol garis vertikal:
hasil = a || B;
Dalam pemrograman klasik, logika OR dimaksudkan untuk memanipulasi nilai boolean saja. Jika salah satu argumennya adalah true
, ia akan mengembalikan true
, jika tidak, ia akan mengembalikan false
.
Dalam JavaScript, operatornya sedikit lebih rumit dan lebih kuat. Namun pertama-tama, mari kita lihat apa yang terjadi dengan nilai boolean.
Ada empat kemungkinan kombinasi logis:
waspada( benar || benar ); // BENAR waspada( salah || benar ); // BENAR waspada( benar || salah ); // BENAR waspada( salah || salah ); // PALSU
Seperti yang bisa kita lihat, hasilnya selalu true
kecuali jika kedua operan bernilai false
.
Jika operan bukan boolean, operan akan diubah menjadi boolean untuk evaluasi.
Misalnya, angka 1
dianggap sebagai true
, angka 0
dianggap sebagai false
:
if (1 || 0) { // berfungsi seperti if( true || false ) alert('benar!' ); }
Seringkali, ATAU ||
digunakan dalam pernyataan if
untuk menguji apakah salah satu kondisi yang diberikan true
.
Misalnya:
misalkan jam = 9; if (jam < 10 || jam > 18) { alert('Kantor tutup.'); }
Kami dapat memberikan lebih banyak ketentuan:
misalkan jam = 12; misalkan akhir pekan = true; if (jam < 10 || jam > 18 || adalahAkhir Pekan) { alert('Kantor tutup.'); // ini akhir pekan }
Logika yang dijelaskan di atas agak klasik. Sekarang, mari kita hadirkan fitur “ekstra” JavaScript.
Algoritme yang diperluas bekerja sebagai berikut.
Diberikan beberapa nilai OR:
hasil = nilai1 || nilai2 || nilai3;
ATAU ||
operator melakukan hal berikut:
Mengevaluasi operan dari kiri ke kanan.
Untuk setiap operan, ubah menjadi boolean. Jika hasilnya true
, berhenti dan kembalikan nilai asli operan tersebut.
Jika semua operan telah dievaluasi (yaitu semuanya false
), kembalikan operan terakhir.
Nilai dikembalikan dalam bentuk aslinya, tanpa konversi.
Dengan kata lain, rantai OR ||
mengembalikan nilai kebenaran pertama atau yang terakhir jika tidak ada nilai kebenaran yang ditemukan.
Misalnya:
peringatan( 1 || 0 ); // 1 (1 benar) waspada( nol || 1 ); // 1 (1 adalah nilai kebenaran pertama) waspada( nol || 0 || 1 ); // 1 (nilai kebenaran pertama) waspada( tidak terdefinisi || null || 0 ); // 0 (semua salah, mengembalikan nilai terakhir)
Hal ini mengarah pada beberapa penggunaan yang menarik dibandingkan dengan "OR murni, klasik, khusus boolean".
Mendapatkan nilai kebenaran pertama dari daftar variabel atau ekspresi.
Misalnya, kita mempunyai variabel firstName
, lastName
dan nickName
, semuanya opsional (yaitu dapat tidak terdefinisi atau memiliki nilai yang salah).
Mari kita gunakan ATAU ||
untuk memilih salah satu yang memiliki data dan menampilkannya (atau "Anonymous"
jika tidak ada yang disetel):
biarkan Namadepan = ""; biarkan Nama Belakang = ""; biarkan nickName = "SuperCoder"; alert( Nama Depan || Nama Belakang || Nama Panggilan || "Anonim"); // Pembuat Kode Super
Jika semua variabel salah, "Anonymous"
akan muncul.
Evaluasi hubung singkat.
Fitur lain dari OR ||
operator adalah apa yang disebut evaluasi "hubungan pendek".
Artinya ||
memproses argumennya hingga nilai kebenaran pertama tercapai, dan kemudian nilai tersebut segera dikembalikan, bahkan tanpa menyentuh argumen lainnya.
Pentingnya fitur ini menjadi jelas jika operan bukan sekadar nilai, namun ekspresi dengan efek samping, seperti penetapan variabel atau pemanggilan fungsi.
Pada contoh di bawah, hanya pesan kedua yang dicetak:
benar || alert("tidak dicetak"); salah || peringatan("dicetak");
Di baris pertama, OR ||
operator menghentikan evaluasi segera setelah melihat true
, sehingga alert
tidak dijalankan.
Terkadang orang menggunakan fitur ini untuk menjalankan perintah hanya jika kondisi di sisi kiri salah.
Operator AND diwakili dengan dua ampersand &&
:
hasil = a && b;
Dalam pemrograman klasik, AND mengembalikan true
jika kedua operan benar dan false
jika sebaliknya:
peringatan( benar && benar ); // BENAR peringatan( salah && benar ); // PALSU peringatan(benar && salah ); // PALSU peringatan( salah && salah ); // PALSU
Contoh dengan if
:
misalkan jam = 12; misalkan menit = 30; if (jam == 12 && menit == 30) { alert('Waktu menunjukkan pukul 12.30'); }
Sama seperti OR, nilai apa pun diperbolehkan sebagai operan AND:
if (1 && 0) { // dievaluasi sebagai benar && salah alert("Tidak bisa, karena hasilnya salah"); }
Diberikan beberapa nilai AND:
hasil = nilai1 && nilai2 && nilai3;
Operator AND &&
melakukan hal berikut:
Mengevaluasi operan dari kiri ke kanan.
Untuk setiap operan, ubah menjadi boolean. Jika hasilnya false
, hentikan dan kembalikan nilai asli operan tersebut.
Jika semua operan telah dievaluasi (yaitu semuanya benar), kembalikan operan terakhir.
Dengan kata lain, AND mengembalikan nilai falsy pertama atau nilai terakhir jika tidak ditemukan.
Aturan di atas mirip dengan OR. Perbedaannya adalah AND mengembalikan nilai falsy pertama sedangkan OR mengembalikan nilai kebenaran pertama.
Contoh:
// jika operan pertama benar, // AND mengembalikan operan kedua: peringatan( 1 && 0 ); // 0 peringatan( 1 && 5 ); // 5 // jika operan pertama salah, // DAN mengembalikannya. Operan kedua diabaikan peringatan( batal && 5 ); // batal alert(0 && "apapun yang terjadi"); // 0
Kita juga dapat meneruskan beberapa nilai secara berurutan. Lihat bagaimana kesalahan pertama dikembalikan:
peringatan( 1 && 2 && batal && 3 ); // batal
Ketika semua nilai benar, nilai terakhir dikembalikan:
peringatan( 1 && 2 && 3 ); // 3, yang terakhir
Prioritas AND &&
lebih tinggi dari OR ||
Prioritas operator AND &&
lebih tinggi dari OR ||
.
Jadi kode a && b || c && d
pada dasarnya sama seperti jika ekspresi &&
berada dalam tanda kurung: (a && b) || (c && d)
.
Jangan ganti if
dengan ||
atau &&
Terkadang, orang menggunakan operator AND &&
sebagai “cara singkat untuk menulis if
”.
Misalnya:
misalkan x = 1; (x > 0) && alert( 'Lebih besar dari nol!' );
Tindakan di bagian kanan &&
akan dijalankan hanya jika evaluasi mencapainya. Artinya, hanya jika (x > 0)
benar.
Jadi pada dasarnya kami memiliki analogi untuk:
misalkan x = 1; if (x > 0) alert( 'Lebih besar dari nol!' );
Meskipun varian dengan &&
tampak lebih pendek, if
lebih jelas dan cenderung lebih mudah dibaca. Jadi sebaiknya gunakan setiap konstruksi sesuai tujuannya: gunakan if
jika kita ingin if
dan gunakan &&
jika kita ingin AND.
Operator boolean NOT dilambangkan dengan tanda seru !
.
Sintaksnya cukup sederhana:
hasil = !nilai;
Operator menerima satu argumen dan melakukan hal berikut:
Mengonversi operan menjadi tipe boolean: true/false
.
Mengembalikan nilai kebalikannya.
Misalnya:
peringatan( !benar ); // PALSU peringatan( !0 ); // BENAR
TIDAK ganda !!
terkadang digunakan untuk mengonversi nilai ke tipe boolean:
alert(!!"string yang tidak kosong" ); // BENAR peringatan(!!batal ); // PALSU
Artinya, NOT pertama mengonversi nilai menjadi boolean dan mengembalikan inversnya, dan NOT kedua membalikkannya lagi. Pada akhirnya, kami memiliki konversi nilai-ke-boolean yang jelas.
Ada cara yang lebih jelas untuk melakukan hal yang sama – fungsi Boolean
bawaan:
alert( Boolean("string tidak kosong") ); // BENAR peringatan( Boolean(null) ); // PALSU
Diutamakan dari NOT !
adalah operator logika tertinggi, sehingga selalu dijalankan terlebih dahulu, sebelum &&
atau ||
.
pentingnya: 5
Kode apa di bawah ini yang akan ditampilkan?
waspada( null || 2 || tidak terdefinisi );
Jawabannya 2
, itulah nilai kebenaran pertama.
waspada( null || 2 || tidak terdefinisi );
pentingnya: 3
Apa yang akan dihasilkan oleh kode di bawah ini?
waspada( waspada(1) || 2 || waspada(3) );
Jawabannya: pertama 1
, lalu 2
.
waspada( waspada(1) || 2 || waspada(3) );
Panggilan untuk alert
tidak mengembalikan nilai. Atau, dengan kata lain, ia mengembalikan undefined
.
OR pertama ||
mengevaluasi operan kirinya alert(1)
. Itu menunjukkan pesan pertama dengan 1
.
alert
mengembalikan undefined
, jadi OR melanjutkan ke operan kedua untuk mencari nilai kebenaran.
Operan kedua 2
benar, sehingga eksekusi dihentikan, 2
dikembalikan dan kemudian ditampilkan oleh peringatan luar.
Tidak akan ada 3
, karena evaluasi tidak mencapai alert(3)
.
pentingnya: 5
Apa yang akan ditampilkan kode ini?
peringatan( 1 && batal && 2 );
Jawabannya: null
, karena ini adalah nilai falsy pertama dari daftar.
peringatan(1 && batal && 2);
pentingnya: 3
Apa yang akan ditunjukkan oleh kode ini?
waspada( waspada(1) && waspada(2) );
Jawabannya: 1
, lalu undefined
.
waspada( waspada(1) && waspada(2) );
Panggilan untuk alert
kembali undefined
(hanya menampilkan pesan, jadi tidak ada pengembalian yang berarti).
Oleh karena itu, &&
mengevaluasi operan kiri (output 1
), dan segera berhenti, karena undefined
adalah nilai yang salah. Dan &&
mencari nilai yang salah dan mengembalikannya, jadi selesai.
pentingnya: 5
Apa hasilnya?
peringatan( null || 2 && 3 || 4 );
Jawabannya: 3
.
peringatan( null || 2 && 3 || 4 );
Prioritas AND &&
lebih tinggi dari ||
, jadi dijalankan terlebih dahulu.
Hasil dari 2 && 3 = 3
, sehingga ekspresi menjadi:
batal || 3 || 4
Sekarang hasilnya adalah nilai kebenaran pertama: 3
.
pentingnya: 3
Tulis kondisi if
untuk memeriksa bahwa age
antara 14
dan 90
secara inklusif.
“Inklusif” artinya age
bisa mencapai batas 14
atau 90
.
jika (usia >= 14 && usia <= 90)
pentingnya: 3
Tulis kondisi if
untuk memeriksa bahwa age
BUKAN antara 14
dan 90
secara inklusif.
Buat dua varian: yang pertama menggunakan NOT !
, yang kedua – tanpa itu.
Varian pertama:
if (!(usia >= 14 && usia <= 90))
Varian kedua:
jika (umur < 14 || umur > 90)
pentingnya: 5
alert
mana yang akan dijalankan?
Apa hasil ekspresi di dalamnya if(...)
?
if (-1 || 0) peringatan( 'pertama' ); if (-1 && 0) peringatan( 'kedua' ); if (null || -1 && 1) alert( 'ketiga' );
Jawabannya: yang pertama dan yang ketiga akan dieksekusi.
Detail:
// Berjalan. // Hasil -1 || 0 = -1, sebenarnya if (-1 || 0) peringatan( 'pertama' ); // Tidak berjalan // -1 && 0 = 0, salah if (-1 && 0) peringatan( 'kedua' ); // Dieksekusi // Operator && memiliki prioritas lebih tinggi daripada || // jadi -1 && 1 dijalankan terlebih dahulu, memberi kita rantai: // batal || -1 && 1 -> nol || 1 -> 1 if (null || -1 && 1) alert( 'ketiga' );
pentingnya: 3
Tulis kode yang meminta login dengan prompt
.
Jika pengunjung memasukkan "Admin"
, lalu prompt
kata sandi, jika yang dimasukkan adalah baris kosong atau Esc – tampilkan “Dibatalkan”, jika string lain – maka tampilkan “Saya tidak mengenal Anda”.
Kata sandi diperiksa sebagai berikut:
Jika sama dengan “TheMaster”, maka tampilkan “Selamat datang!”,
String lain – tampilkan “Kata sandi salah”,
Untuk string kosong atau input yang dibatalkan, tampilkan “Dibatalkan”
Skemanya:
Silakan gunakan blok if
bersarang. Perhatikan keterbacaan kode secara keseluruhan.
Petunjuk: meneruskan input kosong ke prompt akan mengembalikan string kosong ''
. Menekan ESC selama prompt akan mengembalikan null
.
Jalankan demonya
let userName = prompt("Siapa disana?", ''); if (Nama Pengguna === 'Admin') { biarkan lewat = prompt('Kata Sandi?', ''); if (lulus === 'TheMaster') { peringatan('Selamat datang!' ); } else if (lulus === '' || lulus === null) { peringatan('Dibatalkan'); } kalau tidak { alert('Password salah'); } } else if (Namapengguna === '' || Namapengguna === null) { peringatan('Dibatalkan'); } kalau tidak { alert("Saya tidak mengenal anda"); }
Perhatikan indentasi vertikal di dalam blok if
. Secara teknis mereka tidak diperlukan, tetapi membuat kode lebih mudah dibaca.