Operator Perbandingan JavaScript untuk Pemula

operator perbandingan itu fondasi sebelum kalian nyentuh perbedaan var, let, dan const lebih dalam, atau bahkan sebelum ngerti array methods kayak map, filter, dan reduce. hampir setiap logika di javascript, dari if, while, sampai validasi form, pasti pakai operator ini.

saya ingat pertama kali belajar javascript, paling sering bingung bukan di sintaksnya, tapi di kenapa "5" == 5 hasilnya true dan "5" === 5 hasilnya false. di artikel ini saya bahas tuntas biar kalian tidak ngalamin kebingungan yang sama.

1. Apa Itu Operator Perbandingan?

operator perbandingan itu simbol yang dipakai buat membandingkan dua nilai, dan hasilnya selalu boolean: true atau false. nilai boolean inilah yang nanti dipake di if, ternary, atau array method kayak filter.

contoh paling sederhana:

console.log(5 > 3);    // true
console.log(5 < 3);    // false
console.log(5 === 5);  // true

meskipun kelihatan sepele, salah pilih operator bisa bikin bug yang susah dilacak, terutama waktu bandingin string dengan angka atau nilai null dengan undefined.

2. Daftar Operator Perbandingan

ini tabel lengkap operator perbandingan yang tersedia di javascript:

loose (==, !=) akan mengubah tipe data secara otomatis sebelum dibandingkan, sedangkan strict (===, !==) memperlakukan tipe data yang berbeda sebagai nilai yang berbeda.

3. Loose vs Strict Equality

ini bagian paling penting dan paling sering bikin pemula bingung. langsung aja lihat contohnya:

// Loose equality (==), tipe data di-coerce
console.log(5 == "5");      // true  (string "5" diubah jadi number 5)
console.log(true == 1);     // true  (true diubah jadi 1)
console.log(null == undefined);  // true  (keduanya dianggap "kosong")
console.log(0 == false);     // true  (false diubah jadi 0)

// Strict equality (===), tipe data harus sama
console.log(5 === "5");     // false (number vs string)
console.log(true === 1);    // false (boolean vs number)
console.log(null === undefined);  // false (null vs undefined)
console.log(0 === false);   // false (number vs boolean)

aturan praktis yang selalu saya pegang: selalu pakai === dan !==, kecuali kalian benar-benar paham kapan loose equality dibutuhkan. alasannya, loose equality sering menimbulkan bug yang tidak terduga karena javascript mengubah tipe data secara diam-diam.

contoh bug yang sering kejadian:

// Bug: form input selalu string, padahal di database angka
let umur = "20";        // dari form input
if (umur == 25) {       // false? salah, ini tetap string "20"
  // blok ini tidak jalan
}

// Solusi: pakai ===
if (umur === 25) {      // false, jelas
  // ...
}

// Atau konversi dulu tipe datanya
if (Number(umur) === 25) {
  // ...
}

4. Perbandingan dengan null dan undefined

bagian ini juga sering bikin bingung. null, undefined, dan 0 punya perilaku yang aneh waktu dibandingin secara loose:

console.log(null == undefined);   // true (keduanya dianggap kosong)
console.log(null == 0);           // false
console.log(undefined == 0);      // false
console.log(null === undefined);  // false (tipe berbeda)
console.log(null === null);       // true
console.log(undefined === undefined); // true

cara paling aman kalau mau ngecek apakah sebuah variabel null atau undefined:

let value = null;

// Cara 1: loose equality (cek null atau undefined sekaligus)
if (value == null) {
  console.log("value null atau undefined");
}

// Cara 2: pakai nullish coalescing untuk fallback
let name = value ?? "default";
console.log(name);  // "default"

satu jebakan yang saya baru paham setelah baca MDN dan javascript.info: == dan > < >= <= pakai algoritma beda. makanya null == 0 itu false, tapi null >= 0 itu true. kok bisa? karena untuk ==, null cuma sama dengan undefined, tidak di-coerce ke angka. sedangkan untuk >=, null diubah jadi 0 dulu baru dibandingin. jadi jangan heran kalau:

