Type Coercion (JavaScript)

Type coercion is the process of converting a value from one type to another. Any type, be it primitive or an object, is a valid subject for type coercion.

As an example of type coercion in practice, look at the JavaScript Comparison Table, which shows how the loose equality == operator behaves for different a and b types. This matrix looks scary due to the implicit type coercion that == operator does, and it’s hardly possible to remember all those combinations. And you don’t have to do that — just learn the underlying type coercion principles.

Implicit vs. explicit coercion

Type coercion can be explicit and implicit.

When adding the two operands with the + operator, the JavaScript engine will try to add the values if both the values are of integer type.

// No Implicit Type casting needed
10 + 10   // 20

But if any of the values is a string type, JavaScript will try to automatically convert the other values to a string so that they can be appended.

// With Implicit type casting
10 + '10'   // 1010

As soon as we tried to add null and undefined, the JavaScript engine tries to convert the values to integer resulting in NaN.

null + undefined  // NaN

When a developer expresses the intention to convert between types by writing the appropriate code, like Number(value), it’s called explicit type coercion (or typecasting).

Since JavaScript is a weakly-typed language, values can also be converted between different types automatically, and it is called implicit type coercion. It usually happens when you apply operators to values of different types, like 1 == null, 2/’5', null + new Date(), or it can be triggered by the surrounding context, like with if (value) {…}, where value is coerced to boolean.

One operator that does not trigger implicit type coercion is ===, which is called the strict equality operator. The loose equality operator == on the other hand, does both comparison and type coercion if needed.

Three types of conversion The first rule to know is there are only three types of conversion in JavaScript:

• to string
• to boolean
• to number

String conversion

var val = '10' + 10;
console.log(val);

String ‘1010’ will get printed in the console. The number 10 is implicitly converted to the string ‘10’ while executing the code. That’s implicit type casting or type coercion.

No matter if we write the same statement as

var val = 10 + '10';
console.log(val);

The same output ‘1010’ will get printed.

Boolean conversion

To explicitly convert a value to a boolean apply the Boolean() function. Implicit conversion happens in a logical context, or is triggered by logical operators ( || && !).

Boolean(2)          // explicit
if (2) { ... }      // implicit due to logical context
!!2                 // implicit due to logical operator
2 || 'hello'        // implicit due to logical operator

Logical operators such as || and && do boolean conversions internally, but actually return the value of original operands, even if they are not boolean.

// returns number 123, instead of returning true
// 'hello' and 123 are still coerced to boolean internally to calculate the expression
let x = 'hello' && 123;   // x === 123

Numeric conversion

For an explicit conversion just apply the Number() function, same as you did with Boolean() and String() .

Here is how primitive values are converted to numbers:

Number(null)                   // 0
Number(undefined)              // NaN
Number(true)                   // 1
Number(false)                  // 0
Number(" 12 ")                 // 12
Number("-12.34")               // -12.34
Number("\n")                   // 0
Number(" 12s ")                // NaN
Number(123)                    // 123

Resources:

JavaScript type coercion explained

Type Coercion

What is Type Coercion in JavaScript ? - GeeksforGeeks