Boolean dan Perbandingan — Perbedaan Antara == dan ===

Apakah belanjaannya sudah mencapai batas gratis ongkir? Apakah user-nya sudah login? Apakah stoknya masih ada? Mengubah tampilan di layar selalu berawal dari mengecek apakah sebuah kondisi terpenuhi.

Artikel ini membahas perbedaan antara === dan == untuk mengecek kesamaan, operator perbandingan dan operator logika untuk menyusun kondisi, serta 6 value falsy (value yang diperlakukan seperti false di dalam kondisi) yang dianggap JavaScript sebagai "tidak terpenuhi".

Mengecek Kesamaan — Perbedaan Antara === dan ==

Bayangkan kamu mencocokkan value yang diketik di kolom input dengan value yang sudah tersimpan di sistem. Meski terlihat sama — sama-sama 0 — value dari kolom input berupa string "0", sementara value yang tersimpan berupa number 0.

Untuk memutuskan apakah keduanya dianggap "sama", JavaScript punya 2 operator.

=== mengembalikan true hanya kalau type dan value-nya sama-sama cocok. Kalau type-nya berbeda, hasilnya langsung false.

Satunya lagi, ==, mengonversi salah satu sisi dulu supaya type-nya sama, baru membandingkan value-nya. "0" dan 0 menghasilkan false dengan ===, tapi true dengan ==. Untuk mengecek "tidak sama" juga ada 2 operator: !== dan !=.

Konversi di sini berarti membaca karakter "0" sebagai number 0. Masalahnya, == menyisipkan konversi ini sebelum membandingkan.

Karena yang dibandingkan adalah hasil setelah dikonversi, hasil pengecekannya tidak selalu sesuai dengan apa yang kamu tulis. Value yang kelihatannya sama sekali berbeda, seperti string kosong "" dan 0, bisa menghasilkan true.

Untuk tiap kombinasi type, arah konversinya memang sudah ditentukan, tapi daripada menghafal aturannya, hasilnya jauh lebih mudah diikuti kalau kamu memakai === sehingga konversinya tidak terjadi sama sekali. Di kode baru, pakai === dan !==, lalu samakan dulu type-nya sebelum membandingkan. Arah konversi dan cara menyamakan type dibahas di artikel berikutnya, tentang type conversion.

const typedQuantity = "3";   // jumlah yang diketik di kolom input (string)
const savedQuantity = 3;     // jumlah yang tersimpan (number)

console.log(typedQuantity === savedQuantity);  // false  type-nya berbeda
console.log(typedQuantity == savedQuantity);   // true   konversi dulu, baru bandingkan

// Kalau type-nya sama, === pun tetap cocok
console.log(savedQuantity === 3);   // true
console.log(savedQuantity !== 3);   // false  negasi dari ===

console.log("" == 0);         // true   string kosong juga terkonversi ke 0
console.log("100" === 100);   // false  === tidak pernah mengonversi

Cocokkan jumlah stok yang diketik di kolom input dengan jumlah stok yang tersimpan di sistem. typedStock yang berupa string dan storedStock yang berupa number sudah dideklarasikan.

① Tampilkan hasil perbandingan keduanya dengan ==.

② Tampilkan hasil perbandingan keduanya dengan ===.

③ Cek apakah keduanya "tidak sama, termasuk type-nya", lalu tampilkan hasilnya.

(Kalau berjalan dengan benar, penjelasan akan muncul.)

Membangun Kondisi — Operator Perbandingan dan Logika

Dalam praktiknya, pengecekan tidak berhenti di "apakah keduanya sama". Kamu akan butuh kondisi seperti "apakah totalnya 5000 atau lebih" atau "sudah login sekaligus admin".

Yang mengecek besar-kecilnya adalah operator perbandingan (simbol yang mengecek hubungan antara dua value; === yang dibahas di bagian sebelumnya termasuk kelompok ini), sedangkan yang merangkai beberapa kondisi jadi satu adalah operator logika (simbol yang menggabungkan boolean).

Ada 4 operator perbandingan — > < >= <= — dan hasilnya selalu true atau false.

Ada 3 operator logika. && hanya true kalau kedua sisi true, || true kalau salah satu sisi true, dan ! menukar true dan false.

Kondisi yang sudah kamu susun lalu diberikan ke if statement (struktur yang menjalankan block di belakangnya hanya kalau kondisi di dalam tanda kurung bernilai true). Proses yang harus berjalan saat kondisinya false ditulis di block setelah else.

Di artikel ini if cuma dipakai untuk memastikan hasil sebuah kondisi — cara menumpuk else if dan bercabang dengan switch dibahas di artikel conditional pada kategori syntax.

const cartTotal = 4800;    // total cart
const hasCoupon = true;    // apakah punya coupon
const isMember = false;    // apakah member

console.log(cartTotal >= 5000);   // false  belum mencapai 5000
console.log(cartTotal < 5000);    // true

console.log(hasCoupon && isMember);   // false  bukan member
console.log(hasCoupon || isMember);   // true   tapi punya coupon
console.log(!isMember);               // true   membalik false

if (cartTotal >= 5000) {
  console.log("Gratis ongkir");   // berjalan hanya kalau kondisinya true
} else {
  console.log(`Kurang ${5000 - cartTotal} lagi untuk gratis ongkir`);   // ini yang berjalan kalau false
}

Tentukan menu yang tampil berdasarkan gabungan status login dan status admin. isLoggedIn (sudah login atau belum) dan isAdmin (admin atau bukan) sudah dideklarasikan.

① Tampilkan hasil pengecekan apakah sudah login sekaligus admin.

② Tampilkan hasil pengecekan apakah sudah login tapi bukan admin.