console.log(null > 0);   // false
console.log(null == 0);  // false
console.log(null >= 0);  // true (!)

5. Perbandingan String

waktu bandingin string, javascript membandingkan karakter demi karakter berdasarkan nilai unicode:

console.log("a" < "b");     // true
console.log("apple" < "banana");  // true
console.log("Z" < "a");     // true (huruf besar "Z" punya nilai unicode lebih kecil dari "a" kecil)

// Yang perlu diwaspadai
console.log("10" < "9");    // true (!) karena "1" lebih kecil dari "9" di posisi pertama
console.log(10 < 9);        // false, karena ini number

kalau mau bandingin string secara “alami” (di mana “10” lebih besar dari “9”), konversi dulu ke number:

console.log(Number("10") < Number("9"));  // false, sesuai ekspektasi

untuk sorting yang lebih natural, pakai localeCompare dengan opsi numeric, ini kepake banget kalau kalian sorting daftar file:

console.log("10".localeCompare("9", undefined, { numeric: true })); // 1, artinya "10" > "9"
console.log("file10.txt".localeCompare("file2.txt", undefined, { numeric: true })); // 1

// sorting natural
["file10.txt", "file2.txt", "file1.txt"].sort((a, b) =>
  a.localeCompare(b, undefined, { numeric: true })
);
// ["file1.txt", "file2.txt", "file10.txt"]

6. Operator Perbandingan dengan NaN dan -0

NaN (Not a Number) punya perilaku unik: dia tidak sama dengan dirinya sendiri, bahkan dengan ===:

console.log(NaN === NaN);  // false (!)
console.log(NaN == NaN);   // false (!)

// Cara cek NaN yang benar
console.log(Number.isNaN(NaN));     // true
console.log(Number.isNaN("abc"));   // false (karena "abc" belum diubah jadi number)
console.log(isNaN("abc"));          // true (!) isNaN() global akan coerce dulu

isNaN() global lebih longgar karena dia ngecoerce dulu, sedangkan Number.isNaN() strict dan hanya return true kalau nilai memang NaN. saran saya, defaultnya pakai Number.isNaN().

satu lagi yang jarang dibahas: JavaScript punya dua nol, +0 dan -0. ini efek dari standar IEEE 754. kalau pakai ===, keduanya dianggap sama:

console.log(+0 === -0); // true
console.log(1 / +0); // Infinity
console.log(1 / -0); // -Infinity, beda!

kalau kalian butuh bedain +0 dan -0, atau butuh NaN === NaN jadi true, pakai Object.is() yang pakai algoritma SameValue dari spek ECMAScript:

console.log(Object.is(NaN, NaN)); // true
console.log(Object.is(+0, -0));   // false
console.log(NaN === NaN);         // false
console.log(+0 === -0);           // true

Object.is() ini dipakai internal oleh React useState buat nentuin apakah state beneran berubah. sedangkan Array.includes() dan Map/Set pakai varian SameValueZero yang anggap NaN === NaN itu true tapi tetap anggap +0 === -0 itu true. jadi kalau kalian pakai includes, [NaN].includes(NaN) hasilnya true, beda dengan indexOf yang pakai ===.

7. Membandingkan Object dan Array

perbandingan object di javascript mengecek referensi, bukan isi:

const a = { name: "Andi" };
const b = { name: "Andi" };
const c = a;

console.log(a == b);   // false (object berbeda, walaupun isinya sama)
console.log(a == c);   // true (referensi yang sama)

// Array sama kayak object
const arr1 = [1, 2, 3];
const arr2 = [1, 2, 3];
console.log(arr1 == arr2);  // false

kalau mau membandingkan isi object/array, solusinya JSON.stringify atau library deep-equal:

const a = { name: "Andi" };
const b = { name: "Andi" };

