Difference between == and ===

Overview

The equality operator in javascript is used to check whether two operands are equal. It returns a boolean value. In javascript, the comparison can be done by using == and === operators. The major difference between == and === operators is that == does a type conversion of the operands before checking while === prioritizes checking the types of the operands first and then the values.

let check1= 15=='15';
console.log(check1);
//output is true

let check2= 15==='15';
console.log(check2);
//output is false

How does == work?

== also known as the loose equality operator, performs a type conversion before comparing two operands. This is called implicit type conversion or type coercion. Javascript is a weakly typed language, so in case of a loose equality check, it automatically changes(coerces) the type of one value to fit into the other operand type.

• If one operator is a symbol and the other is not, return false

• If one operator is boolean and other is not, boolean is converted to a number. True is converted to 1 and false to 0. Then the two operands are compared loosely again.
  

console.log(true==1);//true
console.log(false==0)//true
console.log(true==0)//false
console.log(false==1)//false
console.log(true=="Hi")//false

• In case of a number and a string, the string is converted to a number. If the string to number conversion fails, NaN is returned, which makes the equality check false.

console.log('10'==10)//true
console.log("Hi"==10)//false, could not convert string to number.

• According to ES6 convention, all primitive data types(string, number, boolean, bigint, symbol) and objects are loosely unequal to undefined and null.

console.log('Hi'==undefined)//false
console.log(null=='A')//false
console.log(0==undefined)//false
console.log(0==null)//false
const obj={}//empty object
console.log(obj==undefined)//false

• In case of arrays and objects (non-primitive data types), == checks if both the arrays and both the objects refer to the same memory location.

const obj={a:1,b:2};
const obj2={a:1,b:2};
const obj1=obj2;
console.log(obj==obj2);//false
console.log(obj1==obj2);//true (obj1 refers to obj2, the same memory location)
console.log([1,2,3,4,5]==[1,2,3,4,5])//false(Same values but different location or reference)

How does === work?

Now let's talk about ===, also known as the strict equality operator. In this case, neither of the values is implicitly converted before they are compared. Thus, if two values have different data types, they would be considered not equal even if their values are the same.

console.log(1===true)//false
console.log(0===false)//false
console.log("Hi"==="Hi");//true
console.log(15===15)//true
console.log(20==='20')//false

Strict equality check is preferred over loose equality checks as in strict equality checks the outcomes are more predictable and accurate.

Special Cases

• +0 and -0 are considered as equal

console.log(+0===-0)//true

• NaN is considered as unequal to every other values, including itself.

console.log(NaN===NaN)//false

• In case of objects and arrays === works in the same way as ==. It checks whether the two operands are referring to the same memory location.

const obj={a:1,b:2};
const obj2={a:1,b:2};
const obj1=obj2;
console.log(obj===obj2);//false
console.log(obj1===obj2);//true (obj1 refers to obj2, the same memory location)
console.log([1,2,3,4,5]===[1,2,3,4,5])//false(Same values but different location or reference)

Comparing equality methods

Conclusion

Strict equality(===) in general is preferred over loose equality operator(==) as one can be more sure about its outcomes and also strict equality goes through one step less in checking procedure as it does not need to convert data types while checking two operands of different data types. Although we can use loose equality(==) if the type of the operands do not need to be taken into consideration.