Type Coercion in JavaScript.Explained!

What do you know about type coercion in JavaScript? This question often asked in an interview to a JavaScript developer. If you do not know the answer or have not heard this term before, they may put it in another way "What will be the output if you try to add 20 and '22'?"

What is Type Coercion?

Type coercion is the process of implicit or automatic conversion from one datatype to another.

Type Coercion is often confused with Type conversion, although there is a subtle difference between them. Type Coercion is always implicit whereas Type Conversion(or typecasting) can be either implicit or explicit.

As a JavaScript developer we should be aware of different ways a type coercion can take place to write better code. So, lets dive into it.

Type coercion in JavaScript only coerces to the string, number, and Boolean primitive types. There’s no way in JavaScript to coerce a value type to object or function.

Four ways that type coercion can takes place are:

1.Number to String:

When a non-string value is added to a string, it always implicitly coerce or automatically convert the non-string value to a string.

 var value = '20' + 22;
 console.log(value);//Output: 2022

In the above example which is also the question asked in the beginning, number 22 in implicitly converted to string '22' and then concatenate the two values together. The output is a string i.e “2022”.

2. String to Number:

When performing operations such as subtraction (-), multiplication (*), division (/) or modulus (%), all non-numeric values ​​are converted into number, as these operations can only be performed between numbers.

var value = 20 - '5';
console.log(value);//Output: 15

In the above example string '5' in implicitly converted to number 5 and then the subtraction between the two values takes place. The output is a number i.e 15.In the same way, you can check for other operations.

3. Boolean to Number:

When Boolean is added to a number, the Boolean value is converted to a number as it is safe and easy to convert Boolean values ​​into Number values. Boolean value can be represented as 0 for ‘false’ or 1 for ‘true’.

var value1 = 2 + true;;
console.log(value1);//Output: 3

var value2 = 2 + false;;
console.log(value2);//Output: 2

In the above example true in implicitly converted to number 1 and then the addition between the two values takes place. The output is a number i.e 3.In the same way, the false is implicitly converted to 0 and then the values were added. The output is a number i.e 2.

4. The Equality Operator:

Double equal(==) operator can be used to compare values ​​regardless of their type. This is done by implicitly converting a non-number data type to a number. Double equal(==) uses the abstract equality algorithm to decide how to compare values.

 var value = (20 == '20');
 console.log(value);//Output: true

In the above example string '20' in implicitly converted to number 20 and then the comparison is made. The output is true.

Conclusion

Type Coercion in JavaScript can be a tricky topic and if you are not sure about how JavaScript will perform type conversion on your value , check it out in the console first.

This is a short overview that provides the basics understanding of type coercion, however, reading the ECMAScript specifications can provide a deep understanding about why these unexpected type coercion results occur.

Wrap Up!!

I hope you enjoyed this article. Thank you for reading. Please share it with your network. Don’t forget to leave your comments below.