How does adding String with Integer work in JavaScript? [duplicate]

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.

Answers:

Answer
"" + 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".

Answer

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"
Answer
  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>

Answer

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

Answer

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.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.