Online Compiler logoOnline Compiler
Start Coding

JavaScript Tutorial

Type Conversion & Coercion

JavaScript often converts values between types automatically. Learn when coercion happens and how to control conversions explicitly. Type conversion is a fundamental aspect of JavaScript that can lead to both powerful features and subtle bugs if not understood properly.

Open CompilerRun First Example

Why this matters

Predictable conversions prevent bugs in comparisons, arithmetic, and API inputs. Prefer explicit conversion for clarity. Understanding coercion rules helps write more robust and maintainable code.

Implicit vs Explicit Conversion

Implicit conversion (coercion) happens in operations like `+`, `==`, and conditional checks. JavaScript automatically converts types to make operations work, following specific rules.

Explicit conversion uses helpers like `Number()`, `String()`, `Boolean()` or unary `+`. These provide clear intent and predictable results, making code more readable and less error-prone.

Coercion can be powerful but dangerous. It allows flexible code but can mask type errors. Modern JavaScript development often prefers explicit conversion for better type safety.

Understanding coercion rules is essential for debugging. Knowing when and how JavaScript converts types helps predict program behavior.

Common Gotchas

Empty strings, `null`, `undefined`, and arrays can produce surprising coerced results — test conversions in edge cases. These 'falsy' or 'truthy' values behave differently than expected.

String concatenation vs numeric addition: `+` operator behaves differently with strings vs numbers. One string operand forces string concatenation.

Loose equality (`==`) performs type coercion before comparison. This can lead to unexpected true results when strict equality (`===`) would return false.

Array and object coercion: Arrays become strings via `toString()`, objects may throw errors or return '[object Object]'.

To Number Conversion

Number() constructor: Explicit conversion, returns NaN for invalid inputs. More strict than parseInt/parseFloat.

parseInt() and parseFloat(): Parse strings, stop at first invalid character. Useful for partial strings like '42px'.

Unary plus (+): Quick number conversion, equivalent to Number(). Fast but less explicit.

Math operations: Automatic coercion in arithmetic. Division by zero returns Infinity, invalid operations return NaN.

BigInt conversion: Use BigInt() for large integers, but cannot mix with regular numbers in operations.

To String Conversion

String() constructor: Explicit conversion, works with any value including null and undefined.

Template literals: Automatic string conversion with interpolation. Modern preferred method.

toString() method: Available on most objects, customizable via Symbol.toPrimitive.

Concatenation: + operator with string forces string conversion of other operand.

JSON.stringify(): Converts objects to JSON strings, handles nested structures.

To Boolean Conversion

Boolean() constructor: Explicit conversion. Clear and readable.

Double negation (!!) : Quick boolean conversion, commonly used.

Falsy values: false, 0, -0, 0n, '', null, undefined, NaN. Everything else is truthy.

Truthy values: Non-empty strings, non-zero numbers, objects, arrays, functions.

Conditional contexts: if, while, ternary operator all perform boolean conversion.

Logical operators: && and || return actual values, not booleans, but use truthiness for evaluation.

Equality and Comparison

Strict equality (===): No type coercion, checks value and type. Preferred for most comparisons.

Loose equality (==): Performs type coercion before comparison. Complex rules can be surprising.

Abstract equality algorithm: Defines how == works. Involves ToPrimitive conversions and complex rules.

SameValueZero: Used by includes(), indexOf(). Similar to === but treats -0 and +0 as equal.

Object comparison: Always false for different objects, even with identical properties. Compare references.

Advanced Coercion Topics

Symbol.toPrimitive: Method objects can implement for custom conversion behavior.

valueOf() and toString(): Called during primitive conversion. Objects can customize how they convert.

Primitive wrapper objects: new String(), new Number(), new Boolean(). Behave differently than primitives.

Date coercion: Dates convert to strings or numbers (timestamps) depending on context.

Array coercion: Arrays convert to strings by joining elements, or to numbers via valueOf().

Performance Implications

Type coercion has performance costs. Explicit conversion can be faster in hot code paths.

V8 engine optimizes repeated coercions. Consistent types improve performance.

Avoid coercion in loops. Pre-convert values outside loops for better performance.

Memory implications: Wrapper objects consume more memory than primitives.

Garbage collection: Wrapper objects may create more GC pressure than primitives.

Best Practices

Prefer explicit conversion over implicit coercion for clarity and predictability.

Use strict equality (===) instead of loose equality (==) to avoid coercion surprises.

