Equality & sameness

Four ways to check sameness

When you compare two values, you ask one question: are these the same? JavaScript has four different sets of rules for answering it. Each set of rules is a fixed list of steps. The specification, the official rulebook for JavaScript, calls such a list an algorithm.

You met ===, ==, NaN, and the null/undefined rule in earlier lessons. This lesson puts all four sets of rules side by side. Then you can predict each answer instead of memorizing a big table.

The specification gives each set of rules a name:

• IsStrictlyEqual is used by ===.
• IsLooselyEqual is used by ==.
• SameValue is used by Object.is.
• SameValueZero is used by includes, Map, and Set.

SameValueZero is SameValue with one change: it counts -0 (negative zero) and +0 (positive zero) as the same.

The table below compares the four. Read each row as: "these rules, used here, give these answers."

Strict equality, written ===, is the one to use by default. It never converts either value. It checks like this:

• Are both values the same type? If not, the answer is false right away.
• Are they primitives, the simple values like numbers, strings, and booleans? Then it checks that the values are the same.
• Are they objects, arrays, or functions? Then it checks that both sides point to the very same object.

A variable never holds an object itself. It holds a reference: a note that says where the object lives. So for objects, === compares the two references.

1const user = "Asha";2const sameName = "Asha";3 4console.log(user === sameName);5console.log(3 === "3");6console.log(true === 1);

Line 4 prints true, because both variables hold the same string, "Asha". Line 5 prints false, because the string "3" and the number 3 are different types. Line 6 also prints false. true is a boolean and 1 is a number, so they are different types too.

1const shared = { id: 1 };2const alsoShared = shared;3const twin = { id: 1 };4 5console.log(1 === "1");6console.log(shared === alsoShared);7console.log(shared === twin);8console.log(NaN === NaN);9console.log(-0 === +0);

Lines 5 to 7 follow the rules above:

• Line 5 prints false: a number and a string are different types.
• Line 6 prints true: shared and alsoShared point to the same object.
• Line 7 prints false: twin looks the same, but it is a separate object.

Lines 8 and 9 are the two surprises:

• Line 8 prints false. NaN means "Not a Number". It is the result of a number calculation that failed. By the old number rules, NaN is not equal to anything, not even itself.
• Line 9 prints true. JavaScript has a negative zero, -0, and a positive zero, +0. Strict equality treats them as the same zero.

The playground below asks all four sets of rules about these cases, and about strings, numbers, BigInts, arrays, and objects too.

1const firstCart = { total: 3 };2const savedCart = firstCart;3const otherCart = { total: 3 };4 5console.log(firstCart === savedCart);6console.log(firstCart === otherCart);

Line 2 does not copy the cart. It copies the reference, so savedCart points to the same cart as firstCart. Line 5 prints true. Line 3 makes a brand-new cart with the same contents. Line 6 prints false, because it is a different object.

=== never looks inside two objects to compare their properties. If you want to know whether two carts hold the same things, compare the properties yourself, like firstCart.total === otherCart.total.

1const a = NaN;2const b = NaN;3console.log(a === b);4console.log(a == b);5console.log(Object.is(a, b));6console.log([a].includes(b));

Loose equality, written ==, is not random. It follows a fixed list of steps. At each step it asks: "Are the two types the same yet? If not, is there a rule to convert one of them?"

To convert a value means to make a new value of a different type from it, like turning the text "5" into the number 5. The Type coercion lesson showed the spec's steps for this:

• ToNumber turns a value into a number.
• ToPrimitive turns an object into a primitive, like a string or a number.
• ToBoolean turns a value into true or false.

== uses the first two.

Here are the steps of ==, in order:

1. Same type? Compare with strict equality.
2. One side is null and the other is undefined? The answer is true. Next to anything else, null and undefined give false.
3. A number and a string? Turn the string into a number with ToNumber, then start again.
4. A boolean? Turn it into a number: true becomes 1 and false becomes 0. Then start again.
5. An object and a primitive? Turn the object into a primitive with ToPrimitive, then start again.
6. A BigInt and a string or a number? Use the BigInt rules shown below.
7. No rule fits? The answer is false.

1console.log(null == undefined);2console.log(false == 0);3console.log("" == 0);4console.log("tea" == 0);

• Line 1 prints true. That is the special null and undefined rule.
• Line 2 prints true. false becomes 0, and 0 equals 0.
• Line 3 prints true. The empty string "" becomes 0.
• Line 4 prints false. The word "tea" can't become a real number, so it becomes NaN. And NaN is not equal to 0.

A BigInt is a whole number of any size. You write it with an n at the end, like 0n. Loose equality has its own rules for BigInts.

1console.log(0n == "0");2console.log(0n === 0);3console.log(0n == 0);4console.log(1n == 1.5);

• Line 1 prints true. == reads the string "0" as the BigInt 0n.
• Line 2 prints false. === never converts, and a BigInt and a number are different types.
• Line 3 prints true. == compares a BigInt and a number by their value.
• Line 4 prints false. 1.5 is not a whole number, so it can't match any BigInt.

The picture shows the steps for false == "". The step-through below starts with this same pair.

