Operator Kesamaan JavaScript: == vs === dan Object.is

Dua Cara Bertanya "Apakah Keduanya Sama?"

JavaScript memberimu dua operator kesamaan: === (ketat) dan == (longgar). Bentuknya hampir sama. Perilakunya sangat berbeda.

console.log(1 === 1);      // true
console.log(1 === "1");    // false

console.log(1 == 1);       // true
console.log(1 == "1");     // true

=== mengecek apakah kedua operand bertipe sama dan bernilai sama. == mengubah operand ke tipe bersama terlebih dulu, baru membandingkan. Konversi itu, yang disebut type coercion, adalah sumber utama reputasi buruk kesamaan di JavaScript.

Versi singkatnya: pakai === sebagai default. Versi panjangnya layak dibaca sekali agar kamu tahu apa yang kamu hindari.

Kesamaan Ketat: Yang Mungkin Kamu Inginkan

=== mengembalikan true hanya saat kedua sisi cocok dalam tipe dan nilai. Tanpa coercion, tanpa kejutan:

console.log(42 === 42);           // true
console.log("hi" === "hi");       // true
console.log(true === true);       // true

console.log(42 === "42");         // false - different types
console.log(0 === false);         // false - different types
console.log(null === undefined);  // false - different types

Kalau tipenya tidak cocok, jawabannya langsung false. Kalau cocok, JavaScript membandingkan nilainya. Untuk tipe primitif itu perbandingan nilai; untuk objek itu perbandingan referensi (dibahas sebentar lagi).

!== adalah operator ketidaksamaan ketat dan mengikuti aturan yang sama secara terbalik.

Kesamaan Longgar: Coercion yang Menyamar

== membiarkan kedua sisi punya tipe yang berbeda. Sebelum membandingkan, ia menjalankan serangkaian coercion untuk mencoba menyamakannya:

console.log(1 == "1");        // true - string becomes number
console.log(0 == false);      // true - boolean becomes number
console.log("" == 0);         // true - string becomes number
console.log(null == undefined); // true - special-cased
console.log("0" == false);    // true - both become 0

Aturan pastinya ada di spesifikasi, dan sebenarnya tidak terlalu buruk, tetapi mengingatnya di tengah debug adalah soal lain. "0" == false yang bernilai true menjebak bahkan developer berpengalaman. Begitu juga [] == false (juga true, karena array diubah menjadi "", yang kemudian diubah menjadi 0).

Inilah sebabnya kebanyakan panduan gaya, termasuk aturan eqeqeq di ESLint, menyuruhmu memakai === sebagai default. Kamu menukar satu karakter ketikan dengan aturan yang benar-benar bisa kamu ingat.

Satu Pola == yang Berguna

Ada satu idiom kesamaan longgar yang layak diketahui: x == null mengembalikan true saat x bernilai null atau undefined, dan false untuk semua yang lain.

function greet(name) {
    if (name == null) {
        return "Hello, stranger";
    }
    return `Hello, ${name}`;
}

console.log(greet());           // Hello, stranger
console.log(greet(null));       // Hello, stranger
console.log(greet("Rosa"));     // Hello, Rosa
console.log(greet(0));          // Hello, 0 - not treated as missing

Padanan ketatnya adalah x === null || x === undefined, yang berfungsi tetapi lebih ramai dibaca. Banyak codebase mengizinkan == null sebagai satu-satunya pengecualian yang direstui. Pilih satu aturan, lalu terapkan secara konsisten.

Objek Dibandingkan Berdasarkan Referensi

Untuk objek, array, dan fungsi, === dan == sama-sama menanyakan hal yang sama: "Apakah kedua sisi menunjuk ke objek yang sama di memori?" Bukan "apakah isinya sama?"

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

console.log(a === b);  // false - different objects
console.log(a === c);  // true - same reference
console.log(a == b);   // false - still different objects

Dua literal objek dengan isi yang identik tetaplah dua objek yang berbeda. Ini menjebak semua orang setidaknya sekali.

Untuk perbandingan berdasarkan nilai, kamu menulis helper sendiri, memakai library (lodash.isequal), atau melakukan serialisasi dengan JSON.stringify untuk objek sederhana:

const a = { x: 1, y: 2 };
const b = { x: 1, y: 2 };

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

JSON.stringify hanya berfungsi untuk data sederhana: ia mengabaikan fungsi, undefined, dan symbol, serta tidak menjamin urutan key di semua engine untuk semua bentuk objek. Ini pengecekan cepat, bukan solusi umum.

NaN Tidak Sama dengan Apa Pun

NaN ("not a number") adalah nilai yang dikembalikan JavaScript saat operasi numerik tidak punya jawaban yang bermakna, seperti 0/0, Number("abc"), atau Math.sqrt(-1). Kedua operator kesamaan mengembalikan false saat salah satu sisinya NaN, termasuk saat kedua sisinya NaN:

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

const result = Number("oops");
console.log(result);              // NaN
console.log(result === NaN);      // false - doesn't work
console.log(Number.isNaN(result)); // true - this is the check

Untuk mendeteksi NaN, pakai Number.isNaN(value). Jangan pakai isNaN global yang lebih lama, karena ia mengubah argumennya terlebih dulu, sehingga isNaN("hello") mengembalikan true, yang hampir tidak pernah kamu inginkan.

Object.is: Hampir ===, dengan Dua Perbaikan

Object.is(a, b) berperilaku seperti === kecuali pada dua kasus khusus:

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

console.log(NaN === NaN);           // false
console.log(0 === -0);              // true

Sebagian besar waktu, === adalah yang kamu inginkan. Pakai Object.is saat kamu secara khusus perlu menganggap NaN sama dengan dirinya sendiri, atau membedakan +0 dari -0. Keduanya jarang, tetapi sesekali penting di kode numerik dan di bagian dalam framework (React memakai Object.is untuk membandingkan state).

Operator Ketidaksamaan Mengikuti Pembagian yang Sama

!== itu ketat, != itu longgar, dan saran yang sama berlaku:

console.log(1 !== "1");  // true  - different types
console.log(1 != "1");   // false - coerced, values match

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

Pakai !== sebagai default. Kalau kamu sudah mengizinkan == null, kamu juga bisa mengizinkan pasangannya, != null, untuk pengecekan "bukan null dan bukan undefined".

Daftar Periksa untuk Membandingkan Sesuatu

Saat kamu perlu membandingkan dua nilai, ikuti langkah ini:

• Primitif, diharapkan bertipe sama? Pakai ===.
• Mengecek null atau undefined? x == null boleh kalau panduan gayamu mengizinkannya; kalau tidak, x === null || x === undefined.
• Mengecek NaN? Number.isNaN(x).
• Membandingkan objek berdasarkan identitas? === melakukan persis apa yang kamu inginkan.
• Membandingkan objek berdasarkan isi? Tulis helper, pakai library, atau lakukan serialisasi. Operator bawaan tidak bisa membantu.

Tetap pakai ===, perlakukan == sebagai alat khusus untuk kasus == null, dan kamu akan terhindar dari keanehan kesamaan yang memenuhi daftar FAQ JavaScript.

Berikutnya: Operator

Kesamaan hanyalah satu bagian dari kumpulan operator JavaScript. Dokumentasi berikutnya membahas sisanya: aritmetika, logika, penugasan, dan operator bentuk singkat yang akan sering kamu andalkan dalam kode sehari-hari.