In Javascript, there are two options when comparing values in a condition. These comparison options are equality (==) and strict equality (===). Javascript is a loosely typed language which means that variables can be assigned different data types during execution of the application and different data types can be compared in a conditional.
In strictly typed languages it is common to cause an error if the code attempts to compare different data types. For example, the below C# code attempts to compare a variable of type integer to a variable of type string. The below C# code causes a compiler error of “Operator ‘==’ cannot be applied to operands of type ‘int’ and ‘string’“.
Javascript has the following comparison operators to test if two operands are equal:
Equality (==)
In Javascript, variables of different data types can attempt to be compared using the equality operator which is two equal signs (==). This is also known as loose equality, abstract equality, or double equals. If two operands of different types are compared using loose equality then there is an attempt to convert one of the operands and then compare them. This attempt to convert one of the operands can sometimes lead to unexpected results and bugs.
Strict Equality (===)
When using strict equality (===) to compare two operands there is no conversion on any of the operands. This is also known as type comparison, identity operator, or triple equals. If the operands are a different type then false is always returned.
Results Of Equality (==) And Strict Equality (===) Comparisons
The web browser dev tools console is a quick way to type in comparisons of different types and quickly view the true or false result.
Comparing A String To A Number
When a string is compared to a number with loose equality (==) there is an attempt to convert the string to a number and then compare the operands.
The below Google Chrome dev tools console screenshot shows the result of comparing the number 5 to the string ‘5’ using loose and strict equality.
Loose Equality (==) Result: The string ‘5’ is converted to the number 5 and then the operands are compared and true is returned.
Strict Equality (===) Result: The operand of 5 is a number and the operand of ‘5’ is a string. The operands are different types so false is returned.
Another interesting string to number comparison is comparing an empty string to a number. The screenshot below shows the result.
Loose Equality (==) Result: The empty string is converted to the number 0 and then the operands are compared and true is returned.
Strict Equality (===) Result: The operand of empty string is a string and the operand of 0 is a number. The operands are different types so false is returned.
To illustrate why the empty string was converted to 0 when using loose equality (==), the screenshot below shows that using the Number function converts an empty string or a string of only space characters to the number 0.
Comparing null To undefined
When using loose equality (==) to compare a null operand to an undefined operand, true is returned. When using strict equality (===) to compare a null operand to an undefined operand, false is returned because null and undefined are different types in Javascript.
Comparisons When One Operand Is Boolean
When using loose equality (==) the following will happen if one of the operands is a boolean:
- If the boolean operand is false then the operand is converted to 0.
- If the boolean operand is true then the operand is converted to 1.
- The operands are then compared after the conversion of the boolean operand.
In the below screenshot a boolean operand of false is compared to 0 using loose equality (==) and strict equality (===).
Loose Equality (==) Result: The boolean operand of false is converted to 0 because the operands are different types and then true is returned because 0 is equal to 0.
Strict Equality (===) Result: The false operand is type boolean and the 0 operand is type number. The operands are different types so false is returned.
In the below screenshot a boolean operand of true is compared to 1 using loose equality (==) and strict equality (===).
Loose Equality (==) Result: The boolean operand of true is converted to 1 because the operands are different types and then true is returned because 1 is equal to 1.
Strict Equality (===) Result: The true operand is type boolean and the 1 operand is type number. The operands are different types so false is returned.
Comparisons With NaN
When using loose equality (==) or strict equality (===), if one of the operands is NaN then false is always returned. False is returned even if NaN is compared to NaN.
The below screenshot shows comparisons of NaN to a number, string, and NaN. Each comparison results in false being returned.
Loose Equality (==) Results: Any time one or both of the operands are NaN then false is returned so for the above comparisons to a number, string, and NaN all returned false.
Strict Equality (===) Results: Any time one or both of the operands are NaN then false is returned so for the above comparisons to a number, string, and NaN all returned false.
Comparing Objects To A String Or Number
When using loose equality (==) if one of the operands is an object and the other operand is a string or a number then there will be an attempt to convert the object to a primitive type using the valueOf() or toString() methods of the object.
The screenshot below shows the results of running the toString() function on an array and then shows the results of comparisons.
Loose Equality (==) Results: Because one operand is a string and the other operand is an array of [1, 2, 3] the array is converted to a string of “1,2,3” and then compared to the string “1,2,3” and then true is returned.
Strict Equality (===) Results: The array is an object type and the other operand is a string. The operands are different types so false is returned.
The screenshot below shows the results of comparing an array with one number element to a number.
Loose Equality (==) Results: Because one operand is a number and the other operand is an array the array of [5] is converted to the number 5 and then after comparing the two numbers true is returned.
Strict Equality (===) Results: The array is an object type and the other operand is a number. The operands are different types so false is returned.
Conclusion
The above examples show that making comparisons with loose equality (==) can sometimes cause unexpected results. When in doubt, it is best to use strict equals (===) when doing comparisons to check both value and data type.
References:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Equality
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Strict_equality
https://dmitripavlutin.com/the-legend-of-javascript-equality-operator/
https://www.youtube.com/watch?v=C5ZVC4HHgIg
https://stackoverflow.com/questions/359494/which-equals-operator-vs-should-be-used-in-javascript-comparisons