javascript: type conversion and type coercion

Some of the helpful and most used features in JavaScript are type conversion and type coercion, although, they can help you write less and more readable code, they can be the source of bugs especially type coercion, therefore knowing and understanding them will save you from some painful bugs. So what are type conversion and type coercion?

They both mean converting values from one type to another, for example from string to number, from number to Boolean, etc. but there is a huge difference between them.

1- Type conversion:

As we said, it’s changing the type of values, but manually, as an example, let’s say we have the value of an input which is a year of birth and we want to calculate the current age, as you know the type of input value is a String and to do the calculation we need to convert it to a number.

const  input = document.querySelector(‘input’);
const  currentYear = new Date().getFullYear();
const yearOfBirth = Number(input.value);
const  currentAge = currentYear - yearOfBirth;

We stored the input value in the input variable, we get the current year using the getFullYear() method and assigned it to the current year variable, and this is the important part,
we converted the input value which is a string to a number using the Number() function, and finally, we stored the result of the calculation in the current variable.

In JavaScript, you will always need to perform such conversions, the widely used functions are:

  • String(): to convert a value to the type of String.
  • Number(): to convert a value to the type of Number, but if the value is not a valid number the output will be NaN which means Not a Number (by the way, type of NaN is Number).
  • Boolean(): to convert a value to the type of Boolean, true or false.

Those functions are very important and useful.

2- Type coercion:

This conversion is done automatically by JavaScript, it may look hard to grasp at first but understanding it is crucial for mastering JavaScript.

Let’s go back to the first example:
Before doing the calculation you need to check if the user submitted his year of birth and you may do it like this:

const  current;
if(input.value.trim() !== ""){
    currentAge = currentYear - yearOfBirth;
}

As you may know any string but an empty string is true even a string with whitespace that's why we use the trim() method to remove whitespace from both sides of a string, so If the input value doesn’t equal an empty string then do the calculation, now let’s do it with the coercion in mind :

const  current;
if(input.value.trim()){
    currentAge = currentYear - yearOfBirth;
}

Do you see the difference? What’s happening is that JavaScript will automatically convert the input value from a string to a Boolean and if the value is true then do the calculation.

This behavior exists everywhere in JavaScript, for example:

1 + ‘1’  // ‘11’
1 - ‘1’ // 0
true * false // 0
10 / true // 10
1 == true // true

This behavior is weird but it’s beneficial and learning it has a lot of advantages.
I hope you have learned something from this article, if you found it useful don't forget to give it a like.

24

الفئات:

Javascript

Tags:

Javascript