== and === in JavaScript explained with examples

You may have seen double and triple equals signs in JavaScript. But what do they mean? == and === are two comparison operators in JavaScript that are used to determine equality between two values. Although they might seem similar at first, there are important differences between the two that every JavaScript developer should understand.

the == operator

The ==(Double Equals) operator performs a type coercion before making a comparison. This means that it will automatically convert the operands to a common type before comparing them. For example:

10 == '10' // returns true

In this case, JavaScript converts the string '10' to the number 10 before making the comparison, so the two values are considered equal. This can sometimes lead to unexpected results, as shown in the following example:

null == undefined // returns true

The == operator can also cause problems when comparing objects. Two objects are considered equal only if they refer to the same object in memory, not if they have the same properties and values. For example:

const obj1 = { key: 'value' };
const obj2 = { key: 'value' };

obj1 == obj2 // returns false

the === operator

The ===(Triple Equals) operator performs a strict comparison, without type coercion. This means that it will only return true if the operands have the same type and the same value. For example:

10 === '10' // returns false

In this case, the two values have different types (number vs string), so the comparison returns false. Similarly:

null === undefined // returns false

The === operator also ensures that objects are only considered equal if they refer to the same object in memory, just like the == operator.

examples

Okay, so let me help you better understand the difference through a few more examples. For each of these, consider what the output of these statements will be.

const str1 = "test" 
const str2 = "test"  

console.log(str1 == str2) //true
console.log(str1 === str2) //true

The value and the type of both str1 and str2 is same. Therefore the result is true for both.

console.log(0 == false) //true
console.log(0 === false) //false

Reason: same value, different type. Type coercion

This is an interesting case. The value of 0 when checked with false is same. It is so because 0 and false have the same value for JavaScript, but when checked for type and value, the value is false because 0 is a number and false is boolean.

const str = ""

console.log(str == false) //true
console.log(str === false) //false

The value of an empty string and false is the same in JavaScript. Hence, == returns true. However, the type is different and hence === returns false.

comparison and difference between == and ===

when to use == and ===

In general, it is recommended to use the === operator for all equality comparisons in JavaScript. The strict comparison ensures that your code behaves as expected, without any unexpected type conversions or comparisons between different objects.

However, there may be cases where you need to perform type coercion, such as when working with values that might be of different types but should still be considered equal. In these cases, the == operator might be appropriate.

conclusion

1. Well in short: == inherently converts type and === does not convert type.

2. Double Equals (==) checks for value equality only. This means that before checking the values, it converts the types of variables to match each other.

3. Triple Equals (===) does not perform type coercion. It will verify whether the variables being compared have both the same value AND the same type.

4. If you are supporting a use case where you can be a little lenient about the type of incoming data, then use ==.

5. When in doubt, use ===. This will save you from a ton of potential bugs.

references

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness

• https://www.geeksforgeeks.org/javascript-vs-comparison-operator/

Follow me on Twitter for more such blogs.

Cheers 🍻