③ Tampilkan "Halaman Saya" hanya kalau kondisi ② terpenuhi.

Truthy dan Falsy — Value yang Dianggap False oleh if

Di dalam tanda kurung if, kamu bisa menaruh value selain true / false. Kalau itu terjadi, JavaScript membaca value yang diberikan sebagai salah satu dari keduanya.

Value yang dibaca sebagai false disebut falsy, dan sisanya disebut truthy (value yang diperlakukan seperti true di dalam kondisi). Value falsy yang akan kamu temui di dalam kondisi cuma ada 6, jadi begitu keenamnya kamu hafal, sisanya bisa dianggap truthy.

Keenamnya adalah false, number 0, string kosong "", null (value yang sengaja dipasang untuk menandakan tidak ada apa-apa di sana), undefined (value yang menandakan belum ada yang di-assign), dan NaN. Kapan memakai null dan kapan memakai undefined dibahas lagi di artikel berikutnya.

Dalam praktiknya yang paling sering kamu temui cuma 0 dan "", jadi cukup kenali keduanya lebih dulu. NaN punya perilaku khusus: dibandingkan dengan dirinya sendiri memakai === pun hasilnya tetap false, jadi pengecekan NaN memakai cara tersendiri.

Yang sering menjebak adalah number 0 dan string kosong.

Saat jumlah review masih 0, atau kolom pencarian masih kosong (""), value itu kalau langsung diberikan ke if akan membuat kondisinya tidak terpenuhi. Maksudmu mengecek "apakah value-nya ada", tapi yang benar-benar dicek justru "apakah value-nya bukan nol dan tidak kosong".

const reviewCount = 0;    // jumlah review
const searchWord = "";    // teks yang diketik di kolom pencarian

if (reviewCount) {
  console.log("Ada review");
}
if (searchWord) {
  console.log("Ada kata pencarian");
}
// 0 dan string kosong keduanya falsy, jadi keduanya tidak berjalan

if (reviewCount === 0) {
  console.log("Belum ada review");   // ini yang berjalan
}

Tulis Kondisinya Lengkap Kalau 0 Termasuk Value yang Bermakna

Untuk value yang angka 0-nya sendiri sudah bermakna — jumlah stok, jumlah data, nominal uang — menulis if (stock) justru melewatkan block itu tepat saat value-nya 0. Kalau apa yang mau kamu cek dituliskan lengkap, misalnya stock > 0 atau stock === 0, maksudmu juga jadi jelas bagi orang yang membaca kodenya.

Tulis kode yang menampilkan jumlah stok. mugStock yang stoknya habis dan bottleStock yang stoknya masih ada sudah dideklarasikan.

① Pakai mugStock langsung sebagai kondisi, lalu tulis kode yang menampilkan baris berisi jumlah stok, misalnya "Mug: sisa 5". Di langkah ini kamu memang sedang membuktikan apa yang terjadi, jadi hasil yang benar adalah baris itu TIDAK muncul.

② Pakai bottleStock sebagai kondisi dengan cara yang sama, lalu tampilkan jumlah stoknya dengan format yang sama.

③ Buat percabangan berdasarkan apakah mugStock lebih besar dari 0: tampilkan "Mug: sisa X" kalau stoknya ada, dan "Mug: stok habis" kalau stoknya kosong.

Short-Circuit Evaluation — Menyiapkan Default dengan ||

User yang mendaftar tanpa mengisi display name pun tetap harus melihat sesuatu di layar. Logika "pakai default kalau value-nya tidak ada" seperti ini bisa ditulis dalam 1 baris dengan ||.

Ini bisa dilakukan karena && dan || tidak menghasilkan boolean — keduanya mengembalikan value dari salah satu sisi yang menentukan hasilnya. Kalau yang kamu gabungkan adalah value true dan false, hasilnya tetap keluar sebagai true atau false, jadi tidak bertentangan dengan penjelasan sebelumnya.

Kalau value di sisi kiri truthy, || mengembalikan value kiri itu apa adanya dan sisi kanannya tidak dievaluasi sama sekali. Value kanan baru dikembalikan kalau sisi kiri falsy.

&& bekerja sebaliknya: kalau sisi kiri falsy, value kiri itu yang dikembalikan tanpa mengevaluasi sisi kanan. Perilaku "tidak melihat sisi kanan sampai benar-benar perlu" ini disebut short-circuit evaluation (melewatkan evaluasi sisi kanan begitu sisi kiri saja sudah menentukan hasilnya).

const nickname = "";   // dibiarkan kosong

// || mengembalikan sisi kanan hanya kalau kiri falsy
console.log(nickname || "Tamu");    // Tamu
console.log("Bob" || "Tamu");        // Bob  sisi kanan tidak pernah dievaluasi

// && mengembalikan value kiri kalau itu falsy, tanpa mengevaluasi kanan
console.log(0 && "ada stok");   // 0
console.log(5 && "ada stok");   // ada stok

Kalau 0 atau String Kosong Harus Dipertahankan, || Tidak Cukup

|| mengganti semua value falsy dengan default-nya, jadi value falsy yang sebenarnya bermakna pun ikut hilang — misalnya saldo poin 0, atau "0" yang diketik user. Kalau default cuma boleh dipakai saat value-nya null atau undefined, pakai operator lain, yaitu ??, yang dibahas di artikel 9.

Terapkan default pada display name dan saldo poin. guestName (dibiarkan kosong), memberName (sudah diisi), dan memberPoint (saldo poin) sudah dideklarasikan.

① Tampilkan display name yang berubah jadi "Tamu" kalau guestName kosong.

② Terapkan pola yang sama pada memberName, lalu tampilkan hasilnya.

③ Terapkan pola yang sama pada memberPoint dengan default 100, lalu tampilkan hasilnya.