Implicit and Explicit Coercion in JavaScript

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

Deepak Pandey
Oct 31, 2019 · 4 min read
Photo by Clark Tibbs on Unsplash

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 numberundefined + 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.

  1. “”
  2. 0
  3. -0
  4. undefined
  5. null
  6. 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 number12 === "12" // Output is false as string "12" is not converted to numbertrue == 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 25Number("") //Output is 0 as "" string is converted to 0Number([]) //Output is 0 as [] is converted to 0Number(null) //Output is 0 as null is converted to 0Number(true) //Output is 1 as true is converted to 1Number(false) //Output is 0 as false is converted to 0Number("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 trueBoolean([]) //Output is trueBoolean(null) //Output is falseBoolean({}) //Output is trueBoolean("Yeah! I will be converted to Boolean.") //Output is true

That’s it from my side. Thank you for reading!

Better Programming

Advice for programmers.

Deepak Pandey

Written by

Angular | Vue | Angular JS | JavaScript | Python | Java

Better Programming

Advice for programmers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade