JavaScript Type Conversion Coercion Explained

JavaScript type coercion is the built-in behavior of automatically converting a value from one type to another when an operation expects a different type. This happens silently, without you asking for it.

Sometimes it is helpful. Other times it produces surprising results that take minutes to debug.

Understanding coercion rules helps you predict what your code will do when types do not match up. It also helps you decide when to let coercion work for you and when to use explicit conversion instead.

javascript

console.log("5" - 2);  // 3 (string converted to number)
console.log("5" + 2);  // "52" (number converted to string)
console.log(5 + true); // 6 (true converted to 1)

The minus operator converted the string "5" to a number and subtracted. The plus operator converted the number 2 to a string and concatenated. The same value "5" behaved differently depending on the operator next to it.

These are the kinds of surprises coercion creates.

How the Plus Operator Coerces

The plus operator has a special rule: if either operand is a string, JavaScript converts the other operand to a string and performs concatenation. This string-first behavior is the source of most coercion bugs.

javascript

console.log(1 + 2);        // 3 (both numbers, normal addition)
console.log("1" + 2);      // "12" (string + number = concatenation)
console.log(1 + "2");      // "12" (number + string = concatenation)
console.log("1" + "2");    // "12" (both strings, concatenation)
console.log(1 + 2 + "3");  // "33" (1+2=3 first, then 3+"3"="33")
console.log("1" + 2 + 3);  // "123" ("1"+2="12" first, then "12"+3="123")

The order matters. In the expression 1 + 2 + "3", the first two numbers add to 3, then "3" is concatenated with that result. In "1" + 2 + 3, the string "1" triggers concatenation immediately, and everything after that stays as string concatenation.

Booleans also coerce with the plus operator, as the opening example already showed with 5 + true. false behaves the same way, converting to 0 in numeric contexts, but a string operand still forces concatenation instead:

javascript

console.log(5 + false);  // 5 (false -> 0)
console.log("5" + true); // "5true" (string triggers concatenation)

How Other Arithmetic Operators Coerce

The minus, multiply, divide, and modulo operators all try to convert both operands to numbers. Unlike the plus operator, they have no special string behavior.

javascript

console.log("10" - 2);   // 8 (string "10" becomes number)
console.log("10" * "2"); // 20 (both strings become numbers)
console.log("10" / "2"); // 5
console.log("10a" - 2);  // NaN (cannot convert "10a" to number)

These operators are more predictable than plus because they always attempt numeric conversion. If a string cannot be parsed as a number, the result is NaN.

null and undefined also coerce to numbers with these operators. null becomes 0 and undefined becomes NaN:

javascript

console.log(10 - null);      // 10 (null -> 0)
console.log(10 - undefined); // NaN (undefined -> NaN)

Loose vs Strict Equality

The double equals operator performs type coercion before comparing. The triple equals operator does not. This is the most important coercion rule to remember for comparisons.

javascript

console.log(5 == "5");   // true (string "5" coerced to number)
console.log(5 === "5");  // false (different types, no coercion)
 
console.log(0 == false);  // true (false coerced to 0)
console.log(0 === false); // false (different types)
 
console.log(null == undefined);  // true (special rule)
console.log(null === undefined); // false (different types)

Use triple equals as your default. It is safer because it surfaces type mismatches immediately and never performs hidden type coercion.

Explicit Conversion: Taking Control

Instead of relying on implicit coercion, you can explicitly convert values to the type you need. This approach makes your intent clear and eliminates surprises entirely.

Use the Number function to convert a value to a number. Strings that represent valid numbers, booleans, and null all follow predictable rules:

javascript

console.log(Number("42"));     // 42
console.log(Number(true));     // 1
console.log(Number(false));    // 0
console.log(Number(null));     // 0

The Number function is the clearest way to convert to a number. It never produces surprises: valid strings become numbers, invalid strings become NaN, booleans become 1 or 0, and null becomes 0.

Use the String and Boolean functions for the other two primitive types. String converts anything to its text form:

javascript

console.log(String(42));       // "42"
console.log(String(true));     // "true"
console.log(String(null));     // "null"

Boolean converts any value to true or false. It follows the truthy and falsy rules: falsy values like 0, empty strings, null, and undefined become false. Everything else becomes true.

This is useful when you need an explicit boolean from any input:

javascript

console.log(Boolean(1));       // true
console.log(Boolean(0));       // false
console.log(Boolean("hello")); // true
console.log(Boolean(""));      // false
console.log(Boolean(null));    // false

Explicit conversion makes your code more readable and predictable. When another developer sees Number(userInput), they immediately know you are converting to a number. When they see userInput - 0, they have to think about whether that was intentional or accidental.

For the detailed comparison of implicit and explicit approaches, see the implicit vs explicit type conversion guide. To understand truthy and falsy values that drive boolean coercion, read the truthy and falsy guide.