In this post, you will learn about Type Conversion and Type Coercion in Javascript.

Type Conversion and Type Coercion in Javascript

Let’s understand Type Conversion and Type Coercion in Javascript.

Type Conversion

Type conversion is when we manually convert from one type to another type in JS.

Example 1:

const randomYear = "2001";
console.log(Number(randomYear) + 50);

Output: 2051

In this code, I have stored a string value in the randomYear variable. Then, in the second line, I converted randomYear value to a number using the Number() method. This is type conversion where I have converted a string to a number data type.

If I didn’t convert this value to a number then in that case, it will behave as a string. So, it is like “2001” + 50 and this plus symbol concatenates these two values. So, the output will be 200150.

Note:

console.log(Number("codeyup"));

Output: NaN

In this code, you can see, I am trying to convert a string to a number. But in this case, it will give us the output NaN because the Number() method can only convert string values that are numbers but are written in ” “.

Example 2:

let a = String(2);
console.log(typeof a);

Output: string

We can convert a number to a string type using the String() method, as I did in the above code.

Basically, In type conversion, we are changing the data type of the value. Such as converting a string to a number, a number to a string, etc.

So, I hope now you have understood what is type conversion in Javascript.

Type Coercion

When Javascript automatically converts the types behind the scene when we run the code.

Let’s understand using some examples.

Example 1:

let a = "50";
let b = "2";
let c = a / b;
console.log(c);
console.log(typeof c);

Output: 
25
number

In this code, I have declared a and b with a string value value and divided a by b. The output value is of number type.

This is type coercion where Javascript automatically converts the types behind the scene. As in this code, I have both string values but output value is of number data type.

Example 2:

let num = "25" + 1;
num = num * 2;
console.log(num);
console.log(typeof num);

Output: 
502
number

Explanation

1. In line number 1, “25”+1 will be 251 because 25 is a string and 1 is a number. So, in this case both values will concatenate.
2. In line number 2, “251” * 2 will be 502.
3. In the console, output is 502.
4. This value is of number type, you can check it in the console also using typeof.

So, in this case, Initially I had a string value of “251” but when it got multiplied by 2 Javascript automatically changes the data type for this variable behind the scene.

Example 3:

let num = "25" + 1;
num = num - 11;
console.log(num);
console.log(typeof num);

Output: 
240
number

Example 4:

let value = "I did total" + " " + 2 + " " + "goals";
console.log(value);
console.log(typeof value);

Output: 
I did total 2 goals
string

In line number 1, I have written both string and number data type and stored it in value variable. But the output I get is of String type. I have used the typeof in line 3 to check the data type.

When we use + to concatenate two or more things then it will always give us a string data type.

As you can see in the above code, I have also used 2 which is a Number data type but in the output, I am getting a string data type. This is called type coercion where Javascript automatically converts the types behind the scene.

Example 5:

console.log("12" + "17" + "200");

Output: 1217200

In this code, the values are in string type. So, in this case + will concatenate these values.

Point to Note:

1. If we are writing a number in ” “ and then try to add two or more numbers. Then it will behave as a string and it will give us a concatenated string. As you can see in the example 5 above.
2. If we are writing a number in ” “ and then try to divide, multiply, or subtract two or more numbers. Then in this case, the string will behave as a number type and the output value is also a number data type. As you can see in the example 1, 2, and 3 above.