Learning JavaScript type coercion

Posted on January 22, 2021


Type coercion in JavaScript is a process where a value of one type is implicitly converted into another type. This is automatically done by JavaScript so that your code won’t hit any errors. But as you’ll see in this post, type coercion can actually be the cause for bugs.

To understand type coercion well, you need to learn about the type system in general, so we’ll start with that.

What is a type system?

A type system is a set of logical rules that assigns a type (or data type) into various constructs of a computer program. You can read a lot about type system in other websites, but suffice to say that the JavaScript type system is the reason why it knows that "1" is a string and 1 is a number:

In the following example, the type system will identify the right data types for each variable accordingly:

let myNumber = 1; // a number
let myString = "1"; // a string

Now, let’s consider what happens when you perform an addition between a number and a string:

console.log(1 + "1");

Different programming languages will respond differently to the code above, depending on the rules written in its type system.

For example, programming languages like Ruby or Python will respond by crashing your program and giving an error as feedback. Something along the line of “Cannot perform addition between a number and a string”.

But JavaScript will see this and said: “I cannot do the operation you requested as it is, but I can do it if the number 1 is converted to a string, so I’ll do just that.”

And that’s exactly what type coercion is. JavaScript notices that it doesn’t know how to execute your code, but it doesn’t stop the program and respond with an error. Instead, it will change the data type of one of the values without telling you.

In short: the rules written in the JavaScript type system allows it to perform type coercion instead of responding with an error.

Type coercion rules

Type coercion rules are never stated clearly anywhere, but I did find some rules through trying various silly operations myself.

It seems that JavaScript will first convert data types to string when it finds different data types:

1 + "1" // "11"
[1 ,2] + "1" // "1,21"
true + "1" // "true1"

But the order of the values matter when you have an object. Writing object first always returns numeric 1:

{ a: 1 } + "1" // 1
"1" + { a: 1 } // "1[object Object]"
true + { a: 1 } // "true[object Object]"
{ a: 1 } + 1 // 1

Here are some more JavaScript coercions that I found. JavaScript can calculate between boolean and numeric types because boolean true and false implicitly has the numeric value of 1 and 0

true + 1 // 1+1 = 1
false + 1 // 0+1 = 1
[1,2] + 1 // "1,21"

Type coercion is always performed implicitly. When you assign the value as a variable, the variable type will never change outside of the operation:

let myNumber = 1;
console.log(myNumber + "1"); // prints 11
console.log(myNumber); // still prints number 1 and not string

You can try to find some on your own, but you certainly understand what type coercion is and how it works by now.

Why you should avoid type coercion

JavaScript developers are generally divided into two camps when talking about type coercion:

  • Those who think it’s a feature
  • Those who think it’s a bug

You are always free to form your own opinion, but if you ask me, I would recommend you to avoid using type coercion in your code all the time.

The reason is that I never found a problem where type coercion is required for the solution, and when I need to convert one type into another, it’s always better to do so manually:

let price = "50";
let tax = 5;

let totalPrice = Number(price) + Number(tax);

console.log(totalPrice);

You may think that type coercion allows you to write less code, but for the code above, type coercion will conver the tax value into string instead of converting price into number. It will cause a bug rather than shortening the code.

See also: JavaScript explicit type conversion

Grab the free JavaScript book today 👍

Learn the building blocks of JavaScript programming language like data types, functions, objects, arrays and classes.

Use the knowledge from the book to build a small but solid program.

Learn more