39

The following code gives weird results:

console.log("" + 1 + 10 + 2 - 5 + "8");

I've tried inputting various different values to work it out but I cannot understand what's going on under the hood.

Michał Perłakowski
  • 88,409
  • 26
  • 156
  • 177
Arno Lorentz
  • 725
  • 1
  • 5
  • 13
  • 2
    That must give a weird result, because this is a weird "formular". What do you expect? Adding strings and numbers will result in problems. – Seb Nov 28 '16 at 16:06
  • 5
    Related (I guess): [Javascript (+) sign concatenates instead of giving sum of variables](http://stackoverflow.com/q/5961000/218196), and many others: [`[javascript] addition string number`](http://stackoverflow.com/search?q=%5Bjavascript%5D+addition+string+number) – Felix Kling Nov 28 '16 at 16:13
  • @Seb Yeah but I wanna know why the answer is what it is. Why it is giving some particular number? – Arno Lorentz Nov 28 '16 at 16:41
  • 5
    You should probably have added "what you got" and "what you expected" to the question. – TripeHound Nov 28 '16 at 17:23

5 Answers5

89
"" + 1          === "1"
"1" + 10        === "110"
"110" + 2       === "1102"
"1102" - 5      === 1097
1097 + "8"      === "10978"

In JavaScript, the + operator is used for both numeric addition and string concatenation. When you "add" a number to a string the interpreter converts your number to a string and concatenates both together.

When you use the - operator, however, the string is converted back into a number so that numeric subtraction may occur.

When you then "add" a string "8", string concatenation occurs again. The number 1097 is converted into the string "1097", and then joined with "8".

Phrogz
  • 296,393
  • 112
  • 651
  • 745
  • 18
    On an almost entirely unrelated note, DCL (DIGITAL Command Language -- the "shell" script of VMS) is the only language I can remember where you _could_ subtract strings `"123"` - `"2"` would be `"13"` ([see here](http://h41379.www4.hpe.com/doc/731final/6489/6489pro_030.html)) – TripeHound Nov 28 '16 at 17:28
  • 1
    For completeness: during arithmetic operations, any string that doesn't represent a valid number is coerced to NaN (except for empty strings, which are coerced to 0). – adelphus Nov 28 '16 at 23:06
16

string + number = concatenated string

number + number = the sum of both numbers

string - number = the difference between (coerced string) and the number

explanation:

If one or both operands is string, then the plus is considered as string concatenation operator rather than adding numbers.

the minus operator always try to convert both operands to numbers.

so:

"" + 1 + 10 + 2 = (string) "1102"    
"1102" - 5      = (number)  1097
1097 + "8"      = (string) "10798"
amd
  • 20,637
  • 6
  • 49
  • 67
  • 3
    On more thing: only '+' operator will cast second operand to String type if first operand is a sting . Any other math expression, for example "" * 8 will cast both arguments to Number and returns Number or NaN – Andrei Belokopytov Nov 28 '16 at 16:15
5
  1. This is a string not a number--""
  2. This is a string not a number--"1"
  3. This is a string not a number--"1" <+> "10" = "1"+"10" = "110"'
  4. This is a string not a number--"1" <+> "10" <+> "2" = "1"+"10"+"2" = "1102"
  5. This is a number because there's no confusion about a minus operator--1102 - 5 = 1097
  6. This is a string not a number--"1097" <+> "8" = "1097"+"8" = "10978"

SNIPPET

document.getElementById("1").innerHTML = "";

document.getElementById("2").innerHTML = "" + 1;

document.getElementById("3").innerHTML = "" + 1 + 10;

document.getElementById("4").innerHTML = "" + 1 + 10 + 2

document.getElementById("5").innerHTML = "" + 1 + 10 + 2 - 5

document.getElementById("6").innerHTML = "" + 1 + 10 + 2 - 5 + "8";
<ol>
  <li id='1'></li>
  <li id='2'></li>
  <li id='3'></li>
  <li id='4'></li>
  <li id='5'></li>
  <li id='6'></li>
</ol>
Community
  • 1
  • 1
zer00ne
  • 41,936
  • 6
  • 41
  • 68
3

This site has some useful info.

JavaScript is very relaxed about the difference between strings and numbers.

...

So if you use + on a string and a number, JavaScript is going to make the number a string for you. Better still, if you need it you can treat numbers as strings or strings as numbers.

Conversely, if you apply mathematics to a string, JavaScript tries to make it a number. If the string cannot be interpreted as a number (because there are letters in it, for instance), JavaScript gives NaN (Not a Number).

Community
  • 1
  • 1
timje
  • 283
  • 2
  • 12
1

While + and - may have the same Operator Precedence, they do not have the same implicit conversion rules.

As - always means number subtraction in JavaScript, using - will always implicitly attempt parsing both the left and right side of the expression as integer.

In this case, as the operator precedence is the same, and the evaluation is from left to right, you end up with (""+1+10+2) using +'s implicit tostring conversion for string concatenation, or the string "1102". Next, the - will implicitly attempt to parse the string "1102" into a number, as well as the number 5, which results in 1102-5, or the number 1097. At this point the string "8" is concatenated implicitly using +, and the end result can be seen: the string "10978".

Perhaps an interesting alternative would have been ""+1+10+2-5+8, which would have been 1097+8, or the number 1105.

Travis J
  • 81,153
  • 41
  • 202
  • 273