Type Coercion

You will understand how JavaScript silently converts values between strings, numbers, and booleans, and how to predict the result of common expressions.

What it is

Type coercion is JavaScript's automatic conversion of a value from one type to another when an operation expects a different type. The mental model is: the operator or context asks for a primitive value, and the engine converts it using rules such as ToPrimitive, Number, String, and Boolean. Related terms include implicit conversion, abstract equality, strict equality, truthy, and falsy.

Why it matters

• It explains surprising results like "5" + 1 becoming "51".
• It helps you debug form inputs, URL parameters, and JSON values that arrive as strings.
• It clarifies why == and === behave differently.
• It prevents bugs in conditionals where values like 0, "", and null are treated as false.

Syntax or steps

The smallest useful pattern is a mixed-type expression:

value + otherValue

For +, JavaScript first converts operands to primitives. If either primitive is a string, the other is converted to a string and concatenated. Otherwise, both are converted to numbers and added. For ==, JavaScript converts operands to comparable primitives before checking equality. For ===, no coercion occurs; types must match.

Example

console.log("5" + 1);          // "51"
console.log("5" - 1);          // 4
console.log(5 == "5");         // true
console.log(5 === "5");        // false
console.log(Boolean("0"));     // true
console.log(Number(""));       // 0
console.log(null == undefined); // true
console.log(null === undefined); // false

Part by part:

• "5" + 1: one operand is a string, so 1 becomes "1" and the result is "51".
• "5" - 1: subtraction only works with numbers, so "5" becomes 5 and the result is 4.
• 5 == "5": abstract equality coerces "5" to 5, so the values are equal.
• 5 === "5": strict equality compares type and value, so it is false.
• Boolean("0"): any non-empty string is truthy, even if it looks like zero.
• Number(""): an empty string converts to 0.
• null == undefined: these two values are loosely equal by special rule.
• null === undefined: they are different types, so strict equality is false.

Common mistakes

• Assuming + always adds numbers. If one side is a string, it concatenates. Fix: convert explicitly with Number() when you need arithmetic.
• Using == casually. It can hide type bugs. Fix: prefer === unless you understand the coercion rule.
• Thinking "", 0, and false are the same value. They are all falsy, but they are not equal under strict equality. Fix: compare with === or convert intentionally.
• Forgetting that NaN is a number but never equals itself. Fix: use Number.isNaN() to test for it.

When to use it

Implicit coercion is useful when you want concise code and the expected type is obvious, such as checking truthiness in an if statement. Explicit conversion is better when clarity matters, especially with user input or equality checks.

Practice

Guided exercise: predict the output of console.log("10" + 2); and console.log("10" - 2);. Expected output: "102" and 8.

Challenge: rewrite if (input == 0) so it only accepts the number 0, not strings like "0". Hint: use === and convert input first if needed.

Quick check

Why does "5" + 1 produce "51", but "5" - 1 produce 4?

Answer: + treats a string operand as a signal to concatenate, while - only has numeric behavior, so it converts the string to a number.

Summary

Type coercion is JavaScript's automatic conversion of values to fit an operation or context. The key transferable idea is to ask what type the operator expects: string, number, or boolean. In most production code, prefer explicit conversion and strict equality to make behavior predictable.