Coercion & Comparison in JavaScript 🛠

Coercion

There are two type of coercion in JavaScript, explicit coercion & implicit coercion 👀

Explicit Coercion : In explicit coercion, the variable/value is explicitly wrapped around the type it is intended to coerce.

E.g. 👨‍🔧

Boolean(0) // false
Boolean(1) // true
String(45) // "45"
const a = "5" ; // "5"
const b = Number(a) // 5

Implicit Coercion : Implicit coercion happens as a result of side effect in a piece of code (Intended/Unintended)

E.g. 👨‍🔧

+"43"     // 43    ; The unary + operator, tries to convert the operand into a number , So "43" becomes 43
5+"43"    // "543" ; When a string is an operand of the + operator, Javascript instead of converting the string to a Number, converts the number to a string.
4 * "5"   // 20  ;  A string as an operand in a numeric expression is always converted in to a number so here "5" becomes 5
42 == "42"  // true ; Here type does not match but JS implicitly coerces "42" to 42

It is always said that coercion is evil but if you invest time and analyze the scenarios where implicit coercion may happen you can not only avoid the undesired side effects but also use the coercion positively in your program to obtain the desired results.

Equality i.e. == Vs === in JavaScript

What is the difference between == & === in JavaScript ?

It is common misconception that the == checks for value only and === checks for value and it's type, while this misconception holds true for most of the cases but it is not the accurate understanding of the concept.

The real difference between the == & === is the default coercion behavior during comparison

In == implicit coercion is allowed while comparing two values

Whereas in === implicit coercion is not allowed

That's why == is known as equality operator whereas === is known as strict equality operator

Example 👨‍🔧

42 == "42" // true
42 === "42" // false

In above example when we do == the implicit coercion of "42" in to 42 happens but when we do === the implicit coercion doesn't happen and it evaluates to false.

Same logic is applied to inequality operators as well

42 != "42" // false
42 !== "42" // true

Comparing non-primitive values

If you compare non-primitive values, you must consider the fact that the non primitive values are held by reference not by values.

E.g. 👨‍🔧 If you compare two arrays with identical values, it will evaluate to false , because there will be comparison of references not values

arrayA = [1,2,3];
arrayB = [1,2,3]; 

arrayA == arrayB;  // false

Another interesting thing with arrays is when you compare array(Being a non primitive value) with a string, the array is coerced in to string.

arrayA = [1,2,3];
stringA = "1,2,3";
arrayA == stringA; // true ; here [1,2,3] is implicitly coerced in to "1,2,3"
arrayA === stringA; // false ; Strict equality , implicit coercion doesn't happen

Coercion in inequality > & <

When two values are numeric : Numeric comparison occurs When two values are string : The comparison is made lexicographically (aka alphabetically like a dictionary) When one of values is numeric : The other value is implicitly coerced in to Number 👨‍🔧

8>3;  // true ; Numerical Comparison
8<3;  // false ; Numerical Comparison
"aaa" < "aab";  // true ; Lexicographical Comparison
"aaa" > "aab";  // false ; Lexicographical Comparison
12 > "11";  // true ; One numeric and one string, "11" is implicitly coerced in to number and becomes 11
12 > "13" // false
12 > "foo" // false;  Because "foo" is coerced in to NaN (Not a Number) & NaN is neither greater not smaller than any number
12 > "foo" // false;
12 == "foo" // false

Note : When we try to coerce a non numeric string to string then NaN is returned and this NaN is neither greater not smaller than any number.

This is part of my series on JavaScript, JavaScript Made Easy, you can view other interesting articles there.

Subscribe to get e-mail and updates for my learning experience with JavaScript and React JS