Implicit and Explicit Coercion in JavaScript

Coercion is the process of conversion of data from one type to another

There are cases where JavaScript implicitly does coercion and we aren’t aware of it.

Coercion applies to every data type present in the JavaScript world. An example of coercion is shown below:

let number = Number("35");

Here, we’re explicitly converting a string to a number by passing the string to the inbuilt Number() function.

There are two types of coercion in JavaScript:

Implicit Coercion: Type conversion is done implicitly by JavaScript.

Explicit Coercion: Type conversion is done explicitly in code using the inbuilt functions like Number(), String(), Boolean(), etc.

We’ll look at examples for both types.

Implicit Coercion

In this case, the coercion is done implicitly. When JavaScript operates in a wrong data type, it will try to convert the value to the right data type.

Sometimes, the result is different from the one expected. Below are some examples of implicit typecasting:

12 + ""    //Output is "12" as number 12 is converted to string "12"

"15" * 2    //Output is 30 as string 15 is converted to number 15

"15" - "11" //Output is 4 as both the strings are converted to number

undefined + 6 //Output is NaN as undefined could not be converted to number

"Hello" + null  //Output is "Hellonull" as null is converted to string "null"

null + 25     //Output is 25 as null is converted to 0.

true + true //Output is 2 as true is converted to number 1.

false + 10 //Output is 10 as false is converted to number 0.

10 * [6] //Output is 60 as [6] is converted to number 6.

10 * [10, 20] //Output is NaN as [10, 20] could not be converted to number

[1] + [1,2] //Output is "11,2" as [1] is converted to "1" and [1,2] is converted "1,2". Finally the two are concatenated to give the result "11,2"

Whenever we pass a different data type as an operand in a numeric expression involving operators like -, *, /, %, the conversion process is similar to calling the in-built Number function on the operand. If the conversion to number isn’t possible, NaN is returned.

The + operator works differently than the other numerical operators. It can work as both concatenation and numerical operator depending on the type of operand passed.

Implicit coercion is also done by the if() condition and == operator.

If the value in the if() condition isn’t a Boolean, then it will be implicitly tried to be converted to a Boolean type. All data types can be converted to Boolean. All the values except the ones mentioned below are converted to a true Boolean value.

“”
0
-0
undefined
null
NaN

let x;
if(x){
console.log("I am true.");
}
// No result is printed in console as x is undefined

let y = [];
if(y){
console.log("I will get logged.");
}
// "I will get logged." will get printed in console

if (-1) {
console.log("I will be logged.")
}
//"I will be logged." will get printed in console

The == operator converts the data type of the values if they aren’t of the same type. To do a strict comparison, we use === operator where type conversion isn’t done.

12 == "12" // Output is true as string "12" is converted to number

12 === "12" // Output is false as string "12" is not converted to number

true == 1 //Output is true as true Boolean is converted to 1

'true' == true //Output is false as 'true' is converted to NaN and true is converted to 1

== Operator Chart Reference — StackOverflow

Note: Other comparison operators behave the same as the == operator.

Explicit Coercion

In this case, type conversion is explicitly done in the code by the developer. JavaScript provides inbuilt methods for type conversion.

Converting to Number

The Number() global method is used to convert any other data type value to numeric values.

Number("25") //Output is 25 as "25" string is converted to number 25

Number("") //Output is 0 as "" string is converted to 0

Number([]) //Output is 0 as [] is converted to 0

Number(null) //Output is 0 as null is converted to 0

Number(true) //Output is 1 as true is converted to 1

Number(false) //Output is 0 as false is converted to 0

Number("Test") //Output is NaN as "Test" could not be converted to number

parseInt() and parseFloat() methods can also be used to convert numbers stored as a string to a number. For all other data types, it will return NaN.

Converting to String

The String() global method is used to convert any other data type value to string values.

String(25) //Output is "25" as 25 is converted to string "25"

String([]) //Output is "" as [] is converted to empty string ""

String(null) //Output is "null" as null is converted to string "null"

String(true) //Output is "true" as true is converted to string "true"

String(false) //Output is "false" as false is converted to string "false"

String({}) //Output is "[object Object]" as {} is converted to string(similar to calling toString() on a object)

Converting to Boolean

The Boolean() global method is used to convert any other data type value to Boolean values.

Boolean(25) //Output is true

Boolean([]) //Output is true

Boolean(null) //Output is false

Boolean({}) //Output is true

Boolean("Yeah! I will be converted to Boolean.") //Output is true

That’s it all. Thank you for reading!

#JavaScript #React #Programming #Front End Development