Javascript's Type Coercion

Hi Everyone,

Today we are going to tackle an interesting, and somewhat controversial, topic in Javascript - Type Coercion.

Quick recap - Javascript DOES have types. You'd be surprised how often people get that simple fact wrong.

Javascript types are:
-Primitives-
number
string
boolean
undefined
null

-Complex-
Object
Symbol (ES6)

Type coercion is different from type conversion in that it is handled implicitly by the JS engine at runtime, as opposed to being handled explicitly by the author at writing time.

An example of type conversion would be:
1 + Number("12");

Here, we are explicitly converting the string "12" to a number by calling the function Number.

An implicit coercion would be:
1 + "12";
which returns the string "112". Somehow, our number 1 was coerced into a string!

So, coercion is basically what happens when you give the Javascript engine operands of different types, without explicitly converting one into the other.

Today, we are going to learn which rules Javascript applies when coercing values.

*A quick point before we begin. Every Javascript coercion will result in a scalar primitive value; either a number, string, or boolean. That's it! Never anything complex like an object or a function.

In section 9, the ES5 spec defines what are called abstract value operations. These are internal-only operations that are used in coercion. We will look at four of them here; ToString, ToNumber, ToBoolean, and ToPrimitive.

ToString:
Anytime a non-string value is coerced into a string, ToString is invoked internally.
For primitives, the result is pretty straightforward:
null -> "null"
undefined -> "undefined"
true -> "true"
42 -> "42"
Things are more interesting if you are trying to convert something like an object or a function.
Unless you choose to override an object's ToString method, it will use the default one of Object.prototype.toString(), which will return the internal [[Class]] property of that object. This is why you usually see something like "[object Object]" when you run something like console.log({});

See if you can predict the output of the following code:
true + " " + 42


Answer:
It's the string   "true 42"

So far so good? Let's move on to the next abstract operation.

ToNumber:
This comes into play whenever a non-number value is forced to behave like a number - for example, in a mathematical operation. For example, in 3 - '2';  The string '2' needs to behave like a number.
Some basics, when toNumber is called on each of the following:
true -> 1
false -> 0
undefined -> NaN
null -> 0
strings will be NaN if it can't be coerced into a meaningful number.
"7" -> 7
"seven" -> NaN

Objects and arrays will first be converted to their primitive value ( one of the types we just discussed) via toPrimitive. From there, the resulting value is coerced to a number via toNumber.

You might be wondering just how toPrimitive takes something like an object and turns it into a primitive. In the next update, we will discuss just how this works.

ToPrimitive: