🔄 Type Coercion and Conversion

Two Kinds of Conversion

Changing a value's type happens in two ways:

• Explicit conversion (type casting) — you deliberately convert with a function like Number() or String().
• Implicit coercion — JavaScript converts automatically during an operation, sometimes with surprising results.

💡 A useful analogy: Explicit conversion is like hiring a professional translator — you request the translation and control it. Implicit coercion is like a local who switches to English the moment they sense you're struggling: convenient, but the meaning can drift in ways you didn't intend.

Understanding both is essential: the explicit tools are how you write robust code, and knowing the implicit rules is how you read code others wrote — and debug the strange output it sometimes produces.

Explicit Conversion

These are the conversions you control. Prefer them whenever a value's type matters — for example, right after reading form input, which always arrives as strings.

To string

console.log(String(42));        // "42"
console.log(String(true));      // "true"
console.log(String(null));      // "null"
console.log(String([1, 2, 3])); // "1,2,3"
console.log((255).toString(16));// "ff"  (hexadecimal via radix)
console.log(`${42}`);           // "42"  (template literal)

To number

console.log(Number('42'));      // 42
console.log(Number('42.5'));    // 42.5
console.log(Number(''));        // 0     (empty string → 0)
console.log(Number('42px'));    // NaN   (Number() is all-or-nothing)
console.log(Number(true));      // 1
console.log(Number(null));      // 0
console.log(Number(undefined)); // NaN

// parseInt / parseFloat read as far as they can, then stop
console.log(parseInt('42px', 10)); // 42   (always pass the radix!)
console.log(parseFloat('3.14em')); // 3.14
console.log(+'42');                // 42   (unary plus — a terse Number())

To boolean

console.log(Boolean(42));    // true
console.log(Boolean(0));     // false
console.log(Boolean('hi'));  // true
console.log(Boolean(''));    // false
console.log(!!'hi');         // true  (double-NOT — a terse Boolean())

Implicit Coercion

Implicit coercion happens automatically when operators meet mismatched types. The single most important rule to internalise concerns the + operator.

// + prefers strings
console.log('5' + 3);   // "53"   (3 → "3", then concatenate)
console.log(5 + '3');   // "53"
console.log('5' + true);// "5true"

// Every other operator prefers numbers
console.log('5' - 3);   // 2      ("5" → 5)
console.log('5' * 2);   // 10
console.log('10' / '2');// 5      (both strings → numbers)
console.log('5' - '2'); // 3

This asymmetry is the source of the classic beginner surprise: adding what looks like two numbers gives a glued-together string because one of them was secretly text.

Coercion in conditions

Anywhere a boolean is expected — if, while, ? :, &&, || — the value is coerced using the truthy/falsy rules.

if ('hello') console.log('non-empty strings are truthy'); // runs
if (0) { /* skipped — 0 is falsy */ }

const name = userInput || 'Guest';   // fall back if userInput is falsy
const timeout = config.wait ?? 3000; // fall back ONLY on null/undefined

== vs ===

JavaScript has two equality operators, and the difference is all about coercion.

• == (loose equality) converts operands to a common type before comparing.
• === (strict equality) compares type and value with no conversion.

// Loose == coerces, producing surprising truths:
console.log(5 == '5');          // true  (string → number)
console.log(1 == true);         // true  (true → 1)
console.log(0 == false);        // true  (false → 0)
console.log(null == undefined); // true  (special-cased)
console.log('' == 0);           // true  ('' → 0)

// Strict === never coerces:
console.log(5 === '5');         // false (number vs string)
console.log(1 === true);        // false
console.log(null === undefined);// false

Famous Gotchas

A short tour of the coercion results that trip everyone up at least once. Knowing them turns "JavaScript is broken" into "ah, that's the rule."

⚠️ The if (count) trap: checking a value for existence with a bare truthiness test fails when 0 or '' is a valid value. if (count) skips a legitimate 0. Use if (count != null) or an explicit count !== undefined && count !== null instead.

const count = 0;
if (count) {
  console.log('has a count'); // ❌ never runs — 0 is falsy
}
if (count != null) {
  console.log('count is', count); // ✅ runs — "count is 0"
}

Best Practices

You cannot turn coercion off, but you can write code that never relies on its surprises.

// A robust conversion boundary for form input
function readAge(raw) {
  const age = Number(raw);          // explicit conversion
  if (Number.isNaN(age) || age < 0) {
    throw new Error('Age must be a non-negative number');
  }
  return age;
}

console.log(readAge('30')); // 30
// readAge('thirty');       // throws — caught early, not silently NaN later

Hands-on Exercise

function cartTotal(items) {
  let total = 0;
  for (let i = 0; i < items.length; i++) {
    total = total + items[i].price;   // BUG: string prices concatenate
  }
  if (total == 100) applyDiscount();   // BUG: loose equality
  return '$' + total;                  // BUG: no formatting / string glue
}

const cart = [
  { name: 'Shirt', price: '25' },  // price is a string!
  { name: 'Hat',   price: 15 },
  { name: 'Socks', price: 10 }
];
console.log(cartTotal(cart)); // "$0251510"  😱  (expected "$50.00")

function cartTotal(items) {
  let total = 0;
  for (const item of items) {
    const price = Number(item.price);      // explicit conversion
    if (Number.isNaN(price)) {
      console.warn(`Skipping invalid price for ${item.name}`);
      continue;
    }
    total += price;                        // real numeric addition
  }
  if (total === 100) applyDiscount();      // strict equality
  return '$' + total.toFixed(2);           // formatted currency
}

console.log(cartTotal(cart)); // "$50.00" ✅

Summary & Quiz

📚 Further Reading

• MDN — Type coercion
• MDN — Strict equality (===)
• MDN — Equality comparisons and sameness
• You Don't Know JS — Types & Grammar

🚀 What's Next?

With types and their conversions under control, you're ready to actually compute with them. Up next: the arithmetic and assignment operators — the tools that turn values into results.