Why do plus signs in JavaScript sometimes act unexpectedly?

David Y.

The Problem

Consider the following code:

console.log("1 + 1 = " + 1 + 1);

The output of the final line will be “1 + 1 = 11”. Why does this happen, and how can we get the correct answer?

The Solution

JavaScript is a weakly typed language. While it recognizes different variable types (numbers, strings, booleans, etc.), it does not have strict rules about what types a specific variable can contain, or how they should be used in expressions. When faced with a situation such as the above code, where an operator like + is used on values of different types, JavaScript will usually implicitly convert one of those types rather than throwing an error. This can have unexpected results.

The problem above arises from the dual meaning of +. When used with numbers, + is the addition operator, and 1 + 1 == 2. But when used with strings, + is the concatenation operator, used to join two or more strings, and so "1" + "1" == "11".

In the code above, JavaScript has decided that we probably want a concatenated string rather than a final sum, and so it has converted both numbers into strings. The interpreter makes this decision based on the order of operations.

Note that subtraction would produce the opposite result:

console.log("1" - 1); // will print "0"

Here, the string “1” is implicitly converted into a number, as - does not describe a valid string operation.

To get a string containing the correct sum from our original code, we will need to modify it to remove the ambiguity that causes JavaScript to perform implicit type conversions. We can do this the same way we would remove ambiguity from a mathematical expression – by using brackets.

console.log("1 + 1 = " + (1 + 1)); // will print "1 + 1 = 2"

In the above code, two numbers are added, and the final result of that addition is converted into a string and appended to the first string.