Codectionary / Developer documentation / JavaScript

Type Conversion

JavaScript converts values between types both explicitly (when you deliberately call a conversion function like Number() or String()) and implicitly (when the language automatically coerces types during operations, like using + with a string and a number). Understanding both is essential for avoiding subtle bugs.

Syntax

String(value), Number(value), Boolean(value)

Examples

Explicit Conversion

Deliberately converting between types.

console.log(String(42));      // "42"
console.log(String(true));    // "true"
console.log(Number("42"));    // 42
console.log(Number("abc"));   // NaN
console.log(Number(""));      // 0
console.log(Boolean(0));      // false
console.log(Boolean(""));     // false
console.log(Boolean("hello"));// true

Implicit Coercion Gotchas

Common surprises from automatic type conversion.

console.log("5" + 3);   // "53" - + triggers string concatenation
console.log("5" - 3);   // 2   - - forces numeric conversion
console.log("5" * "2"); // 10  - * forces numeric conversion
console.log(1 + true);  // 2   - true becomes 1
console.log([] + []);   // ""  - both arrays become empty strings
console.log([] + {});   // "[object Object]" - surprising but consistent with the rules

Falsy Values

The specific set of values that convert to false in a boolean context.

// The complete list of falsy values in JavaScript:
Boolean(false);      // false
Boolean(0);          // false
Boolean("");         // false
Boolean(null);       // false
Boolean(undefined);  // false
Boolean(NaN);        // false
// Everything else, including "0", "false", [], and {}, is truthy

Best practices

  • Use explicit conversion (Number(), String(), Boolean()) rather than relying on implicit coercion, for clearer and more predictable code
  • Memorize the falsy values list - it explains most "why is this if statement not working" bugs
  • Be especially cautious with + since it behaves completely differently depending on whether either operand is a string
  • Use === instead of == to sidestep most implicit coercion surprises during comparisons entirely

At a glance

Purpose
Application logic and interaction
File extension
.js ยท .mjs
Runs in
Browsers and JavaScript runtimes
Usually used with
HTML, CSS and Web APIs

Specifications & further reading

Related JavaScript documentation