JavaScript Type Conversion

On purpose versus by accident

Conversion is changing a value from one type to another. Explicit conversion is a function you call: Number("7"). Implicit conversion is the engine doing it for an operator: "5" + 1 becomes the string "51".

Prefer explicit conversion. Then a reader can see the type you wanted, and you avoid the surprises that + and == are famous for.

Number, String, Boolean

These three functions are the everyday conversions. They do not mutate the original — they return a new value.

console.log(Number("7"));
console.log(String(7));
console.log(Boolean(1));
console.log(Boolean(0));
console.log(Number(""));
console.log(Number("7px"));

Number("7") is 7. Number("") is 0.Number("7px") is NaN because the whole string is not a number.parseInt("7px", 10) would stop at the letters and return 7 — different tool, different job.

The + trap

+ adds numbers and concatenates strings. If either side is a string, the other side is turned into a string and joined. Minus, times, and divide always try to make numbers.

console.log("5" + 1);
console.log("5" - 1);
console.log("5" * 2);
console.log(1 + 2 + "3");
console.log("3" + 1 + 2);

"5" + 1 is "51". "5" - 1 is 4.1 + 2 + "3" is "33" because 1 + 2 runs first."3" + 1 + 2 is "312" because concatenation starts immediately. Convert before you add: Number(input) + 1.

What Boolean does

Boolean(value) is false for a short list and true for everything else. The falsy values are false, 0, -0,0n, "", null, undefined, andNaN.

console.log(Boolean(""));
console.log(Boolean("0"));
console.log(Boolean(0));
console.log(Boolean([]));
console.log(Boolean({}));

The string "0" is truthy. An empty array and an empty object are truthy. Only the empty string is the falsy string. An if (name) test therefore treats"" as missing and "0" as present.

Form values are strings

Anything you read from an input, a prompt, or localStorage is a string. Add those strings and you concatenate. Convert first when you mean arithmetic.

const raw = "12";
const asNumber = Number(raw);

console.log(raw + 3);
console.log(asNumber + 3);
console.log(asNumber === 12);

unary plus and String()

+value is a short Number(value). "" + value orString(value) makes a string. !!value is a shortBoolean(value). The function names are easier to read in a tutorial and in a first project.

What to remember

• Convert on purpose with Number, String, and Boolean.
• "5" + 1 concatenates. "5" - 1 subtracts.
• Input from the page is a string until you convert it.
• Number("7px") is NaN; parseInt is a different tool.

Next: scope — which names a line of code is allowed to see.