Type coercion

Coercion is translation

Type coercion means JavaScript changes a value from one type to another on its own. It happens when an operator, a condition, or a built-in function needs a different kind of value than the one it got. For example, "6" - 1 needs two numbers, so JavaScript turns the text "6" into the number 6.

You met the everyday rules in the Type conversion lesson. This lesson shows the steps JavaScript follows inside, so you can explain each result yourself.

The rules come from the specification, or spec. The spec is the official rule book for JavaScript. It gives each conversion step a name. These named steps are called abstract operations. You can't call them from your code. But they run every time code like [] + {} or if (value) runs. This lesson uses four of them:

• ToPrimitive turns an object into a plain value.
• ToNumber turns a plain value into a number.
• ToString turns a plain value into text. In JavaScript, text is called a string.
• ToBoolean turns any value into true or false.

The lesson uses small, real examples. It also has a tracer: a tool that shows each conversion step for a fixed list of expressions. A later lesson, A tour of the abstract operations, reads these same steps in the spec itself.

A plain value is called a primitive. JavaScript has seven kinds of primitives:

• strings (text), such as "hi"
• numbers, such as 7
• booleans: true and false
• null and undefined
• symbols and bigints

Everything else is an object, such as an array or {}. An operator that needs a plain value has to ask the object for one. That request is called ToPrimitive.

The request comes with a hint. The hint is a word that says which kind of plain value the operation would like: "number", "string", or "default". The word "default" means "no preference".

For an ordinary object, JavaScript calls its valueOf() and toString() methods. The hint decides which one it tries first. An object can also have its own Symbol.toPrimitive method. Then JavaScript calls that method instead and passes it the hint. The Object to primitive conversion lesson covers these three methods in detail. Here we look at what happens after the object answers.

The code below gives an object its own Symbol.toPrimitive method, so you can see which hint each line sends. Step through it.

1const value = {2  [Symbol.toPrimitive](hint) {3    return hint === "number" ? 7 : "seven";4  }5};6 7console.log(+value);Run8console.log(String(value));9console.log(value + "!");

In plain words, line by line:

• Lines 1 to 5 make an object called value. Its method returns 7 when the hint is "number", and "seven" for any other hint.
• Line 7 uses unary +, a plus sign in front of one value. Unary + always wants a number, so it sends "number" and gets 7.
• Line 8 calls String(value). It sends "string" and gets "seven".
• Line 9 uses binary +, a plus sign between two values. It does not add straight away. First it sends "default" and gets "seven". That is a string, so + joins it with "!" and prints seven!.

Once the values are plain, most operators want either a number or a string.

• These use ToNumber: times *, minus -, unary +, and comparisons such as <.
• These use ToString: joining text with +, putting a value inside a template literal, and showing a value as text.

const rawPrice = " 12 ";
const rawUnit = "12px";

console.log(Number(rawPrice));
console.log(Number(rawUnit));
console.log(String(12) + " items");

In plain words, line by line:

• Lines 1 and 2 store two strings, the way they might arrive from a form.
• Line 4 prints 12. Number() removes the spaces around " 12 " and reads the number.
• Line 5 prints NaN, which means "not a number". Number() needs the whole text to be a number, and px is not. It does not keep the 12 part.
• Line 6 uses String(12) on purpose to make the string "12". Then + joins " items", so it prints 12 items.

The two tables below show more conversions. Read each row as: when you write this, you get this, for this reason.

The tracer below shows each conversion step for a fixed list of expressions. Pick an expression with a button. Read the code on the left. Then follow the steps on the right, down to the final value.

1console.log([] + {});

ToBoolean checks the short falsy list

A value is falsy if it counts as false in a condition, such as the one in an if. Every other value is truthy: it counts as true. ToBoolean is the simplest conversion step:

• It does not read text to find a number in it.
• It does not ask objects for a plain value.
• It only checks whether the value is on the short list of falsy values.

Here is the whole falsy list. Every value that is not in this table is truthy.

The comments in the next block show each result. On line 4, Number("nope") gives NaN first, and NaN is falsy.

Boolean([]);      // true: objects are truthy
Boolean("0");     // true: non-empty string
Boolean(0);       // false: zero is falsy
Boolean(Number("nope")); // false: NaN is falsy

console.log(Boolean("false"));
console.log(Boolean([]));
console.log(Boolean({}));
console.log(Boolean(NaN));

In plain words, line by line:

