What is the difference between == and === in JavaScript?
The direct and concise answer is…
the difference between == vs === in JavaScript is that == first performs type coercion if necessary and then compares the two operands, while === does not perform type coercion.
But what does “type coercion” mean? and in which cases does == perform type coercion?
Table of Contents
Difference between == and === with examples
If the values to be compared are not of the same data type, the loose equality operator (==):
- first it performs type coercion, that is, it converts the data type of one of the operands so that the 2 values have the same data type
- then it performs the comparison
For example, if the values to compare are the numeric value 3 and the string value “3”:
// Example of == performing type coercion
// the string '3' is converted to the numeric value 3
// then it compares the two numeric values: 3 y 3
// which results in true
'3' == 3 // 👉 trueThe strict equality operator (===), unlike the loose equality operator (==), does not perform type coercion, instead it considers two values of different types to be different. It will never consider two values of different data type to be equal.
// Loose equality operator
3 == '3' // 👉 true
3 == 3 // 👉 true
// Strict equality operator
3 === '3' // 👉 false
3 === 3 // 👉 trueLoose equality operator (==)
The loose equality operator may also be referred to as the weak equality operator or abstract equality operator. From here on, we will use the term “loose equality operator”.
// Loose equality examples
3 == '3' // 👉 true
'3' == 3 // 👉 true
1 == true // 👉 true
0 == false // 👉 true
'false' == false // 👉 false
3 == true // 👉 false
0 == null // 👉 false
0 == undefined // 👉 false
null == undefined // 👉 trueIf one of the operands is a boolean and the other operand is not, the boolean value is converted to a numeric value. For example, true is converted to the number 1, and false is converted to the number 0. The operands are then compared again.
1 == true // 👉 true, true is converted to 1
0 == false // 👉 true, false is converted to 0If a numeric value is compared to a string, an attempt is made to convert the string to a number. A conversion failure results in NaN and the comparison will return false.
NaN stands for Not-A-Number.
// '123' is converted to 123
// returns true
'123' == 123 // 👉 true
// 'Leo' can't be converted to a number
// attempting to convert 'Leo' to a number results in NaN
// so the comparison returns false
'Leo' == 123 // 👉 falseIf one of the operands is null or undefined, the other operand must also be null or undefined to return true, otherwise the loose equality operator will return false.
0 == null // false
0 == undefined // false
false == null // false
false == undefined // false
null == undefined // trueStrict equality operator (===)
The strict equality operator tests whether its two operands are equal and returns a Boolean result. When the two operands are of different data types, it always returns false.
// Strict equality examples
// All of the following examples return false
// because all these comparisons are comparing
// values of diferent data types
3 === '3' // false
'3' === 3 // false
1 === true // false
3 === true // false
0 === false // false
0 === null // false
0 === undefined // false
null === undefined // false
// The following examples return true because
// both the data type and the value are equal
3 === 3 // true
'3' === '3' // trueObject comparison with == and ===
When comparing objects, the loose equality operator (==) returns true if the two operands refer to the same object.
When comparing objects, the strict equality operator (===) behaves similarly to the loose equality operator.
// Object comparison examples
// ==
const business1 = {
name: 'ABC Company'
};
const business2 = {
name: 'ABC Company'
};
business1 == business2 // 👉 false
business1 == business1 // 👉 true
// ===
const book1 = {
title: 'Clean Code'
};
const book2 = {
title: 'Clean Code'
};
book1 === book2 // 👉 false
book1 === book1 // 👉 truebusiness1 == business1 returns true because the two operands point to the same object.
On the other hand, business1 == business2 returns false because the operands business1 and business2 are different object instances.
💡 Notice that the business1 and business2 objects have the same content: both have the name property with the value “ABC Company”. The same can be said for the book1 and book2 objects: both have the title property with the value “Clean Code”. Still, when comparing objects with the same structure, business1 == business2, returns false.
Referential equality is useful when you want to compare references to objects, rather than their content.
When should I use == vs ===?
The general recommendation is, unless you have a specific reason to use the loose equality operator (==), always use the strict equality operator (===) because its result is more predictable, it works as you expect. As a software engineer, strive to apply the principle of least surprise.
If you compare values of different types, the relaxed equality operator (==) first casts to the type of one of the operands, and this can sometimes produce unexpected results.
The full list of loose equality rules is somewhat complicated and hard to memorize.
By way of example, take a look at the following code snippet:
false == 'false' // 👉 false
false == '0' // 👉 true 🤯Unless you fully understand the conversions that happen with ==, in the vast majority of cases using === is preferable.
JavaScript Equality References
In summary, == performs a loose equality comparison and === performs a strict equality comparison.
If you would like to learn more details about JavaScript equality comparison, here are a couple of useful references.
