JavaScript Type Conversion and Coercion - Complete Guide

JavaScript is a dynamically typed language that performs automatic type conversion, known as coercion. Understanding how JavaScript converts between types is crucial for avoiding bugs and writing predictable code. This guide covers both implicit and explicit type conversion.

Understanding JavaScript Types

JavaScript has seven primitive types and one object type:

// Primitive types
const num = 42; // number
const str = 'Hello'; // string
const bool = true; // boolean
const undef = undefined; // undefined
const nul = null; // null (typeof shows 'object')
const sym = Symbol('id'); // symbol
const bigInt = 10n; // bigint

// Object type
const obj = { name: 'John' }; // object
const arr = [1, 2, 3]; // object (array)
const func = () => {}; // function (special object)

// Checking types
console.log(typeof num); // 'number'
console.log(typeof str); // 'string'
console.log(typeof bool); // 'boolean'
console.log(typeof undef); // 'undefined'
console.log(typeof nul); // 'object' (historical bug)
console.log(typeof sym); // 'symbol'
console.log(typeof bigInt); // 'bigint'
console.log(typeof obj); // 'object'
console.log(typeof arr); // 'object'
console.log(typeof func); // 'function'

Explicit Type Conversion

Explicit conversion (type casting) is when you intentionally convert a value from one type to another.

Converting to String

// String() function
console.log(String(123)); // '123'
console.log(String(true)); // 'true'
console.log(String(false)); // 'false'
console.log(String(null)); // 'null'
console.log(String(undefined)); // 'undefined'
console.log(String([1, 2, 3])); // '1,2,3'
console.log(String({ a: 1 })); // '[object Object]'

// toString() method
console.log((123).toString()); // '123'
console.log(true.toString()); // 'true'
console.log([1, 2, 3].toString()); // '1,2,3'

// With radix for numbers
console.log((15).toString(2)); // '1111' (binary)
console.log((15).toString(16)); // 'f' (hexadecimal)

// Template literals
const num = 42;
console.log(`${num}`); // '42'

// String concatenation
console.log('' + 123); // '123'
console.log('' + true); // 'true'

Converting to Number

// Number() function
console.log(Number('123')); // 123
console.log(Number('123.45')); // 123.45
console.log(Number('')); // 0
console.log(Number(' ')); // 0
console.log(Number('123abc')); // NaN
console.log(Number(true)); // 1
console.log(Number(false)); // 0
console.log(Number(null)); // 0
console.log(Number(undefined)); // NaN
console.log(Number([1])); // 1
console.log(Number([1, 2])); // NaN
console.log(Number({})); // NaN

// parseInt() and parseFloat()
console.log(parseInt('123')); // 123
console.log(parseInt('123.45')); // 123
console.log(parseInt('123abc')); // 123
console.log(parseInt('abc123')); // NaN
console.log(parseInt('0xFF')); // 255 (hexadecimal)
console.log(parseInt('10', 2)); // 2 (binary)
console.log(parseInt('10', 8)); // 8 (octal)

console.log(parseFloat('123.45')); // 123.45
console.log(parseFloat('123.45.67')); // 123.45
console.log(parseFloat('123.45abc')); // 123.45

// Unary plus operator
console.log(+'123'); // 123
console.log(+'123.45'); // 123.45
console.log(+''); // 0
console.log(+true); // 1
console.log(+false); // 0
console.log(+null); // 0
console.log(+undefined); // NaN

// Arithmetic operations
console.log('123' * 1); // 123
console.log('123' - 0); // 123
console.log('123' / 1); // 123

Converting to Boolean

// Boolean() function
console.log(Boolean(1)); // true
console.log(Boolean(0)); // false
console.log(Boolean('hello')); // true
console.log(Boolean('')); // false
console.log(Boolean(' ')); // true (non-empty string)
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
console.log(Boolean({})); // true
console.log(Boolean([])); // true
console.log(Boolean([0])); // true
console.log(Boolean(NaN)); // false

// Double NOT operator (!!)
console.log(!!1); // true
console.log(!!0); // false
console.log(!!'hello'); // true
console.log(!!''); // false
console.log(!!null); // false
console.log(!!{}); // true

// Falsy values in JavaScript
console.log(Boolean(false)); // false
console.log(Boolean(0)); // false
console.log(Boolean(-0)); // false
console.log(Boolean(0n)); // false
console.log(Boolean('')); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
console.log(Boolean(NaN)); // false

// Everything else is truthy
console.log(Boolean('0')); // true (string)
console.log(Boolean('false')); // true (string)
console.log(Boolean([])); // true (empty array)
console.log(Boolean({})); // true (empty object)
console.log(Boolean(() => {})); // true (function)

Implicit Type Conversion (Coercion)

JavaScript automatically converts types in certain contexts.

