Difference between == and === in JavaScript

While working with values in JavaScript, we often need to compare different values to take some decisions.

JavaScript provides 2 different operators for this purpose:

== (equality operator)
=== (strict equality operator)

Both of them are used to check if two values are equal or not. But the way they work is different.

Let's see the difference between them.

Equality operator (==)

The equality operator (==) compares two values without checking their data types and returns true or false accordingly.

For example, if you compare 1 and '1' using the == operator, it will return true because it is not a strict comparison and it converts both values to the same data type before comparing them.

Let's see the example:

Example

// Equality operator (==)
console.log(1 == '1'); // true
console.log(1 == '2'); // false
console.log(1 == true); // true
console.log(0 == false); // true
console.log(0 == ''); // true
console.log(0 == '0'); // true
console.log(1 == 'true'); // false
console.log(0 == 'false'); // false

As you can see in the above example, the equality operator (==) returns true for some values which are not equal in terms of a data type.

For example, 1 and '1' are not equal in terms of data type but if you convert them to string then they become equal.

Strict equality operator (===)

The === operator (strict equality operator) compares two values checking their data types and returns true or false accordingly.

Unlike the equality operator (==), the strict equality operator (===) does not convert the values before comparing them.

If you compare any two values using === operator, and if they are not of the same data type and value, it will return false.

Here are some examples:

Example

// Strict equality operator (===)
console.log(1 ===  1); // true
console.log(1 === '1'); // false
console.log(1 === '2'); // false
console.log(1 === true); // false
console.log(0 === 0); // true
console.log(0 === '0'); // false
console.log(0 === false); // false
console.log(0 === ''); // false

You can see in the above example that the === operator returns true only if both values are of same data type and value.

== vs ===

Here is the table which shows the difference between == and === operator:

Operator	Type coercion	Example	Result
`==`	Yes	`1 == '1'`	`true`
`===`	No	`1 === '1'`	`false`
`==`	Yes	`true == 1`	`true`
`===`	No	`true === 1`	`false`
`==`	Yes	`null == undefined`	`true`
`===`	No	`null === undefined`	`false`

Operator	Description	Example	Result
`==`	Compares values after performing type coercion	`1 == '1'`	`true`
`===`	Compares values without performing type coercion	`1 === '1'`	`false`

`==`	`===`
When to use	When NOT to use
When you want to compare values after performing type coercion	When you want to compare values without performing type coercion
When you want to compare values after converting them to the same type	When you want to compare values and their type both should be the same

`==`	`===`
Advantages	Disadvantages
Easy to understand	Can lead to unexpected behavior caused by type coercion
Can be useful in certain scenarios	Not recommended for comparing values of different types

Conclusion

So, this is all about the difference between == and === operators in JavaScript. I hope you understood the difference between the two operators.

For more learning check out arithmetic operators in javascript.

Happy learning!😇