Predicting JavaScript Equality Comparisons Correctly

Predicting the result of an equality check of two or more values in JavaScript has been a part of the language that trips many developers; but not anymore, as this article stops at nothing in providing you with a straightforward and understandable approach to it.

This article does not include explanations for edge case comparisons such as [] == "" and [undefined] == [null]

Introduction

Determining if any set of values are equal in JavaScript is achieved using any one of these:

• The Abstract Equality Operator (==)
• The Strict Equality Operator (===)
• Object.is

The major difference between the strict equality operator and the abstract equality operator is NOT that the strict equality operator checks for the equality of the value types being compared and the abstract equality operator does not; but that the strict equality operator does not allow coercion before comparison, while the abstract equality operator allows coercion before comparison.

Irrespective of the operator used, the result of checking the equality of any set of values is either true (if the values compared are equal) or false (if the values compared are not equal).

Comparison with the Abstract Equality Operator (==)

When comparing the equality of any set of values using ==,

There are seven value types here: undefined, null, Boolean, Number, String, Object and Symbol.

1. if the value types of any of the set of values to be compared are the same, there is no need for coercion; hence, a strict equality comparison is performed and the result is returned, otherwise;

2. undefined and null values are coercively equal to each other; in other words, testing if undefined == null will return true. undefined and null will not coerce to any other type (Boolean, Number, String, Object, or Symbol) when == is used to compare their equality with these other types;

3. all String and Boolean values are first coerced to Number values before a check for the equality of the values is determined. (The Boolean false is coerced to +0, while true is coerced to +1.);

4. all objects (remember that null is not an object in this case) are coerced to their primitive values before an equality check is carried out.

The primitive value of an object is determined internally by the JavaScript engine, however, depending on the object hint, the object is either coerced to a String (in the case of arrays) or to a Number.

Comparison with the Strict Equality Operator (===)

When comparing the equality of any set of values using ===,

1. if the value types (Number, String e.t.c) of the set of values under comparison are different, the JavaScript engine avoids coercion immediately and returns false; otherwise,

2. if the set of values under comparison are of type String and they are exactly the same sequence of code units (same length and same code units at corresponding indices), the JavaScript engine returns true; otherwise, it returns false.

3. if the set of values under comparison are of the Boolean type, the JavaScript engine returns true if the values are the same, otherwise it returns false

4. if the set of values under comparison are of the type Symbol and they have the same Symbol value, the JavaScript engine returns true, otherwise, it returns false;

5. if the set of values under comparison are of the Object type and they reference the same object in memory, the JavaScript engine returns true, otherwise, it returns false.

6. if any of the values under comparison is NaN, the JavaScript engine returns false;

7. +0 and -0 Number values are equal to each other, therefore, return true.

Practice Time!

What will be the result of the following comparisons?

1. 0 == null
2. false == undefined
3. true == 1
4. 'JavaScript' == true
5. 'JavaScript' == false

Answers

1. false. null will not coerce to any other value except undefined

2. false. false gets coerced to its Number value (+0), but undefined does not get coerced to its Number value (which is NaN). Since +0 is not the same as undefined, false is returned.

You can answer the rest in the comments section, with an explanation for your answer, and also feel free to add your own questions too 😉.

Cheers 🥂