Comparison and strict equality

The comparison operators <, >, <= and >= return a boolean value: true or false. They work as in school: 3 < 5 is true, and 5 >= 7 is not. Equality is more interesting. JavaScript checks it with two operators, and on the same values they can answer differently:

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

The last two lines compare the string "5" with the number 5. The === operator answers "not equal", and == answers "equal".

To see why, picture the counter of a currency exchange office. Values of different types are like money in different currencies: the string "5" is five rubles, and the number 5 is five dollars. There are two ways to compare them, and JavaScript has an operator for each.

Strict equality

The === operator is called strict equality. It is like a strict cashier who compares both the currency and the amount. To this cashier five rubles are not equal to five dollars, even though the digit is the same.

The rule is: === gives true only when the values have the same type and the same value. For two numbers it is ordinary equality: 2 + 2 === 4 gives true.

What follows from it:

• a string and a number are different types, so "5" === 5 gives false;
• for the same reason null === undefined is false too;
• the !== operator answers the opposite: "5" !== 5 gives true.

Loose equality

The == operator is called loose equality. It is a cashier who first changes both amounts into one currency and only then compares. If the values have different types, == turns them into one type. This change of type is called type conversion.

== has its own exchange rate. It turns a string and a boolean into a number:

• the string "5" becomes the number 5;
• the empty string becomes 0;
• true becomes 1, and false becomes 0.

console.log(0 == "", true == 1); // true true
console.log(null == undefined, null === undefined); // true false
console.log(null == 0); // false

Let's walk through the program line by line:

1. 0 == "" gives true, because the empty string turned into 0; true == 1 gives true, because true became 1.
2. null == undefined gives true, while the strict null === undefined gives false.
3. null == 0 gives false, although null and zero both look like "nothing".

null and undefined follow a separate rule: with == they equal each other and nothing else. So null == 0 gives false. The != operator is the negation of ==: "5" != 5 gives false.

Here the exchange office analogy stops working. A real exchange office has one rate for everyone, while == has its own rule for each pair of types, and null takes no part in the exchange at all.

A special case: NaN

One more special case is NaN. This value equals nothing, not even itself: both NaN === NaN and NaN == NaN give false. So you cannot find out by comparison whether a variable holds NaN.

Which operator to choose

The conversion rules of == are hard to keep in mind, so code compares with === and !==. Then a string never turns out equal to a number.

Interviewers often ask about the difference between == and ===. A good answer has three parts:

• === compares type and value and converts nothing;
• == with different types first converts the values to one type, usually a number;
• so code uses === and !==, since the results of == are often predicted wrong.

Common mistake

An empty string is compared with zero through == to check whether a person entered the number 0:

const input = "";
console.log(input == 0); // ✗

The program prints true, although the string holds no digits: == turned "" into 0. For the same reason false == 0 gives true as well. The strict comparison input === 0 gives false, because a string is not equal to a number.

Key points

• === gives true only when both the type and the value match; !== answers the opposite.
• == with different types first converts the values to one type: "5" == 5 and 0 == "" give true.
• With ==, null and undefined equal only each other, and NaN is not equal even to itself.
• Code compares with === and !==.