What is Implicit and Explicit Coercion in JavaScript?

What is Implicit and Explicit Coercion in JavaScript?

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.

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.

  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 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

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

Top 6 Productivity Tools for Front-end Developers

Today I wanted to share with you the tools I daily use to increase my productivity as a front-end developer. 6 tools to increase your productivity as a Front-end developer.

Hire Dedicated React Native Developer

Have you ever thought of having your own app that runs smoothly over multiple platforms? React Native is an open-source cross-platform mobile application framework which is a great option to create mobile apps for both Android and iOS. **[Hire...

Hire Dedicated React Native Developer in India | React Native Development

Hire dedicated React Native developers for your next project. As the top react native development company we offer you the best service as per your business needs.

Hire React Js Developer from Expert React JS Development Company

Are you looking to [hire React JS developer](https://www.mobiwebtech.com/react-js-development-company/ "hire React JS developer") from a prestigious and reliable React JS development company? Visit at Mobiweb Technologies here we have a big team...