What is type coercion in javascript and how is it different from type conversion?

First, let us start easy by taking a look at type conversion.

In type conversion, we are explicitly mentioning the data type we want the variable holding the value to be converted to. Let us look at a few examples of type conversion

const inputYear = '1999' ; 
console.log(Number(inputYear));

In the above example, we are explicitly mentioning that we want the variable inputYear which contains a string to be converted to a number data type. Let us look at another example,

const age = '20';
console.log(Number(age) + 15);

In this example, we are converting the data type of age variable which contains a string to a number data type by type conversion and then adding it to 15.

Now let us look at type coercion,

Type coercion is when Javascript automatically converts the data type of a variable behind the scenes for the user i.e it has implicitly converted. Type coercion occurs whenever an operator is dealing with two operands of different data types. Let us look at a few examples,

console.log("I am " + 23 + " years old");

If you run the above code, you will notice the output to be "I am 23 years old". It can be confusing considering the fact that we are adding a string to a number and yet here we get a valid output and not an error instead.

Here Basically what Javascript is doing is implicitly converting 23 to string data type and then the concatenation of the strings takes place which is why we get the output "I am 23 years old".

Now let us look at another example with the + operator

console.log('23' + '11' + 15);

Here we get the output 231115. Just like in the previous example, here too the number 15 is converted to string data type by Javascript internally and then all the operands are concatenated to get the output 231115. There is an easy way of remembering what one can expect when we have a + operator along with operands of different types.

Whenever we have the + operator and its operands are of different data types, all its operands of type number are converted to string data type due to type coercion.

The opposite happens in the case of the '-' operator, '*' operator, and the '/' operator where all the operands of data type strings are converted to number data type due to type coercion. Let us look at a few examples

console.log('23'-'10'-3);

The above code will yield an output of 10 of data type number because all the strings are internally converted to numbers by Javascript and then evaluated. Here is another example.

console.log('23' * '2');

Type coercion can also be noticed in boolean data types. Before we proceed to boolean type examples we should be aware of the concept of truthy and falsy values.

In Javascript the falsy values include,

0 (zero)
undefined
null
NaN
"" (empty string)

So all these values will evaluate to false when we attempt to convert them to boolean type.

console.log(Boolean(undefined));
console.log(Boolean(0));

Both the statements in the above code snippet will evaluate to false

In javascript type coercion on booleans occurs only in two scenarios. One when logical operators are involved and two when used in a logical context for example when used in a condition of an if else statement .

Let us understand this with the help of an if-else code.

let money = 0;
if(money)
{
  console.log("You have sufficient  money to purchase a chocolate");
}
else
 {
   console.log("You don't have any money");
}

In the above code albeit money is equal to 0(zero), in the if condition block Javascript will try to coerce the value into a boolean. So in the above code because money is equal to 0 and because 0 is a falsy value, money will be converted to false and therefore the else block will run.

Type coercion can sometimes lead to bugs in our code if one is not aware of how exactly it works in Javascript.

Thanks for reading! :). Happy Coding !!