JavaScript Type Coercion Explained with Real Examples

I'm Safdar Ali. Type coercion is JavaScript converting a value to another type because an operator asked for it. You did not call Number(). The language did. That is useful in templates and painful in totals, form values, and flags that arrived as strings from an API.

This is not a spec walk. These are the conversions I still find in code review on React and Next.js apps.

Plus does not always add

If either side of + is a string, JavaScript concatenates. Form inputs and query params are strings even when they look like numbers.

const qty = "2"; // input value, always a string
const price = 499;
qty + price;        // "2499"  — concatenated
Number(qty) + price; // 501

// A cart bug I have shipped once and refused to ship twice
"10" + 1 + 1; // "1011"
1 + 1 + "10"; // "210"

Parse at the boundary: when the value enters your function, not in the middle of a JSX expression. Number("") is 0, which is often the wrong default for a price. Prefer an explicit check for empty string before you convert.

Truthiness is not a boolean

if converts the condition with the abstract ToBoolean operation. These values are falsy: false, 0, -0, 0n, "", null, undefined, and NaN. Everything else is truthy, including "0" and "false".

function stockLabel(count) {
  if (!count) return "Out of stock"; // 0 is falsy — correct here
  return count + " left";
}

function coupon(code) {
  if (!code) return null; // "" is falsy — good
  return code.trim();
}

// Dangerous: a free plan stored as 0
if (!planId) redirect("/pricing"); // planId 0 would redirect

When 0 is a real value, compare to null or undefined on purpose. Do not let truthiness decide for you.

Comparisons convert before they compare

Loose equality converts first. That is the whole subject of the follow-up on why === beats ==. One example belongs here because it is coercion, not a style preference:

"" == 0;          // true
"0" == 0;         // true
false == "0";     // true
null == undefined; // true
null == 0;        // false — a special case, not a pattern to memorise

I do not ask candidates to recite the full equality table. I ask them to convert form values before they compare, then use ===.

What I do in production

1. Treat every input, query param, and JSON field's shape as unknown until typed.
2. Convert numbers with a function that rejects empty strings and NaN.
3. Do not use truthiness for IDs, counts, or enums that can be 0.
4. Add one test that feeds a string where a number was assumed. Those tests pay for themselves.

Array methods and async code will not save you if the value was already the wrong type. Coercion is the bug underneath a lot of "React state is stale" tickets that were never about React.