Type Conversions — JavaScript Codex

JavaScript is loose about types. You hand a string to something that expects a number, and instead of complaining, the language quietly converts it and moves on. Most of the time this happens behind your back and it just works.

alert turns whatever you give it into text so it can be displayed. A math operation like * pulls its operands toward numbers. You almost never think about it.

But “almost never” isn’t “never.” Sometimes you need to force a conversion yourself, and sometimes the automatic ones surprise you — a string that reads as NaN, an empty array that counts as true. Knowing the exact rules is what separates “why is my total "51" instead of 6?” from code that behaves.

There are three conversions you meet constantly: to string, to number, and to boolean. Here’s the shape of the whole chapter at a glance.

→ String

fires on: output

alert(x)

String(x)

→ Number

fires on: math

“8” / “2”

Number(x)

→ Boolean

fires on: conditions

if (x)

Boolean(x)

The three conversions, when each fires, and the function that triggers it explicitly.

String Conversion

Whenever a value needs to appear as text, it gets converted to a string. alert(value) is the obvious case: it can only display text, so it converts first.

You can also do it on purpose with String(value):

let value = true;
alert(typeof value); // boolean

value = String(value); // now value is the string "true"
alert(typeof value); // string

The result is almost always what you’d guess. false becomes "false", null becomes "null", the number 3 becomes "3". There are no traps here for primitives — the string form is just the value written out.

true→“true”

null→“null”

undefined→“undefined”

3→“3”

String conversion writes each value out as its literal text.

Numeric Conversion

Math forces numbers. Division, subtraction, multiplication — apply any of them to something that isn’t a number and JavaScript converts first, then computes:

alert( "8" / "2" ); // 4, both strings become numbers

To convert deliberately, call Number(value):

let str = "250";
alert(typeof str); // string

let num = Number(str); // becomes the number 250

alert(typeof num); // number

The usual reason you’d reach for Number() explicitly: you pulled a value out of something that hands you text — a form field, a URL parameter, a config file — and you need arithmetic on it. The value looks like 456 but its type is string, and string + string doesn’t add.

This is exactly the “why is my total "51" instead of 6?” trap from the start of the chapter. Both boxes below hold text — the kind a form field hands you. Add them with + alone and the strings glue together; wrap each in Number() first and you get real arithmetic. Edit the values and re-run to feel the difference.

interactiveAdding two form fields

Live example — Adding two form fields

HTML

<label>First: <input id="a" value="5"></label>
<label>Second: <input id="b" value="1"></label>
<button id="go">Add them</button>
<div id="out"></div>

CSS

