Why JavaScript Equality Is More Complicated Than == vs ===

“Use === instead of ==” is good advice, but it is only half the story. JavaScript has four equality algorithms, and the built-ins don’t all use the same one: indexOf and includes disagree about NaN, Set treats 0 and -0 as one value, and objects are never equal unless they are the same object. This post lays out all four, how == actually converts types, and which comparison to use when.

Why It Matters

Equality bugs hide in:

• deduplication: a new Set of user IDs that are sometimes numbers, sometimes strings
• cache keys: objects that “look the same”
• React dependency arrays: a new object every render looks like a change
• form validation: "0" vs 0
• numeric code that produces NaN or -0

Knowing which algorithm runs explains all of them.

The Four Algorithms

All four compare objects (including arrays and functions) by identity: two objects are equal only if they are the same object in memory.

NaN === NaN; // false
Object.is(NaN, NaN); // true
[NaN].indexOf(NaN); // -1 (strict equality)
[NaN].includes(NaN); // true (SameValueZero)
new Set([NaN, NaN]).size; // 1
 
0 === -0; // true
Object.is(0, -0); // false
new Set([0, -0]).size; // 1

How == Converts

Loose equality converts values until both sides have the same type, then compares them. Simplified, it follows this order:

Each arrow to the right is a “yes”; a “no” moves down to the next question. Applied to the famous examples:

null == undefined; // true: the special pair
null == 0; // false: null only equals undefined
null >= 0; // true: relational operators use a different rule (ToNumber, so 0 >= 0)
'' == 0; // true: '' becomes 0
'0' == false; // true: false becomes 0, then '0' becomes 0
[] == ''; // true: [] becomes ''
[] == ![]; // true: ![] is false → 0, and [] → '' → 0
({}) == '[object Object]'; // true: the object becomes its string form

null >= 0 being true while null == 0 is false shows that == is not just “the comparison operators, but for equality”: it has its own rules.

Famous == Puzzles, Explained

The same few rules explain every “JavaScript is weird” example. Each result below was checked by running it:

Two patterns cover most of them: booleans turn into numbers before anything else, and objects turn into strings (an array joins its items). That is why '' == '0' is false while '' == 0 and '0' == 0 are both true: == isn’t transitive.

The Two Values That Break ===

NaN

NaN (“not a number”) comes from failed numeric conversions and invalid math, and it is the only value not equal to itself under ===, so x === NaN is always false.

• Check with Number.isNaN(x) or Object.is(x, NaN).
• Avoid the global isNaN, which converts first, so isNaN('hello') is true.

-0

JavaScript numbers follow IEEE 754, which has a positive and a negative zero. === treats them as equal, which is usually right, but they behave differently in division and a few functions:

1 / -0; // -Infinity
Math.sign(-0); // -0
String(-0); // '0': hidden when printed
Object.is(-0, 0); // false

-0 turns up from rounding negative values (Math.round(-0.4)) and multiplying zero by a negative number. It matters for coordinates, animation direction and anything that divides. Object.is is the only operator that tells them apart.

Objects: Identity, Not Contents

[1, 2] === [1, 2]; // false: two different arrays
const a = { id: 1 };
const b = a;
a === b; // true: same object

This identity rule is what React, Map and Set rely on:

• Set and Map keys compare by identity (SameValueZero), so new Set([{ id: 1 }, { id: 1 }]) has two entries. Use the id as the key instead.
• React dependency arrays compare with Object.is. An object or function created during render is “new” every time and re-runs the effect. Depend on primitives, or memoize the object.
• Deep equality has no built-in operator. Compare the fields that matter, or use a tested helper (for example assert.deepStrictEqual in Node.js, expect().toEqual() in tests).

Going Deeper: Equality Beyond Numbers and Objects

Which Built-ins Use Which Algorithm

You rarely call an equality algorithm by name; built-ins choose for you. This map explains most “why didn’t it find it?” bugs:

Two consequences worth remembering: switch (NaN) { case NaN: … } never matches, because switch uses strict equality; and React compares state and dependencies with Object.is, so a new object with the same contents always counts as a change.

Strings That Look Equal but Aren’t

Unicode lets some characters be written in more than one way. “é” can be one code point (U+00E9) or an “e” followed by a combining accent (U+0065 U+0301). They render identically, but they are different strings:

const composed = '\u00e9';
const decomposed = 'e\u0301';
composed === decomposed; // false
composed.length; // 1, while decomposed.length is 2
composed.normalize() === decomposed.normalize(); // true
composed.localeCompare(decomposed); // 0: equal for sorting and display

This shows up with text from different keyboards, operating systems (macOS file names are often decomposed) and copy and paste. Normalize user-facing text (usually to NFC) before storing it, using it as a key or comparing it, and use localeCompare or Intl.Collator for sorting and case-insensitive comparison.

BigInt, Symbol and Dates

• BigInt: 1n == 1 is true, but 1n === 1 is false, because they are different types. Don’t mix BigInt and Number in maps or sets.
• Symbol: every Symbol('x') is unique, so two with the same description are never equal. Symbol.for('x') returns the same shared symbol each time.
• Date: dates are objects, so new Date(0) == new Date(0) is false. Compare their timestamps instead: a.getTime() === b.getTime().

Which Comparison to Use

Test Yourself

Predict each output, then open the answer. Every answer was checked by running the code.

console.log([] == false, Boolean([]));

console.log(null == 0, null >= 0, undefined == 0, undefined >= 0);

const values = new Set([1, '1', 1.0, NaN, NaN, 0, -0]);
console.log(values.size);

const list = [NaN];
console.log(list.indexOf(NaN), list.includes(NaN), list.findIndex(Number.isNaN));

const a = 'hi';
const b = new String('hi');
console.log(a === 'hi', b === 'hi', b == 'hi', typeof b);

const left = { x: 1, y: 2 };
const right = { y: 2, x: 1 };
console.log(left == right, JSON.stringify(left) === JSON.stringify(right));

Key Takeaways

Equality interacts with the object model: what happens when you read a property covers how objects are built, and the hidden cost of mutable state explains why identity comparisons are how UI frameworks detect change.

Sources

• MDN: String.prototype.normalize()
• MDN: Intl.Collator
• React docs: useState: Updating objects and arrays
• ECMAScript specification: IsLooselyEqual, SameValue and SameValueZero
• MDN: Equality comparisons and sameness
• MDN: Number.isNaN()
• React docs: useEffect dependencies
• ESLint: eqeqeq