Ciao Devs. 👋

JavaScript's flexibility makes it popular for web development, but it also leads to quirks in type coercion. The equality operator (==) and arithmetic operations can behave unexpectedly due to automatic type conversion. Understanding these behaviours is crucial for writing reliable code. This article explores examples of JavaScript's type coercion, revealing how simple expressions can yield surprising results.

1. [ ] is equal ![ ]

Array is equal not array:

[] == ![]; // -> true
+[] == +![]; // -> true

The equality operator converts both sides to numbers to compare them, and both sides become the number O for different reasons.

[] == ![]; // -> 0 == 0 -> true

2. true is not equal ![ ], but not equal [ ] too

Array is not equal true, but not Array is not equal true too, Array is equal false, not Array is equal false too:

true == []; // -> false
true == ![]; // -> false

false == []; // -> true
false == ![]; // -> true

The equality operator converts both sides to numbers, so we have 1 and O numbers:

true == ![]; // -> false
Number(true); // -> 1
Number([]); // -> 0
1 == 0; // -> false

3. true is false

!! "false" ==!! "true"; // -> true
!! "false" === !! "true"; // -> true

/* true is 'truthy' and represented by value 1 (number), 'true' in string form is NaN. */
true == "true"; // -> false
false == "false"; // -> false

/* 'false' is not the empty string, so it's a truthy value */
!! "false"; // -> true
!! "true"; // -> true

4. Comparing null to 0

null == 0; // -> false
null > 0; // -> false
null >= 0; // -> true

The equality operator converts null to O number. So null == 0 and null > O is false.

But what about null >= O? null has a special rule, it is not equal to anything else.

5. Objects to Primitives

{} + []; // -> 0
{} + {}; // -> NaN
[] + {}; // -> "[object Object]"

The plus operator (+) tries to convert objects to primitives. When both sides are objects, JavaScript uses the toString or valueOf method:

• {} is treated as a block of code and returns 0.
• [] converts to an empty string, and {} to "[object Object]".
• Combining [] + {} results in the string "[object Object]".

6. Weird Boolean Behavior

new Boolean(false) == true; // -> true
new Boolean(false) == false; // -> false

Using the new keyword with Boolean creates an object that is always truthy:

• new Boolean(false) is an object, and objects are truthy in JavaScript.
• When compared with true, it evaluates to true, but comparing with false, it evaluates to false.

7. Double NaN Trick

NaN == NaN; // -> false
NaN === NaN; // -> false

Number.isNaN(NaN); // -> true
Number.isNaN("NaN"); // -> false

NaN (Not-a-Number) is a unique value in JavaScript:

• NaN is never equal to itself.
• Use Number.isNaN() to check if a value is NaN.

8. Type Coercion with Strings

"2" + 2; // -> "22"
"2" - 2; // -> 0
"2" * 2; // -> 4
"2" / 2; // -> 1

The plus operator (+) concatenates strings, while other operators (-, *, /) convert strings to numbers:

• "2" + 2 results in the string "22" due to concatenation.
• "2" - 2, "2" * 2, and "2" / 2 convert the string "2" to the number 2 for arithmetic operations.

Grasping JavaScript's type coercion quirks is key to writing reliable code. By understanding how JavaScript converts types, we can avoid common pitfalls and leverage its flexibility effectively. These insights enhance our coding skills and help us build more efficient web applications.

Happy Hacking 😉