label{display:block;margin-bottom:8px}
input{width:70px;padding:4px 6px;font-size:14px}
button{padding:6px 12px;font-size:14px;cursor:pointer;margin:4px 0}
#out{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.row{font-family:ui-monospace,monospace;font-size:13px}
.bad{color:#b91c1c}
.good{color:#166534}

JavaScript

const out = document.getElementById('out');
document.getElementById('go').addEventListener('click', () => {
// Values from inputs are ALWAYS strings.
const a = document.getElementById('a').value;
const b = document.getElementById('b').value;

const glued = a + b;                 // string + string → concatenation
const summed = Number(a) + Number(b); // numbers → real addition

out.innerHTML =
  '<div class="row bad">a + b  = "' + glued + '"  (typeof ' + typeof glued + ')</div>' +
  '<div class="row good">Number(a) + Number(b) = ' + summed + '  (typeof ' + typeof summed + ')</div>';
});

When the text isn’t a valid number, you don’t get an error. You get NaN, a special “Not a Number” value:

let temperature = Number("warm, maybe a little breezy");

alert(temperature); // NaN, conversion failed

The conversion rules

Each type has a fixed rule for becoming a number:

Value	Becomes…
`undefined`	`NaN`
`null`	`0`
`true and false`	`1` and `0`
`string`	Whitespace at both ends (spaces, tabs `\t`, newlines `\n`) is stripped. If nothing’s left, the result is `0`. Otherwise the number is read from the string; anything unreadable gives `NaN`.

alert( Number("   42   ") ); // 42  (surrounding spaces ignored)
alert( Number("42px") );     // NaN  (can't read a number past "p")
alert( Number(true) );        // 1
alert( Number(false) );       // 0

The one pair worth memorizing: null and undefined split here. null becomes 0, but undefined becomes NaN. They behave alike in a lot of places, so this difference catches people.

null → 0

treated as “empty” number

undefined → NaN

treated as “no value at all”

null and undefined diverge under numeric conversion — the most common gotcha.

Most math operators run this same conversion automatically, which is the subject of the next chapter.

Try it yourself — type a value and watch how each function converts it:

Try it — type conversion

value =string

String("0")

↓

"0"

String() wraps the value in quotes-worth of text — almost anything converts cleanly.

Number("0")

↓

Number() reads a numeric value. Empty/whitespace → 0, non-numeric text → NaN, true → 1, null → 0, undefined → NaN.

Boolean("0")

↓

true

Boolean() asks "is this truthy?" Only 0, "", null, undefined, NaN and false are falsy — everything else is true.

Boolean Conversion

This one has the fewest rules. It happens automatically inside conditions — if (...), while (...), logical operators — and you can force it with Boolean(value).

The rule, in full:

Values that feel “empty” become false: 0, an empty string "", null, undefined, and NaN.
Everything else becomes true.

alert( Boolean(1) ); // true
alert( Boolean(0) ); // false

alert( Boolean("sky") ); // true
alert( Boolean("") ); // false

The five values that convert to false are worth committing to memory. They’re called falsy values, and there’s a short, closed list of them — anything not on it is truthy.

falsy → false

false0“”nullundefinedNaN

a short, fixed list

truthy → true

“0”“ ““false”42-1“anything”

literally everything else

The complete set of falsy values. Everything outside this box is truthy.

The string "0" is true

Coming from PHP, this trips people up: in some languages "0" counts as false. Not in JavaScript. Boolean conversion for strings only cares whether the string is empty — its contents are irrelevant. A string holding "0", or one holding a single space, is non-empty, so it’s truthy.

alert( Boolean("0") ); // true
alert( Boolean(" ") ); // true — spaces make it non-empty

If you actually want to test whether a string represents zero, compare it: str === "0", or convert to a number first.

Here’s the falsy list in action. Each chip below is a value passed straight into an if — the ones that survive are truthy, the ones that drop out are falsy. Notice that "0", " ", and "false" all stay: they’re non-empty strings, so they’re truthy no matter what they spell.

interactiveWhich values survive an if?

Live example — Which values survive an if?

HTML

<div id="grid"></div>
<p id="tally"></p>

CSS

#grid{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-family:ui-monospace,monospace;font-size:13px;padding:6px 10px;border-radius:6px;border:1px solid #d4d4d4}
.truthy{background:#dcfce7;color:#166534;border-color:#86efac}
.falsy{background:#fee2e2;color:#b91c1c;border-color:#fca5a5;text-decoration:line-through}
#tally{font-size:13px;color:#525252}

JavaScript

// A mix of primitives — edit this list and re-run.
const values = [0, 1, -1, "", " ", "0", "false", null, undefined, NaN, "hi"];

const grid = document.getElementById('grid');
let kept = 0;

values.forEach((v) => {
const passes = Boolean(v); // same test an if(...) performs
if (passes) kept++;
const chip = document.createElement('span');
chip.className = 'chip ' + (passes ? 'truthy' : 'falsy');
// Show strings with quotes so "" and " " are visible.
const label = typeof v === 'string' ? JSON.stringify(v) : String(v);
chip.textContent = label;
grid.appendChild(chip);
});

document.getElementById('tally').textContent =
kept + ' of ' + values.length + ' values are truthy';

Summary

The three conversions you’ll lean on daily are to string, to number, and to boolean.

String — happens whenever a value gets output; force it with String(value). For primitives the result is just the value written as text, with no surprises.

Number — happens in math; force it with Number(value). It follows these rules:

Value	Becomes…
`undefined`	`NaN`
`null`	`0`
`true / false`	`1 / 0`
`string`	Read as written, with surrounding whitespace (spaces, `\t`, `\n`) ignored. An empty string is `0`. Anything unreadable is `NaN`.

Boolean — happens in logical contexts; force it with Boolean(value). Its rule:

Value	Becomes…
`0`, `null`, `undefined`, `NaN`, `""`	`false`
any other value	`true`

Most of this is intuitive. The two spots where people slip:

undefined is NaN as a number — not 0. (Only null gives 0.)
"0" and whitespace-only strings like " " are truthy. Any non-empty string is.

Objects don’t follow these primitive rules; they convert through their own mechanism, which we cover once you know what objects are, in Object to primitive conversion.