Type coercion

Coercion is translation

Type coercion is JavaScript converting a value from one type to another because an operator, condition, or built-in operation needs a different kind of value. You already met the practical rules in the Type conversion lesson. This lesson explains the internal translators behind those rules.

The most important translators are ToPrimitive, ToNumber, ToString, and ToBoolean. They are called abstract operations: names the specification uses to describe what the language must do. You do not call them directly, but you see their results every time code like [] + or if (value) runs.

We will use small, real examples and a tracer for supported puzzles. The deeper spec tour later, A tour of the abstract operations, will revisit the formal algorithms in full.

Primitive values are strings, numbers, booleans, null, undefined, symbols, and bigints. Objects are not primitive, so an operator that needs a plain value must ask the object to produce one. That request is ToPrimitive.

For ordinary objects, JavaScript tries methods such as valueOf() and toString() in an order chosen by a hint: number, string, or default. The Object to primitive conversion lesson covers custom Symbol.toPrimitive, valueOf, and toString in detail; here we focus on what coercion does next.

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 + "!");

Notice line 9: binary + does not immediately add. It asks the object for a primitive with the default hint. Because the object returns a string, + concatenates.

Once values are primitive, operators usually ask for a number or a string. Multiplication, subtraction, unary plus, and numeric comparison go toward ToNumber. String concatenation, template text, and many display operations go toward ToString.

The next playground traces real expressions through a small set of supported shapes. Pick a preset, read the code, then compare the abstract-operation story with the final value.

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

ToBoolean checks the short falsy list

ToBoolean is refreshingly small. It does not parse strings and it does not ask objects for primitives. It checks whether the value is one of the falsy values; everything else is truthy.

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

This is why if (items) does not check whether an array is empty. Empty arrays are objects, and objects are truthy. Test the length when length is what you mean.

Binary + is the operator with the most famous coercion surprises. Its decision tree is:

1. Evaluate the left expression, then the right expression.
2. Run ToPrimitive on objects with the default hint.
3. If either primitive is a string, convert both to strings and concatenate.
4. Otherwise, convert both toward numeric values and add.

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

The decision happens at each +, left to right. That is why 1 + 2 + "3" becomes "33", but "1" + 2 + 3 becomes "123".

Corner cases without panic

Coercion puzzles look random when you memorize outputs. They become manageable when you name the translators. Here is a gallery of classic cases, all verified by tests.

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

Use coercion deliberately in real code

Professionals do not avoid coercion by pretending it does not exist. They make conversion points obvious. Convert at the boundary where data enters your program, then keep the rest of the code boring.

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

Form fields, URL search parameters, and JSON from APIs often arrive as strings. Convert once with Number(), String(), or Boolean() when that is what you mean. Do not let + guess whether a checkout total is math or text.

Common misconceptions

Key takeaways

• Coercion is JavaScript translating values for the operation being performed.
• Objects usually go through ToPrimitive before ToNumber or ToString.
• ToBoolean is just the falsy list; it does not inspect object contents.
• Binary + concatenates if either primitive is a string; otherwise it adds numerically.
• Corner cases are easier to explain by naming the translator than by memorizing outputs.

Up next: Equality & sameness.