Type Conversion in JavaScript

Introduction

JavaScript often converts types automatically (coercion) in expressions and conditions. Sometimes you convert explicitly for clarity and safety. This chapter explains common coercion rules, explicit conversion functions, and habits that prevent NaN and string-concatenation bugs.

Prerequisites

Implicit Coercion (Automatic)

javascript
// String + number => string concatenation
console.log("5" + 2);
 
// String - number => numeric subtraction
console.log("5" - 2);
 
// Boolean in arithmetic coerces to 0/1
console.log(true + 1);

Warning

+ favors string concatenation if either operand is a string. Use explicit Number() when you mean math.

Explicit Number Conversion

javascript
// Number(), parseInt, parseFloat
console.log(Number("42"));
console.log(Number(""));
console.log(Number("  3.5  "));
console.log(parseInt("42px", 10));
console.log(parseFloat("3.14em"));
FunctionUse when
Number(x)General conversion; strict
parseInt(x, 10)Parse integer prefix from string
parseFloat(x)Parse decimal prefix from string

Explicit String Conversion

javascript
// String() and toString
const count = 99;
console.log(String(count));
console.log(count.toString());
console.log((1000).toString(16));

Template literals also coerce:

javascript
const id = 7;
console.log(`user-${id}`);

Explicit Boolean Conversion

javascript
// Boolean() and !!
const items = [];
console.log(Boolean(items.length));
console.log(!!items.length);

Coercion in Comparisons

== coerces types; === does not:

javascript
// Loose vs strict equality
console.log(0 == false);
console.log(0 === false);
console.log("" == 0);
console.log(null == undefined);

Prefer === unless you have a rare, documented reason for ==.

Safe Parsing User Input Pattern

javascript
// Validate numeric input from strings
const raw = "  18  ";
const age = Number(raw);
 
if (Number.isNaN(age)) {
  console.log("Invalid age");
} else {
  console.log(`Age is ${age}`);
}

Combining with Nullish Coalescing

javascript
// Convert then default
const rawPort = null;
const port = Number(rawPort ?? 3000);
console.log(port);

Mini Example: Checkout Total

javascript
// Coerce string prices from a form-like array
const lineItems = [
  { name: "Pen", price: "2.5" },
  { name: "Bag", price: "8" },
];
 
let total = 0;
 
for (const item of lineItems) {
  const price = Number(item.price);
  if (Number.isNaN(price)) {
    console.log(`Skip invalid price for ${item.name}`);
    continue;
  }
  total += price;
}
 
console.log(`Total: $${total.toFixed(2)}`);

FAQ

Why does "5" + 2 equal "52"?

+ with a string triggers string concatenation after converting the number to string.

When should I use parseInt without radix?

Always pass radix 10 for decimal unless you parse other bases intentionally.

Does !! create a boolean type?

Yes—it is a double negation converting any value to true or false.

What comes next?

Operators consolidates arithmetic, comparison, logic, precedence, ?., and ??.