References

Beginner-friendly references for web development, with live, editable examples.

The JavaScript Addition + operator

Operator JavaScript All modern browsers Updated
Quick answer

The + operator adds numbers (2 + 3 is 5) but also concatenates strings ("a" + "b" is "ab"). The gotcha: if either side is a string, it concatenates — so 1 + "2" is "12", not 3. Convert with Number() to force addition.

Overview

+ is two operators in one, and that's the source of endless confusion. With numbers it adds: 2 + 3 is 5. With strings it concatenates: "foo" + "bar" is "foobar". The rule for mixed types is simple but bites people: if either operand is a string, + converts the other to a string and joins them.

So 1 + "2" is "12", not 3 — a frequent bug when a number arrives as a string from a form input, URL or JSON. Convert explicitly first: Number(a) + Number(b), or the unary plus +a. Tellingly, the other arithmetic operators (-, *, /, %) don't do string concatenation, so "5" - 1 is 4 — only + is overloaded.

For building strings, template literals are usually clearer than chains of +: `Hello ${name}, you have ${count} messages` reads better than gluing pieces together. Use + for arithmetic and the occasional short join; reach for template literals when assembling text from several values.

Syntax

a + b

2 + 3        // 5   (numbers add)
"a" + "b"    // "ab" (strings concatenate)
1 + "2"      // "12" (string wins - coercion!)
Number("1") + Number("2")  // 3  (force numbers)
"5" - 1      // 4   (only + concatenates)

Example

Live example 
<pre id="out" style="font:15px ui-monospace,monospace"></pre>
<script>
  const a = '10', b = 5; // a came from a form as a string

  document.getElementById('out').textContent =
    "a + b      = " + (a + b) + '\n' +
    "Number(a)+b = " + (Number(a) + b);
  // a + b = 105 / Number(a)+b = 15
</script>

Best practices

  • Convert string inputs with Number() or unary + before adding, to avoid accidental concatenation.
  • Remember only + is overloaded — -, *, / always do math.
  • Use template literals for building text from multiple values, not long + chains.
  • Watch out for form/JSON values arriving as strings — that's where 1 + "2" bugs hide.

Frequently asked questions

Why does 1 + "2" equal "12" in JavaScript?
Because if either operand is a string, + concatenates: it converts the number to a string and joins them. Use Number() on both sides to add.
How do I add two numbers that are strings?
Convert them first: Number(a) + Number(b), or use unary plus: +a + +b.
Why does "5" - 1 give 4 but "5" + 1 give "51"?
Only + does string concatenation. The other arithmetic operators coerce strings to numbers, so - subtracts.
What is the best way to combine strings?
Template literals: `${a} and ${b}` are clearer than long chains of +.
=>