Unravelling the mystery of double vs triple equals in JavaScript
The difference between == and ===
Both double and triple equals are the equality operator having their own significance and can be used as per the need, but understanding them thoroughly will give you exhaustive knowledge about their internal working, use-cases and in which scenarios to use them as per the need.
The (==) double equals :
This operator is mostly used to check the equality of two values where the type of both values does not matter.
It converts both values into the same type and then checks whether they're equal or not, they are less strict when it comes to checking the value's equality, also because it works on the algorithms known as "Loose Equality Algorithm" so it is also called as "Loose Equality Operator",
It performs the type conversion by itself and has some rules to handle the edge cases like NaN and undefined, some rules to check x == y are:
If x is null and y is undefined or vice-versa, return true.
If typeof(x) is same as typeof(y), i.e. both are of the same type then it returns (x === y), then it strictly checks for the values.
If x is a Number and y is a String, then it'll convert y to a Number and then checks for its equality.
This conversion is also known as "type coercion comparison", first convert the operands into the same type and then compare and ultimately the comparison would be performed when both the operands would be of the same type
let a = 10; // Number
let b = "10"; // String
console.log(typeof(a), typeof(b)); // prints; Number String
console.log(a == b); // true
// First the variable b got converted to a Number data type, and then they //got checked for equality
The (===) Triple Equals:
This operator, by name, is a strict equality operator which checks for both the value and type of the values that need to be checked.
It first checks for the type of both operands, if they both are of the same type then it moves forward and checks the values if they are equal then returns a truthy value, else returns a false.
In contrast to double equals, triple equals (===) is more strict and should be used more often than double equals (==) as a good practice.
Some rules which the Triple Equals works upon, to check if x === y, are:
If typeof(x) is not equal to typeof(y), then simply return false.
If x is a number then it checks the equality of two numbers, that too using a well-devised algorithm "Number::equal ( x, y )" which we don't need to focus on as of now, if both numbers are equal then returns true, else returns false.
If x is a String, then first it checks if both the strings have equal lengths, if they don't then it returns the false.
- If both the strings have equal lengths, then it checks for the equality of each character in both the strings and if all the characters are equal, it returns true, else if even a single character is not equal it returns false and doesn't check for further characters.
If x is a boolean, then if both x and y are true, or if both are false it returns true, else it returns false.
Let's understand how it works through code:
let a = 10; // Number
let b = "10"; // String
console.log(typeof(a), typeof(b)); // prints; Number String
console.log(a === b); // false, just after checking their types it returns false
let name1 = "javaScript";
let name2 = "JavaScript";
console.log(name1 === name2) //false, since in name2 the first character is capital which is not in name1, so its not equal and hence false is returned
name2 = "javaScript";
console.log(name1 === name2) //true
/*
Explanation: It will check for both the types first, both are strings, then it'll check for lengths of both the variables i.e. 10 in this case, both lengths are equal, then it will check each character, in this case all characters are equal so it will return true
*/
Conclusion:
Both the equality operators have their own significance and can be used as per the need.
The double equals can be used where more flexibility is needed concerning the types of data being checked.
Triple equals can be used where more strictness is required and the value equality matters along with their data type equality.
It's a good practice to use triple equals as much as we can if the double equals if not explicitly required.
You can read more thoroughly about the equality operators and their algorithms through which equality is checked, here are some resources:
MDN Docs for Equality Operators.
EcmaScript Documentation for Loosely Equal Algorithm.
EcmaScript Documentation for Strictly Equal Algorithms.
You must be having a good understanding of both the double and triple equals operator by now, if you do, then share and give it an upvote👍
Happy Learning!!