JavaScript Type Coercion

Understand how JavaScript converts types automatically and avoid common equality and comparison bugs.

TL;DR

  1. 01Compare values with strict === to prevent implicit coercion.
  2. 02Identify truthy and falsy variables inside conditional blocks.
  3. 03Convert data types explicitly using Number, String, or Boolean.

Tips

  1. 01Always use strict comparison operators to prevent JavaScript from silently converting types behind your back.
  2. 02Convert numeric values explicitly using the standard Number() constructor to ensure clean mathematical operations.

Warnings

  1. 01Remember that empty arrays and objects evaluate as truthy values inside conditional expressions.
  2. 02Adding numbers and strings triggers implicit string concatenation instead of expected arithmetic addition.

Loose vs Strict Equality

    Strict equality

    Compares values and types directly with zero implicit conversion.

    console.log(1 === 1);   // true
    console.log(1 === "1"); // false
    Loose equality

    Converts operand types automatically before comparing values.

    console.log(1 == "1");  // true
    console.log(0 == false); // true
    Nullish checks

    Uses loose equality to check for both null and undefined variables at once.

    function isMissing(v) {
      return v == null;
    }
    NaN comparison

    Uses Number.isNaN because NaN never equals itself under comparison.

    console.log(NaN === NaN); // false
    console.log(Number.isNaN(NaN)); // true

Truthy and Falsy Values

    Falsy list

    Lists all eight falsy values which evaluate to false in boolean contexts.

    const falsy = [
      false, 0, -0, 0n, "", null, undefined, NaN
    ];
    Empty collections

    Verifies that empty arrays and objects evaluate as truthy.

    if ([]) console.log("runs"); // true
    if ({}) console.log("runs"); // true
    Length verification

    Checks array lengths explicitly rather than relying on list truthiness.

    const list = [];
    if (list.length === 0) {
      console.log("empty");
    }
    Double negation

    Coerces values into strict booleans using two logical NOT operators.

    console.log(!!"text"); // true
    console.log(!!0);      // false

Implicit Conversion

    String concatenation

    Converts numbers to strings when executing addition with string operands.

    console.log(1 + "1"); // "11"
    console.log("a" + 1); // "a1"
    Numeric coercion

    Coerces string values to numbers when using subtraction or division operators.

    console.log("5" - 2); // 3
    console.log("5" * "2"); // 10
    Relational operators

    Converts strings to numbers during numeric comparison evaluation checks.

    console.log("10" > 5); // true
    Template interpolation

    Coerces embedded variables to strings inside template literal strings.

    const age = 30;
    console.log(`Age: ${age}`); // "Age: 30"

Explicit Conversion

    Boolean()

    Converts any variable type into a true or false boolean value.

    Boolean("");  // false
    Boolean("0"); // true (non-empty)
    Number()

    Parses strings or values into numbers, returning NaN on invalid characters.

    Number("42");  // 42
    Number("abc"); // NaN
    String()

    Converts numbers, null, or undefined values into matching literal strings.

    String(42);   // "42"
    String(null); // "null"
    parseInt()

    Parses numbers from strings with trailing non-numeric characters.

    parseInt("42px", 10); // 42
    Number("42px");       // NaN

In Practice

FAQ