1looseEquals(false, "");Run2// 1. Same type? Compare with ===.3// 2. null and undefined match only each other.4// 3. Strings, booleans, and objects may be converted.5// 4. BigInts have their own string and number rules.6// 5. No rule fits? The answer is false.

Object.is(a, b) is a function that compares two values. It uses the rules the spec calls SameValue. It never converts values. For objects, it checks the reference, just like ===. It gives a different answer from === in only two cases:

• Object.is(NaN, NaN) is true. === says false.
• Object.is(-0, +0) is false. === says true.

1const score = Number("not a score");2 3console.log(Number.isNaN(score));4console.log(Object.is(score, NaN));5console.log(Object.is(-0, 0));

• Line 1 tries to turn the text "not a score" into a number. That fails, so score is NaN.
• Line 3 prints true. Number.isNaN is a function made for exactly this check.
• Line 4 asks the same question with Object.is. It also prints true.
• Line 5 prints false, because SameValue keeps negative zero apart from positive zero.

1const rounded = Math.round(-0.4);Run2console.log(rounded);3console.log(1 / rounded);4console.log(Object.is(rounded, -0));5console.log(JSON.parse(JSON.stringify(rounded)));6console.log(Number.isNaN(NaN));7console.log(NaN !== NaN);

Where does negative zero come from? Some calculations make it, such as Math.round(-0.4) or -1 * 0. Code that only shows numbers on a page can usually ignore it. But some number code can't, because 1 / -0 gives -Infinity while 1 / 0 gives Infinity. JSON loses the sign: JSON.stringify(-0) gives the text "0".

SameValueZero is the set of rules that lists and collections use to find values. It takes one rule from each of the other two:

• Like Object.is, it says NaN is the same as NaN.
• Like ===, it says -0 and +0 are the same.

Three tools use it. includes checks whether an array holds a value. A Set is a collection that keeps each value only once. A Map stores values under keys. So [NaN].includes(NaN) is true, and new Set([-0]).has(0) is true. But [NaN].indexOf(NaN) is -1, because indexOf uses ===.

1const tasks = [NaN, "tea", NaN];2 3console.log(tasks.includes(NaN));4console.log(tasks.indexOf(NaN));5 6const ids = new Set([1, 1, 2]);7console.log(ids.size);

• Line 3 prints true. includes finds NaN.
• Line 4 prints -1, which means "not found". indexOf uses ===, and NaN === NaN is false.
• Line 6 puts 1, 1, and 2 into a Set, which keeps each value once. Line 7 prints 2.

1console.log([NaN].includes(NaN));Run2console.log([NaN].indexOf(NaN));3const map = new Map([[NaN, "stored"]]);4console.log(map.get(NaN));5const set = new Set([-0]);6console.log(set.has(0));

1console.log([NaN].includes(NaN));2console.log([NaN].indexOf(NaN));3const map = new Map([[NaN, "stored"]]);4console.log(map.get(NaN));5const set = new Set([-0]);6console.log(set.has(0));

The table below asks all four sets of rules about four well-known pairs. Read each row as: "for this pair, each set of rules gives this answer."

Where you'll use this

Real code uses a few simple choices:

• Use === for everyday comparisons.
• Use value == null when you mean "the value is missing", whether it is null or undefined.
• Use Object.is when your code must treat NaN as equal to NaN, or must see the sign of zero.

React, a popular library for building pages, uses Object.is to check whether some state has changed. So these details sometimes matter when you fix bugs in a page.

1if (user.middleName == null) {2  showOptionalNameField();3}4 5if (Object.is(nextTemperature, previousTemperature)) {6  skipChartUpdate();7}8 9const uniqueIds = new Set(idsFromSeveralLists);

• Line 1 checks for a missing middle name: null or undefined.
• Line 5 skips redrawing a chart when the temperature has not changed.
• Line 9 makes a Set, which keeps each ID only once.

1const profile = { nickname: null };2const ageText = "3";3const ids = [1, 1, 2];4 5console.log(profile.nickname == null);6console.log(Number(ageText) === 3);7console.log(new Set(ids).size);

• Line 5 checks a profile field that may be missing in either way. It prints true.
• Line 6 turns the form text into a number first, then uses ===. It prints true.
• Line 7 drops the repeated ID and prints 2.

1const savedPin = 1234;2const enteredText = "1234";3const enteredPin = Number(enteredText);4 5console.log(enteredPin === savedPin);

Line 2 is text, because form fields always give you strings. Line 3 turns it into a number on purpose. Now line 5 can use ===, and no hidden conversion can let a wrong value through. Real passwords are different: don't compare them in page code at all. Let the server check them.

A Set does some of this work for you. new Set(values) uses SameValueZero to remove repeats. So all the NaN values become one, and -0 and +0 count as one value.

Common misconceptions

For each question, first name the set of rules. Then follow its steps. Every answer comes with an explanation.

Key takeaways

• Use === by default. It checks for the same type and the same value, and never converts.
• == follows fixed conversion steps in order. Use it on purpose, mostly as value == null.
• Object.is uses SameValue. NaN matches NaN, and -0 is different from +0.
• includes, Map, and Set use SameValueZero. NaN matches NaN, and -0 matches +0.
• When both sides are objects, all four compare references. None of them compares the properties inside.

Up next: Checking types reliably.