Why "5" + 1 Is "51": Type Conversion in JavaScript

"5" + 1 gives "51" because + joins text before it adds numbers. If either side is a string, you get a string. That's not a JavaScript bug. It's a rule, and once you know it, you can stop the problem where it actually starts: values that come into your code as text.

Why + is different

Most math operators only make sense for numbers, so JavaScript converts strings to numbers for them. + has two jobs (add and join), and joining wins when there's a string:

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

51
4
10
33
123

The last two show that JavaScript goes left to right. 1 + 2 is 3, then 3 + "3" is "33". But "1" + 2 is already "12", so everything after is joined.

Where the strings come from

You rarely type "5" + 1 on purpose. The strings come from:

• form fields: input.value is always a string, even with type="number"
• URL parameters and localStorage: always strings
• data from a server or a CSV: sometimes strings, depending on how it was made
• textContent of an element

That's why a cart total can be correct in your tests (where you typed numbers in the code) and wrong on the page (where the quantity came from an input).

Convert on purpose with Number()

const qtyFromInput = "3";
const price = 250;

const qty = Number(qtyFromInput);
console.log(qty * price, qty + price);

750 253

Convert once, as soon as the value enters your code, and use the converted variable from then on. Don't sprinkle Number() everywhere you use it.

Check that it worked

When conversion fails, you don't get an error. You get NaN, and NaN spreads through every calculation that touches it.

console.log(Number("12"));
console.log(Number(" 12 "));
console.log(Number("12 pcs"));
console.log(Number(""));
console.log(Number("1,200"));

12
12
NaN
0
NaN

Two of those need attention:

• Number("") is 0, not NaN. An empty field silently becomes zero. If empty should mean "missing", check for it before converting.
• "1,200" with a thousands separator is NaN. Strip the commas first if your users type them: Number(text.replaceAll(",", "")).

function readQty(text) {
  if (text.trim() === "") return null;
  const n = Number(text);
  return Number.isNaN(n) ? null : n;
}
console.log(readQty("3"), readQty(""), readQty("three"));

3 null null

parseInt and parseFloat: when to use them

parseInt and parseFloat read numbers from the start of a string and stop at the first character they don't understand:

console.log(parseInt("12 pcs", 10));
console.log(parseFloat("3.5kg"));
console.log(parseInt("3.9", 10));
console.log(parseInt("pcs 12", 10));

12
3.5
3
NaN

That's useful for values like "12px" from CSS. It's risky for user input, because "12abc" quietly becomes 12. For form fields, Number() is stricter, and stricter is what you want. If you use parseInt, always pass 10 as the second argument so it reads in base 10.

Converting the other way

To turn a number into text, use String(n) or a template literal. To show money, use toFixed or, better, toLocaleString:

const total = 1234.5;
console.log(String(total));
console.log(total.toFixed(2));

1234.5
1234.50

Note that toFixed returns a string. Do your math first, format at the end. If you format and then add, you're back to "1234.50" + 10.

Common mistakes

• Doing math directly on input.value.
• Treating an empty field as 0 without meaning to.
• Using parseInt on user input and accepting "12abc".
• Formatting with toFixed before the last calculation.

What would your checkout do right now if someone typed "2 " (with a space), "", or "1,000" into the quantity field?