String Coercion

// + operator with strings
console.log('Hello ' + 123); // 'Hello 123'
console.log('5' + 3); // '53'
console.log(3 + '5'); // '35'
console.log('5' + true); // '5true'
console.log('Hello ' + null); // 'Hello null'
console.log('Result: ' + {}); // 'Result: [object Object]'

// Template literals
const age = 25;
console.log(`Age: ${age}`); // 'Age: 25' (number to string)

// alert, console.log (usually)
// alert(123);                     // Shows '123'
console.log([1, 2, 3]); // Often shows as string representation

Number Coercion

// Arithmetic operators (except +)
console.log('5' - 2); // 3
console.log('5' * '2'); // 10
console.log('10' / '2'); // 5
console.log('5' % 2); // 1

// Comparison operators
console.log('5' > 3); // true
console.log('10' >= 10); // true
console.log('2' < '12'); // false (string comparison!)
console.log('2' < 12); // true (number comparison)

// Unary operators
console.log(+'123'); // 123
console.log(-'456'); // -456
console.log(+true); // 1
console.log(-false); // -0

// Bitwise operators
console.log('5' & '3'); // 1
console.log('5' | 3); // 7
console.log(~'2'); // -3

Boolean Coercion

// Logical contexts
if ('hello') {
  console.log('Truthy!'); // This runs
}

const value = 'test' && 'result'; // 'result'
const backup = null || 'default'; // 'default'

// Logical NOT
console.log(!'hello'); // false
console.log(!''); // true
console.log(!0); // true
console.log(!1); // false

// Ternary operator
const message = 0 ? 'yes' : 'no'; // 'no'

Equality and Type Coercion

Loose Equality (==) vs Strict Equality (===)

// Loose equality performs type coercion
console.log(5 == '5'); // true
console.log(0 == false); // true
console.log(null == undefined); // true
console.log('' == false); // true
console.log([] == false); // true
console.log([1] == true); // true

// Strict equality does not coerce
console.log(5 === '5'); // false
console.log(0 === false); // false
console.log(null === undefined); // false
console.log('' === false); // false
console.log([] === false); // false
console.log([1] === true); // false

// Special cases
console.log(NaN == NaN); // false
console.log(NaN === NaN); // false
console.log(Object.is(NaN, NaN)); // true

console.log(0 == -0); // true
console.log(0 === -0); // true
console.log(Object.is(0, -0)); // false

Coercion Rules Table

// Common coercion results
console.log(Number('')); // 0
console.log(Number(' ')); // 0
console.log(Number('\t\n')); // 0
console.log(Number('123')); // 123
console.log(Number('123abc')); // NaN
console.log(Number(true)); // 1
console.log(Number(false)); // 0
console.log(Number(null)); // 0
console.log(Number(undefined)); // NaN
console.log(Number([])); // 0
console.log(Number([1])); // 1
console.log(Number([1, 2])); // NaN
console.log(Number({})); // NaN

// String coercion
console.log(String(123)); // '123'
console.log(String(true)); // 'true'
console.log(String(false)); // 'false'
console.log(String(null)); // 'null'
console.log(String(undefined)); // 'undefined'
console.log(String([1, 2, 3])); // '1,2,3'
console.log(String({})); // '[object Object]'

Object to Primitive Conversion

Objects convert to primitives using special methods.

ToPrimitive Algorithm

// Objects can define conversion behavior
const user = {
  name: 'John',
  age: 30,

  // For string conversion
  toString() {
    return `User: ${this.name}`;
  },

  // For number conversion
  valueOf() {
    return this.age;
  },
};

console.log(String(user)); // 'User: John'
console.log(Number(user)); // 30
console.log(user + 10); // 40 (valueOf is called)
console.log(`${user}`); // 'User: John' (toString is called)

// Symbol.toPrimitive
const box = {
  value: 42,

  [Symbol.toPrimitive](hint) {
    console.log(`Hint: ${hint}`);
    switch (hint) {
      case 'number':
        return this.value;
      case 'string':
        return `Box(${this.value})`;
      default:
        return this.value;
    }
  },
};

console.log(+box); // Hint: number, 42
console.log(`${box}`); // Hint: string, 'Box(42)'
console.log(box + 10); // Hint: default, 52

Date Object Conversion

const date = new Date('2024-01-01');

// String conversion
console.log(String(date)); // 'Mon Jan 01 2024 00:00:00 GMT+0000 (UTC)'
console.log(date.toString()); // Same as above

// Number conversion (milliseconds since epoch)
console.log(Number(date)); // 1704067200000
console.log(+date); // 1704067200000
console.log(date.valueOf()); // 1704067200000

// Comparison
const date1 = new Date('2024-01-01');
const date2 = new Date('2024-01-02');
console.log(date1 < date2); // true (converts to numbers)
console.log(date1 - date2); // -86400000 (milliseconds)

