Type Coercion & Casting

How JavaScript converts between types automatically — and how to do it deliberately with Number(), String(), and Boolean().

What it is, in plain English: Type coercion is JavaScript converting a value from one type to another automatically, without you asking. It happens during arithmetic, comparisons, and template literals. Sometimes it's helpful ('1' - 1 = 0). Often it's surprising ('1' + 1 = '11'). The fix: convert types explicitly yourself using Number(), String(), or Boolean() so JavaScript does exactly what you intended.

When JavaScript converts types — and how to control it

JavaScript sometimes converts a value from one type to another automatically — without you asking. This is called type coercion, and it's one of the main places where JavaScript surprises people. Once you understand the rules, you can avoid the surprises.

The biggest trap: + with strings

The + operator does two things in JavaScript:

If both sides are numbers → adds them
If either side is a string → concatenates (joins) them as text

// Numbers: + adds
console.log(1 + 2);         // 3

// String involved: + concatenates
console.log("1" + 2);       // "12"  ← "1" is a string, so 2 becomes "2"
console.log(1 + "2");       // "12"  ← same
console.log("Total: " + 99);// "Total: 99"  ← useful!

// Order matters with mixed types:
console.log(1 + 2 + "3");   // "33"  — 1+2=3 (numbers), then 3+"3"="33"
console.log("1" + 2 + 3);   // "123" — "1"+2="12", then "12"+3="123"

This is why user input always needs converting. When a user types a number into a form, it arrives as a string. Adding two form values with + joins them as text. Always convert with Number() first.

// Form input example:
const price = "9.99";   // came from user input — it's a string!
const qty = "3";

console.log(price * qty);          // 29.97 — * converts both to numbers ✓
console.log(price + qty);          // "9.993" — + concatenated! ✗

// Safe approach: convert first
console.log(Number(price) + Number(qty));  // 12.99  ✓ (9.99 + 3)

Other operators convert to numbers

Subtraction, multiplication, division, and comparisons all convert strings to numbers automatically. Only + concatenates.

console.log("10" - 5);    // 5   — "10" → 10
console.log("10" * 2);    // 20  — "10" → 10
console.log("10" / 4);    // 2.5 — "10" → 10
console.log("5" > 3);     // true — "5" → 5
console.log("abc" - 1);   // NaN — "abc" can't become a number

Explicit conversion — do it yourself, safely

Instead of relying on JavaScript's automatic conversions, convert deliberately:

// → Number
Number("42")        // 42
Number("3.14")      // 3.14
Number("")          // 0     ← careful
Number("abc")       // NaN
Number(true)        // 1
Number(false)       // 0
Number(null)        // 0     ← careful
Number(undefined)   // NaN

// parseInt — extracts the integer part, stops at first non-numeric char:
parseInt("42px")    // 42
parseInt("3.9")     // 3   — integer only
parseInt("abc")     // NaN

// parseFloat — extracts decimal number:
parseFloat("3.14em")  // 3.14

// → String
String(42)          // "42"
String(true)        // "true"
String(null)        // "null"
String(undefined)   // "undefined"
(42).toString()     // "42" — method on numbers

// → Boolean
Boolean(1)          // true
Boolean(0)          // false
Boolean("hello")    // true
Boolean("")         // false
Boolean(null)       // false
Boolean(undefined)  // false

The unary + operator — quick string to number

Putting + before a value converts it to a number — a common shorthand:

+"42"         // 42
+"3.14"       // 3.14
+true         // 1
+false        // 0
+null         // 0
+""           // 0
+"abc"        // NaN

Try It Yourself

// IMPLICIT coercion — JavaScript converts without being asked
// The + operator: if either side is a string, it concatenates
console.log("1" + 1);    // "11"  — number 1 became string "1"
console.log(1 + "1");    // "11"  — same
console.log(1 + 2 + "3"); // "33" — 1+2=3 first, then "3"+"3"="33"
console.log("3" + 1 + 2); // "312" — "3"+"1"="31", then "31"+"2"="312"

// Other operators convert strings to numbers:
console.log("5" - 1);    // 4   — subtraction converts "5" to 5
console.log("5" * 2);    // 10  — multiplication converts
console.log("5" / 2);    // 2.5 — division converts
console.log("abc" - 1);  // NaN — "abc" can't become a number

// EXPLICIT coercion — you control it
console.log(Number("42"));      // 42
console.log(Number(""));        // 0
console.log(Number("abc"));     // NaN
console.log(Number(true));      // 1
console.log(Number(false));     // 0
console.log(Number(null));      // 0
console.log(Number(undefined)); // NaN

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

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

ToPrimitive, object coercion, and the Symbol.toPrimitive hook

How objects get converted to primitives

When an object is used where a primitive is expected, JavaScript calls ToPrimitive with a hint ("number", "string", or "default"):

If the object has Symbol.toPrimitive, call it
Otherwise, for "number" hint: try valueOf(), then toString()
For "string" hint: try toString(), then valueOf()

// Plain objects:
{} + ""        // "[object Object]" — toString() called
{} + 1         // "[object Object]1"
[] + []        // "" — [].toString() = ""
[] + {}        // "[object Object]"
{} + []        // 0 in some contexts (parsed as empty block + unary +[])

Custom coercion with Symbol.toPrimitive

class Temperature {
  constructor(celsius) { this.celsius = celsius; }

  [Symbol.toPrimitive](hint) {
    if (hint === "number") return this.celsius;
    if (hint === "string") return `${this.celsius}°C`;
    return this.celsius;  // "default"
  }
}

const temp = new Temperature(22);
console.log(`Current temp: ${temp}`);   // "Current temp: 22°C"  (string hint)
console.log(temp + 10);                  // 32  (default→number hint)
console.log(temp > 20);                  // true (number hint)

The addition algorithm (full)

// + calls ToPrimitive("default") on both sides, then:
// if either result is a string → string concatenation
// otherwise → numeric addition

// This explains:
"" + null       // "null" — null → "null" (string concat)
"" + undefined  // "undefined"
"" + []         // "" — [].toString() = ""
"" + {}         // "[object Object]"
1 + null        // 1  — null → 0 (no string involved)
1 + undefined   // NaN — undefined → NaN

The ToNumber, ToString, ToBoolean abstract operations

ToNumber (ECMA-262 §7.1.4)

Complete conversion table:

Input type	Result
Undefined	NaN
Null	+0
Boolean true	1
Boolean false	+0
Number	unchanged
String	Parse as numeric literal (trim whitespace; "" → +0; non-numeric → NaN)
Symbol	TypeError
BigInt	TypeError (use Number(bigint) which is defined separately)
Object	ToPrimitive(hint "number"), then ToNumber on result

ToString (§7.1.17)

Input	Result
Undefined	"undefined"
Null	"null"
Boolean true/false	"true"/"false"
Number	Numeric string (special: NaN→"NaN", Infinity→"Infinity", -0→"0")
String	unchanged
Symbol	TypeError
Object	ToPrimitive(hint "string"), then ToString on result

ToBoolean (§7.1.2)

Purely lookup-based — no coercion of other types, just a direct table: undefined→false, null→false, +0/−0/NaN→false, ""→false, everything else→true. Note: objects (including [], {}) always return true regardless of content.

Why this matters for performance

V8 and other engines use type feedback to optimise hot functions. If a function always receives numbers but occasionally receives a string that coerces to a number, TurboFan may deoptimise the function back to the interpreter for that call, then re-optimise. Avoiding implicit coercion in hot paths keeps functions in their optimised monomorphic state.

Official Sources

The Codex links only to official documentation and the ECMAScript specification. No third-party tutorials.