current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.4 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 14 down vote favorite
3

The following code gives weird results:

function showOutput() {
  document.getElementById("demo").innerHTML = "" + 1 + 10 + 2 - 5 + "8";
}
<input type="button" value="Click me check output" onclick="showOutput()">
<p id="demo"></p>

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

share|improve this question
1  
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 6 hours ago
2  
Related (I guess): Javascript (+) sign concatenates instead of giving sum of variables, and many others: [javascript] addition string number – Felix Kling 6 hours ago
    
@Seb Yeah but I wanna know why the answer is what it is. Why it is giving some particular number? – Arno Lorentz 6 hours ago
2  
You should probably have added "what you got" and "what you expected" to the question. – TripeHound 5 hours ago
    
How does String and Integer addition work in javascript? Poorly. Javascript hates numbers. And don't even get it started on Dates. – Ryan 2 hours ago
up vote 24 down vote accepted 
"" + 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.

share|improve this answer
    
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) – TripeHound 5 hours ago
up vote 8 down vote

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 = (string) "1"
"" + 1 + 10 = "1" + 10 = (string) "110"
"" + 1 + 10 + 2 = "110" + 2 = "110" + 2 = (string) "1102"
"" + 1 + 10 + 2 - 5 = "1102" - 5 = (number) 1097
"" + 1 + 10 + 2 - 5 + "8" = 1097 + "8" = (string) "10798"
share|improve this answer
    
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 6 hours ago
up vote 2 down vote

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).

share|improve this answer
up vote 2 down vote
  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 =1197
  6. This is a string not a number--"1197" <+> "8" = "1197"+"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>

share|improve this answer
up vote 0 down vote

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.