In this section, we will learn what the type coercion is and how it works in JavaScript.

Note: In this section, we’re assuming you already have a general view of what operations and operands are in the JavaScript.

What is JavaScript Type Coercion?

In programming, there are times that we need to convert the type of one value to another so that the operation can be done. This process is called type conversion and in JavaScript it is also called Coercion.

Let’s say we have a string with the value “2” and another value of type Number. Now, if we want to subtract these two values from each other, like:

const res = 10 – "2";

The subtraction operation is a kind of operation that needs the operands to be of type `Number`. So the string value should be coerced into `Number` so that the operation can be done.

In the example above particularly, the String data type will be converted into Number and then the two values will be subtracted from each other.

So the final value in the `res` identifier will be `8`.

For now, just remember that in operations, data types of operands should match the need of the operation.

For example, if the operation is subtraction like the example above, then the operands should be of type `Number`. Or if the operation is multiplication or division, again the operands should be of type `Number`. So if one or both of the operands involved in the operation are not of type `Number`, then the JavaScript will try to implicitly turn (coerce) the type of those operands into `Number`.

The conversion is not limited to just `Number` though. There are other types of operations that need the type of operands to be of either `String` or `Boolean` for the operation to work correctly.

So the JavaScript execution engine might attempt to turn the target value into either of these data types if they don’t match the need of the operation.

JavaScript Types of Coercion

In short, there are 4 types of coercion that might happen in an operation:

• ToBoolean Operation
• ToNumber Operation
• ToString Operation
• ToPrimitive Operation

JavaScript ToBoolean Operation

When the operands need to be coerced (converted) into `Boolean` data type. The operation abstractly is called ToBoolean.

For example, we might have an if statement and the value we’ve passed as the argument of the statement is a non-boolean value! In such case the value should be coerced into boolean.

In the ToBoolean section, we will explain how this operation works.

Example: running JavaScript ToBoolean operation

const str = "string"; 
if (str){
  console.log("The value of the if statement is coerced to true");
}else{
  console.log("The value of the if statement is coerced to false");
}

Output:

The value of the if statement is coerced to true

As you can see, the `if` statement needs a boolean value to execute correctly, but we’ve passed it a string value! For this reason, behind the scene, the execution engine ran the ToBoolean operation on the condition of the if-statement and coerced the value to true, which is how we got the message you see in the output.

JavaScript ToNumber Operation

When the operands need to be coerced (converted) into `Number` data type. The operation abstractly is called ToNumber.

For example, we might have a subtraction operation where one or more of the operands involved are not of type Number! In situations like this, JavaScript needs to coerce the operands into Number datatype.

In the ToNumber section, we will explain how this operation works.

Example: running JavaScript ToNumber operation

const str = "5";

const res = str - 3;

console.log(res);

Output:

2

Here the operation is subtraction and so we need number values as the operands of this operation. But the first operand is of type string and for this reason, the execution engine behind the scene coerces this value into number so that the operation can be done here.

JavaScript ToString Operation

When the operands need to be coerced (converted) into `String` data type. The operation abstractly is called ToString.

For example, let’s say the operation is to add two values together, but one of the operands is of type String! In situations like this, the other operand will be forced into String datatype.

In the ToString section, we will explain how this operation works.

Example: running JavaScript ToString operation

const str = "5";

const res = str + 3;

console.log(res);

Output:

53

When the operation is to add two values together and one of the operands is of type string, the other operand will be coerced into string as well. For this reason, the second operand in this example is coerced into string and at the end the operand on the right side of this `+` operator is just appended to the operand on the left side.

JavaScript ToPrimitive Operation

If the target operand is not a primitive value, or basically it is an object (including arrays) but the operation needs a primitive value; the execution engine will run an operation that abstractly called `ToPrimitive` to get the target data-type and value from the object.

In the ToPrimitive section, we will explain how this operation works.

Example: running JavaScript ToPrimitive operation

const obj = {
  toString(){
    return "World!";
  }
}
const str = "Hello "; 
const res = str + obj; 
console.log(res);

Output:

Hello World!

Here the `obj` object is involved in an addition operation where one of the operands is of type string! So what happens is that the execution engine involves the ToPrimitive operation on the obj object in order to get a string value from the object. (For situations where a string value is needed from an object, the ToPrimitive operation is basically calling the toString() method of that object).

That’s why we got the value “World!” when the `obj` object involved in an operation where the needed value was of type string.

Note: you’ll learn more about the ToPrimitive operation in a later section.