DEV Community

loading...
Cover image for Coercion in JavaScript - πŸ€” do you know what it is?

Coercion in JavaScript - πŸ€” do you know what it is?

Benjamin Mock
I'm Ben, a Frontend Developer from Germany working at ebay
Originally published at codesnacks.net ・2 min read

Let's talk about Coercion today. Simply put, coercion is the process of changing a value from one type to another. Let's see a very simple example.

const number = 42
const string = String(number)

We're talking about explicit coercion in this example. We explicitly tell JavaScript to coerce a number into a string. The same is possible for other values. Let's see some more examples of explicit coercion.

const num = Number("10")
const bool = Boolean(0)
const float = parseFloat("10.2")
const anotherNum = parseInt("19")
const string = String(99)

But there are also cases (actually a lot of them) where implicit coercion will happen in JS.

const arr = []

if(arr.length){
   // do something
}

You've probably written some code like this before. In this case, implicit coercion happens in the if statement, because the if statement takes a boolean as an argument and arr.length returns a number.

Another example of implicit coercion is, for example, when you use a number in a string literal like this:

const num = 42
const str = `${num} pizzas for our office, please`

In the string literal, num is implicitly coerced into a string. Of course, we could also do this explicitly:

const num = 42
const str = `${String(num)} pizzas for our office, please`

Also, coercion always happens, when you use a double equal to compare two values. It doesn't happen, when you use the triple equal:

console.log("42" == 42) // true
console.log("42" === 42) // false

In the "42" == 42 case, implicit coercion is done by JS, to compare equal types. That's why the comparison is true. The triple equal === does no implicit coercion, that's why this comparison is false.


Want to get better at Web Development?
πŸš€πŸš€πŸš€subscribe to the Tutorial Tuesday βœ‰οΈnewsletter

Discussion (7)

Collapse
janpauldahlke profile image
jan paul

NaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaNBatman

Collapse
benjaminmock profile image
Benjamin Mock Author

Batman

Collapse
janpauldahlke profile image
jan paul

Array(16).join("foo" -1)+ " BATMAN"

source is still destroyallsoftware.com/talks/wat

Thread Thread
benjaminmock profile image
Benjamin Mock Author

That talk is so good!

Collapse
valentinprgnd profile image
Valentin Prugnaud 🦊 (he / him)

Great article! I believe explicit type conversion is usually referred as casting, implicit type conversion would be coercion.

Collapse
daniel13rady profile image
Daniel Brady

Great summary, Benjamin. πŸ‘

I'd like to suggest an edit:

Also, coercion always happens, when you use a double equal to compare two values.

This statement isn't entirely accurate: double-equal will only do coercion if it the types are different; if they are the same, it delegates the comparison to triple-equal.

Collapse
ankurt04 profile image
Ankur Tiwari

Good!