What is the difference between "==" and "===" in JS?
The equality operator in javascript is used to compare if two values are equal. In Javascript, the comparison is performed with the == and === operators.
What is Double Equal (==) Operator?
Double equals (==) is often referred to as 'loose equality' because it checks abstract equality which means it performs type coercion before making any comparison.
But wait! What is this Type coercion?
Type coercion means converting the data types of operands to carry the comparison when two operands aren't of the same data type.
Let's understand with the help of an example.
const x = 1;
const y = '1';
console.log(a == b) // true
In the above example, we have two variables x and y. The type of variable x is number and the type of variable y is string. Now, when we compare the two variables using double equals (==) we get true as our output.
This is because the type of the variable x is converted to a string before making the comparison. After the comparison, the value is checked in both variables. If it's the same, we will get true, and we'll get false otherwise.
Now you must be wondering why we should convert y to a string instead of x to a number.
This is because it follows some rules, please refer to the following:-
When one of the operands is a string, the other operand is converted to a string as well.
When one of the operands is a number, the other operand is converted to a number as well.
When one of the operands is a boolean, the other operand is converted to a boolean as well.
When one of the operands is an object, its valueOf method converts it to a primitive value. Objects returned by valueOf are converted to strings using the toString method.
When one operand is null or undefined, but the other operand isn't of the same type, then the function always returns false. Null is only equal to null or undefined.
NaN does not equal anything even itself
Order of Precedence:*
String >> Number>>Boolean>>Object>>null/undefined*
In the above example, y has been converted to String because JS gives strings a higher priority than numbers.
What is Triple Equal (===) Operator?
Triple equals (===), also referred to as "strict equality". The === operator compares operands and returns true if both operands are of the same data type and have some value, otherwise, it returns false.
When
===is used, the operands' types are not converted before comparison.
Let's understand with an example.
const x = 1;
const y = "1";
const z = 1;
console.log(x===y); //returns false
console.log(x===z); //returns true
Here the first output is false as x is a number type whereas y is a string type, the second output is true as both x and z have the same data type and value.
Here are some rules for Strict equality comparison:
When the operands are of a different data type, it returns false.
Whenever we compare NaNs for either operand, we'll get a false result.
When the operands are null or undefined, then this function returns true.
If we are comparing objects, then it returns true if they both refer to the same object, otherwise, it returns false.
Conclusion
== operator performs a loose equality comparison that performs type coercion if necessary to make the comparison possible.
On the other hand, === operator performs a strict equality comparison that does not perform type coercion and requires the operands to have the same data type and value.
It is recommended to use the triple equal sign (===) instead of the double equal sign (==) to avoid unexpected results due to type coercion.