• Line 1 prints true. "false" is a string that is not empty, so it is truthy. The word inside does not matter.
• Lines 2 and 3 also print true. An empty array and an empty object are still objects, and every object is truthy. ToBoolean does not count what is inside them.
• Line 4 prints false, because NaN is on the falsy list.

To check whether an array has items, write items.length > 0. Don't use truthiness for that.

Binary +, the plus sign between two values, causes the most famous coercion surprises. It can do two jobs: add numbers or join strings. It picks a job in four steps:

1. Work out the value on the left, then the value on the right.
2. If either value is an object, turn it into a plain value with ToPrimitive and the hint "default".
3. If either plain value is a string, turn both into strings and join them.
4. Otherwise, turn both into numbers and add them.

console.log("6" - 1);
console.log("6" * "2");
console.log("6" + 1);

In plain words, line by line:

• Line 1 prints 5. Minus can only do math, so JavaScript turns "6" into the number 6.
• Line 2 does the same for times and prints 12.
• Line 3 is different. Binary + can join strings, and "6" is a string. So JavaScript turns 1 into the string "1" and prints 61.

So changing - to + can change both the job and the type of the result. The next example has more than one + in a row. Step through it and switch between the three expressions.

1const result = 1 + 2 + "3";Run2console.log(result);

Each + makes its own choice, one at a time, from left to right. That is why 1 + 2 + "3" gives "33", but "1" + 2 + 3 gives "123".

Corner cases, step by step

Coercion puzzles look random if you try to memorize the answers. They make sense once you name each conversion step. The table below shows famous puzzles. Read each row as: this code gives this result, and these are the steps. The tests for this lesson run every one of them.

The next block makes two objects that look the same and compares them three ways.

const firstCart = { total: 5 };
const secondCart = { total: 5 };

console.log(firstCart === secondCart);
console.log(firstCart == secondCart);
console.log(firstCart == "[object Object]");

In plain words, line by line:

• Lines 1 and 2 each make a new object. They look the same, but they are two separate objects.
• Lines 4 and 5 print false. Comparing two objects checks whether they are the same object. It does not compare what is inside them.
• Line 6 prints true. Loose equality, ==, turns the object into its usual string, "[object Object]", before it compares.

Line 6 is a puzzle to explain, not a style to copy. In real code, compare the fields you care about, or use strict equality, ===. The Equality & sameness lesson covers == in full.

The next block shows [] == ![] getting simpler, one step per line. It is a trace to read, not code to run.

[] == ![]
[] == false      // ![] is false because arrays are truthy
[] == 0          // false becomes 0
"" == 0          // [] becomes "" through ToPrimitive
0 == 0           // "" becomes 0
true

Use coercion on purpose in real code

Good code doesn't hide coercion. It makes every conversion easy to see. Convert data at the place where it comes into your program. Then the rest of your code works with the types it expects.

function checkoutTotal(form) {
  const price = Number(form.price.value);
  const shipping = Number(form.shipping.value);

  if (Number.isNaN(price) || Number.isNaN(shipping)) {
    return "Please enter valid numbers";
  }

  return price + shipping;
}

In plain words, line by line:

• A form field always gives you a string, even when the person typed digits.
• Lines 2 and 3 turn the two strings into numbers with Number().
• Lines 5 to 7 stop early with a message if either one is NaN. Number.isNaN() returns true only for NaN.
• Line 9 adds two real numbers, so + does math.

function readQuantity(value) {
  const quantity = Number(value);
  return Number.isNaN(quantity) ? null : quantity;
}

console.log(readQuantity("3"));
console.log(readQuantity("3 items"));

Line 6 prints 3. Line 7 prints null, because Number("3 items") is NaN.

Form fields, the query part of a web address, and JSON data from a server often give you strings. Convert them once, on purpose, with Number(), String(), or Boolean(). Then reject NaN before it reaches later math. Don't let + guess whether a checkout total is math or text.

Common misconceptions

The four lines in the next table look alike, but each one runs a different conversion. Read each row as: this code runs this step and gives this result.

Key takeaways

• Coercion is JavaScript changing a value's type because an operation needs a different kind of value.
• Objects usually go through ToPrimitive first. Then comes ToNumber or ToString.
• ToBoolean only checks the short falsy list. It never looks inside an object.
• Binary + joins strings if either plain value is a string. Otherwise it adds numbers.
• Puzzles are easier to explain when you name each conversion step than when you memorize the answers.

Up next: Equality & sameness.