A Simple Sense of Type Coercion in JavaScript

In recent times, JavaScript has been considered as a go-to language by most noobs and experienced developers alike. But one of the most important things I've realized while working as a front-end developer myself is that most of us lack in many aspects of the fundamentals. What could the reason be? Are we overlooking the basic concepts while shifting our focus on project deadlines?

My last client project completed recently and my interview prep for finding a new project was in full swing. I must say it was difficult being a student again, but nevertheless I came across a topic called Type Coercion. I thought this might be a topic of interest for most of my fellow developers.

I'd like to share my knowledge on concepts like "what is considered as Truthy & Falsy values" in JavaScript and "checking equality" to help everyone get a better understanding. With no further delay, let's dive right in!

Type Coercion?

The process of converting one data type to another data type behind the scenes to complete an operation in JavaScript is called Type Coercion.

Example:

If we take a string '1' and compare it with number 0, due to type coercion it would evaluate to true.

We use the term weak typing when the data type of a variable's value is changed. Thanks to libraries like Flow, PureScript, and TypeScript (which is an all-star lately for a reason) that are helping us code better with strong typing.

Type Coercion can cause unexpected values and errors when checking the equality condition for two values. It is recommended to use strict equality operators (=== and !==) rather than (== and !=) that will check the values along with datatypes.

Truthy and Falsy Values

Let us understand what happens when we compare different variables. Because of Type Coercion, JavaScript values can be treated as either true or false with some unexpected side effects. Below is how different variable assignments evaluate to true or false:

Falsy Values:

• false


• 
  0 (zero)


• 
  '' or "" (empty string)


• null


• undefined


• NaN

Note: var randomVar = 1/'str'; evaluates to NaN which is always a falsy value.

Apart from the above variable assignments, the presence of an array or an object in a variable will always evaluate to true because it checks for the existence of an element.

Difference Between Regular and Strict Equality Conditions

Here's how == evaluates to true even though we compare values like false, 0, and empty string, but not when we implement strict mode (===):

// Regular equality (==)

false == 0        // true

0 == ''           // true

'' == false       // true



// Strict equality (===)

false === 0       // false

0 === ''          // false

'' === false      // false

Here we see that although null and undefined are both considered Falsy values, they evaluate to true only when compared to themselves:

null == undefined    // true

null === undefined   // false

null == 0           // false

undefined == 0      // false

NaN being a Falsy value, it will never be true even when compared to itself:

NaN == NaN     // false

NaN === NaN    // false

Conclusion

The above examples show the comparison of type-focused variables with equality operators using strict mode in JavaScript that will help us in dealing with Type Coercion effectively.

Hope you liked the article! If yes, please leave a comment with any feedback.