Handle edge cases explicitly: Check for null/undefined before conversion.

Use appropriate conversion methods: Number() for strict number conversion, parseInt() for partial strings.

Document expected types in function parameters and return values.

Use TypeScript for compile-time type checking to catch conversion errors early.

Test conversion edge cases thoroughly, especially with user input.

Consider using utility libraries like Lodash for complex type operations.

Code Examples

String Concatenation vs Addition

OpenRun
console.log('1' + 2); // '12'
console.log(1 + 2); // 3

`+` triggers string concatenation if either operand is a string.

Loose Equality Surprises

OpenRun
console.log(null == undefined); // true
console.log([] == false); // true

`==` performs complex coercion rules — prefer `===` for predictable equality.

Number Conversion Methods

OpenRun
console.log(Number('42')); // 42
console.log(Number('42px')); // NaN
console.log(parseInt('42px')); // 42
console.log(parseFloat('3.14px')); // 3.14
console.log(+'42'); // 42 (unary plus)

Different methods handle invalid characters differently.

Boolean Conversion Edge Cases

OpenRun
console.log(Boolean(0)); // false
console.log(Boolean('')); // false
console.log(Boolean('0')); // true
console.log(Boolean([])); // true
console.log(Boolean({})); // true
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false

Empty arrays and objects are truthy, empty strings are falsy.

Equality Comparison Differences

OpenRun
console.log(0 == false); // true (coercion)
console.log(0 === false); // false (strict)

console.log('' == false); // true (coercion)
console.log('' === false); // false (strict)

console.log(null == undefined); // true (special case)
console.log(null === undefined); // false (strict)

Loose equality performs type coercion; strict equality does not.

Array and Object Coercion

OpenRun
console.log(String([1, 2, 3])); // '1,2,3'
console.log(Number([1])); // 1
console.log(Number([1, 2])); // NaN

console.log(String({})); // '[object Object]'
console.log(Number({})); // NaN

console.log(Boolean([])); // true
console.log(Boolean({})); // true

Arrays and objects have specific coercion behaviors.

Custom Object Conversion

OpenRun
const obj = {
  value: 42,
  toString() {
    return 'custom string';
  },
  valueOf() {
    return 99;
  }
};

console.log(String(obj)); // 'custom string'
console.log(Number(obj)); // 99
console.log(obj + 1); // 100 (uses valueOf)

const date = new Date();
console.log(Number(date)); // timestamp
console.log(String(date)); // date string

Objects can customize their conversion behavior.

Primitive Wrapper Objects

OpenRun
const str = new String('hello');
console.log(typeof str); // 'object'
console.log(str === 'hello'); // false

const num = new Number(42);
console.log(typeof num); // 'object'
console.log(num === 42); // false

// But they work in operations
console.log(str + ' world'); // 'hello world'
console.log(num + 8); // 50

Wrapper objects behave like primitives in operations but are objects for typeof.

Common Mistakes and Fixes

Using `==` unintentionally

Use `===` to avoid coercion-based surprises.

Assuming empty string is falsey-safe

Explicitly convert values before arithmetic or API calls.

Relying on array-to-string coercion

Use explicit join() or toString() for clarity.

Confusing null and undefined coercion

Handle null/undefined explicitly before operations.

Using Number() for user input

Use parseInt/parseFloat for partial string parsing.

Assuming object coercion is predictable

Test object conversion behavior explicitly.

Frequently Asked Questions

Is coercion always bad?

Not always — it can be handy, but explicit conversions are clearer and safer in most codebases.

When should I use == vs ===

Almost always use ===. == performs confusing coercion that can hide bugs.

How to safely convert user input?

Validate input first, then use appropriate conversion: parseInt for integers, Number for strict numbers.

Why does [] == false return true?

Array coerces to empty string, empty string coerces to 0, 0 == false is true due to complex == rules.

How to prevent coercion bugs?

Use strict equality, explicit conversion, and TypeScript. Test edge cases thoroughly.

What's the difference between Number() and parseInt()?

Number() is strict (returns NaN for invalid), parseInt() is lenient (stops at first invalid character).

Can I customize object coercion?

Yes, implement toString() and valueOf() methods to control how objects convert to primitives.

Why avoid wrapper objects?

They create unnecessary objects, are slower, and can cause typeof confusion. Use primitives instead.

Related JavaScript Topics

Data TypesPrimitive Typestypeof Operator