JavaScript provides three main ways to compare values for equality:
== (loose equality), === (strict equality), and Object.is() (same-value equality). Each of these methods has its own rules and use cases, which can sometimes lead to confusion, especially for those new to JavaScript. This blog post will delve into the differences between these equality operations, their behaviors, and when to use each one.Loose Equality (==)
The loose equality operator
== compares two values for equality after converting both values to a common type. This process is known as type coercion. Because of this type conversion, == can sometimes produce unexpected results.Examples:
true == 1; // true '0' == 0; // true [9, 2] == '9,2'; // true "" == 0; // true
In these examples, JavaScript converts the operands to a common type before comparing them. For instance,
true is converted to 1, and an array [9, 2] is converted to the string '9,2'.Pitfalls:
Loose equality can lead to confusing results, especially when comparing different types:
false == '0'; // true null == undefined; // true " \\t\\r\\n" == 0; // true
Because of these potential pitfalls, it is generally recommended to avoid using
== unless type coercion is explicitly desired.Strict Equality (===)
The strict equality operator
=== compares two values for equality without converting them to a common type. If the values have different types, the comparison immediately returns false.Examples:
true === 1; // false '0' === 0; // false [9, 2] === '9,2'; // false "" === 0; // false
Edge Cases:
Strict equality treats
NaN as unequal to every other value, including itself, and does not distinguish between +0 and -0:NaN === NaN; // false +0 === -0; // true
Best Practice:
Strict equality is usually preferred over loose equality because it avoids the pitfalls of type coercion:
let obj1 = { name: 'GreenRoots' }; let obj2 = { name: 'GreenRoots' }; obj1 === obj2; // false
In this example, even though
obj1 and obj2 have the same properties, they are different objects in memory, so the comparison returns false.Same-Value Equality (Object.is())
Introduced in ES6,
Object.is() determines whether two values are the same. It is similar to === but with some differences in handling special cases like NaN and +0/-0`.Examples:
Object.is(0, 0); // true Object.is(null, null); // true Object.is(undefined, undefined); // true Object.is(true, 1); // false Object.is(+0, -0); // false Object.is(NaN, NaN); // true
Use Cases:
Object.is() is particularly useful when you need to handle NaN and +0/-0` correctly:Object.is(NaN, NaN); // true Object.is(+0, -0); // false
Comparison Summary
Here is a comparison chart summarizing the differences between
==, ===, and Object.is():Comparison | == | === | Object.is() |
Type Conversion | Yes | No | No |
NaN | NaN != NaN | NaN !== NaN | Object.is(NaN, NaN) |
+0 vs -0 | +0 == -0 | +0 === -0 | Object.is(+0, -0) |
Objects | Reference Equality | Reference Equality | Reference Equality |
Conclusion
Understanding the differences between
==, ===, and Object.is() is crucial for writing reliable and bug-free JavaScript code. Use === for most comparisons to avoid the pitfalls of type coercion, and consider Object.is() for special cases involving NaN and +0/-0. Avoid using ==` unless you explicitly need type coercion.Citations:
[1] https://blog.greenroots.info/javascript-equality-comparison-with-and-objectis
[2] https://dev.to/kadonwills/most-common-confusion-about-equality-in-javascript-5god
[3] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness
[4] https://www.telerik.com/blogs/indepth-understanding-strict-abstract-equality-operators-javascript
[5] https://softwareengineering.stackexchange.com/questions/268124/does-using-in-javascript-ever-make-sense
[6] https://www.freecodecamp.org/news/loose-vs-strict-equality-in-javascript/
[7] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Equality
[8] https://stackoverflow.com/questions/5447024/javascript-comparison-operators-identity-vs-equality