console.log(JSON.stringify(a) === JSON.stringify(b));  // true

// Atau untuk array
const arr1 = [1, 2, 3];
const arr2 = [1, 2, 3];
console.log(JSON.stringify(arr1) === JSON.stringify(arr2));  // true

kekurangan cara JSON.stringify: tidak ngecek property undefined atau urutan key yang berbeda, dan gagal kalau ada circular reference. untuk kasus production, pakai library seperti lodash isEqual() atau structuredClone dibandingin manual. ingat, perbandingan == === dan Object.is() semuanya cek referensi untuk object, bukan isi struktur, sesuai spek ECMAScript IsStrictlyEqual dan SameValue.

8. Relational: Kalau Tipe Beda Diubah ke Number Dulu

untuk < > <= >=, JavaScript tidak main unicode kalau salah satu bukan string. dia coba ubah keduanya jadi number dulu, makanya sering kejutan:

console.log("2" > 1);      // true, "2" jadi 2
console.log("01" == 1);    // true, "01" jadi 1
console.log(true > 0);     // true, true jadi 1
console.log(false == 0);   // true, false jadi 0
console.log(null > 0);     // false, null jadi 0
console.log(undefined > 0);// false, undefined jadi NaN
console.log("a" > 1);      // false, "a" jadi NaN

aturan ini beda dengan == yang punya tabel coercion sendiri. makanya saya biasakan, kalau mau bandingin, samain tipe dulu pakai Number() atau String(), jangan ngandelin coercion diam-diam.

9. Studi Kasus: Validasi Form

kombinasi operator perbandingan paling sering muncul di validasi form:

function validasiForm(umur, email) {
  const errors = [];

  // Cek umur (harus angka dan di antara 17-60)
  if (typeof umur !== "number") {
    errors.push("Umur harus angka");
  } else if (umur < 17) {
    errors.push("Umur minimal 17 tahun");
  } else if (umur > 60) {
    errors.push("Umur maksimal 60 tahun");
  }

  // Cek email sederhana (wajib ada @ dan .)
  if (typeof email !== "string" || !email.includes("@") || !email.includes(".")) {
    errors.push("Format email tidak valid");
  }

  return errors.length === 0 ? "Valid" : errors;
}

console.log(validasiForm(25, "[email protected]"));   // "Valid"
console.log(validasiForm(15, "[email protected]"));   // ["Umur minimal 17 tahun"]
console.log(validasiForm(25, "andi-mail-com"));   // ["Format email tidak valid"]

typeof dipakai buat ngecek tipe data sebelum perbandingan, karena bandingin tipe yang salah bisa ngasih hasil yang misleading.

Kesimpulan

• ada dua jenis: loose (==, !=) dan strict (===, !==), defaultnya selalu pakai yang strict (===, !==) biar tidak kena coercion, aktifkan eslint eqeqeq kalau pakai linter
• === membandingkan nilai dan tipe sekaligus, == mengubah tipe otomatis sesuai Abstract Equality Comparison
• null == undefined itu true, tapi null === undefined itu false, dan null >= 0 itu true karena relasional ubah null jadi 0 dulu
• bandingin string dilakukan berdasarkan unicode, “10” < “9” itu true kalau tetap string, pakai localeCompare dengan { numeric: true } untuk sorting natural
• NaN tidak sama dengan dirinya sendiri, pakai Number.isNaN() buat ngecek, kalau butuh NaN === NaN jadi true pakai Object.is(NaN, NaN)
• +0 === -0 itu true, Object.is(+0, -0) itu false, includes pakai SameValueZero jadi [NaN].includes(NaN) true
• bandingin object/array itu berdasarkan referensi, bukan isi
• studi kasus paling umum: validasi form, di mana strict equality + typeof jadi kombinasi andalan

Baca Juga Mengenai :

• perbedaan var, let, dan const di JavaScript
• array methods JavaScript: map, filter, reduce
• operator logika JavaScript