What is Type Coercion in JavaScript ?

Type Coercion refers to the process of automatic or implicit conversion of values from one data type to another. This includes conversion from Number to String, String to Number, Boolean to Number, etc. when different types of operators are applied to the values.

In case the behavior of the implicit conversion is not sure, the constructors of a data type can be used to convert any value to that datatype, like the Number(), String() or Boolean() constructor.

These are the basic conversion of one dataType into another dataType:

Number to String Conversion

When any string or non-string value is added to a string, it always converts the non-string value to a string implicitly. When the string ‘Rahul’ is added to the number 10 then JavaScript does not give an error. It converts the number 10 to string ’10’ using coercion and then concatenates both strings.

Example: In this example, we are adding numbers with strings and so on.

JAVASCRIPT

// The Number 10 is converted to
// string '10' and then '+'
// concatenates both strings
let x = 10 + '20';
let y = '20' + 10;

// The Boolean value true is converted
// to string 'true' and then '+'
// concatenates both the strings
let z = true + '10';

console.log(x);
console.log(y);
console.log(z);

Output

1020
2010
true10

String to Number Conversion

When an operation like subtraction (-), multiplication (*), division (/), or modulus (%) is performed, all the values that are not numbers are converted into the number data type, as these operations can be performed between numbers only. Some examples of this are shown below.

Example: In this example, we are converting string to number implicitly.

JAVASCRIPT

// The string '5' is converted
// to number 5 in all cases
// implicitly
let w = 10 - '5';
let x = 10 * '5';
let y = 10 / '5';
let z = 10 % '5';

console.log(w);
console.log(x);
console.log(y);
console.log(z);

Output

5
50
2
0

Boolean to Number

When a Boolean is added to a Number, the Boolean value is converted to a number as it is safer and easier to convert Boolean values to Number values. A Boolean value can be represented as 0 for ‘false’ or 1 for ‘true’. Some examples of this are shown below.

Example: In this example, we are converting Boolean to number implicitly.

JAVASCRIPT

// The Boolean value true is
// converted to number 1 and
// then operation is performed
let x = true + 2;

// The Boolean value false is
// converted to number 0 and
// then operation is performed
let y = false + 2;

console.log(x);
console.log(y);

Output

3
2

The Equality Operator

The equality operator (==) can be used to compare values irrespective of their type. This is done by coercing a non-number data type to a number. Some examples of this are shown below:

Example: In this example, we are using == operator for cheching the type of the values.

JAVASCRIPT

// Should output 'true' as string '10'
// is coerced to number 10
let x = (10 == '10');

// Should output 'true', as boolean true
// is coerced to number 1
let y = (true == 1);

// Should output 'false' as string 'true'
// is coerced to NaN which is not equal to
// 1 of Boolean true
let z = (true == 'true');

console.log(x);
console.log(y);
console.log(z);

Output

true
true
false