Common Pitfalls and Edge Cases

Array Conversion Surprises

console.log([] + []); // '' (empty string)
console.log([] + {}); // '[object Object]'
console.log({} + []); // '[object Object]' or 0 (depends on context)
console.log({} + {}); // '[object Object][object Object]' or NaN

console.log([1] + [2]); // '12' (string concatenation)
console.log([1] - [2]); // -1 (numeric subtraction)

// Array to number
console.log(Number([])); // 0
console.log(Number([1])); // 1
console.log(Number([1, 2])); // NaN
console.log(Number([''])); // 0
console.log(Number(['123'])); // 123

Unexpected Comparisons

console.log(null >= 0); // true (null converts to 0)
console.log(null == 0); // false (special rule)
console.log(null > 0); // false

console.log(undefined >= 0); // false (undefined converts to NaN)
console.log(undefined == 0); // false
console.log(undefined == null); // true (special rule)

console.log(NaN == NaN); // false
console.log(NaN >= NaN); // false
console.log(NaN <= NaN); // false

console.log('' == 0); // true
console.log(' ' == 0); // true
console.log('\t\n' == 0); // true

The + Operator Special Cases

// String concatenation takes precedence
console.log(1 + '2'); // '12'
console.log('1' + 2); // '12'
console.log(1 + 2 + '3'); // '33' (left to right)
console.log('1' + 2 + 3); // '123'

// With objects
console.log(1 + {}); // '1[object Object]'
console.log({} + 1); // '[object Object]1' or 1
console.log([] + 1); // '1'
console.log([1] + 1); // '11'
console.log([1, 2] + 1); // '1,21'

// Unary + has higher precedence
console.log(+'1' + 2); // 3
console.log(1 + +'2'); // 3

Best Practices

1. Use Explicit Conversion

// Bad - relies on implicit conversion
const userInput = '123';
const result = userInput + 10; // '12310' (probably not intended)

// Good - explicit conversion
const userInput = '123';
const result = Number(userInput) + 10; // 133

// Or use parseInt/parseFloat for user input
const result = parseInt(userInput, 10) + 10;

2. Use Strict Equality

// Bad - uses type coercion
if (value == true) {
  // This matches 1, '1', [1], and other truthy values
}

// Good - explicit comparison
if (value === true) {
  // Only matches boolean true
}

// Or convert explicitly
if (Boolean(value) === true) {
  // Clear intention
}

3. Be Careful with Falsy Values

// Bad - might not work as expected
function getLength(arr) {
  if (!arr.length) {
    return 'Empty array';
  }
  return arr.length;
}

getLength([]); // 'Empty array'
getLength([0]); // 'Empty array' (length is 1, but !1 is false)

// Good - explicit check
function getLength(arr) {
  if (arr.length === 0) {
    return 'Empty array';
  }
  return arr.length;
}

4. Guard Against NaN

// Bad - NaN propagates
const num = Number(userInput);
const result = num * 2; // NaN if conversion failed

// Good - check for NaN
const num = Number(userInput);
if (isNaN(num)) {
  console.error('Invalid number');
} else {
  const result = num * 2;
}

// Or use default value
const num = Number(userInput) || 0;

5. Use Modern Operators

// Use nullish coalescing for null/undefined
const value = input ?? 'default'; // Only replaces null/undefined

// Instead of
const value = input || 'default'; // Replaces all falsy values

// Use optional chaining
const name = user?.name ?? 'Anonymous';

// Instead of
const name = (user && user.name) || 'Anonymous';

Type Checking Utilities

// Custom type checking functions
function isString(value) {
  return typeof value === 'string';
}

function isNumber(value) {
  return typeof value === 'number' && !isNaN(value);
}

function isArray(value) {
  return Array.isArray(value);
}

function isObject(value) {
  return value !== null && typeof value === 'object' && !Array.isArray(value);
}

function isFunction(value) {
  return typeof value === 'function';
}

function isPrimitive(value) {
  return value !== Object(value);
}

// Safe conversion functions
function toNumber(value, defaultValue = 0) {
  const num = Number(value);
  return isNaN(num) ? defaultValue : num;
}

function toString(value) {
  if (value === null || value === undefined) {
    return '';
  }
  return String(value);
}

function toBoolean(value) {
  return Boolean(value);
}

Conclusion

Type conversion is a fundamental aspect of JavaScript that can be both powerful and problematic. While implicit coercion can make code more concise, it can also lead to subtle bugs. Understanding how JavaScript converts between types, knowing the coercion rules, and using explicit conversion when appropriate will help you write more predictable and maintainable code. Always favor clarity over brevity when dealing with type conversions.

JavaScript Type Conversion: Implicit and Explicit Coercion