I am new to JavaScript, can someone explain why these 3 results are different?
Example 1.
var x = 5 + 2 + 3;
document.getElementById("demo").innerHTML = x;
Output: 10
Example 2.
var x = 5 + 2 + "3";
document.getElementById("demo").innerHTML = x;
Output: 73
Example 3.
var x = 5 + "2" + 3;
document.getElementById("demo").innerHTML = x;
Output: 523
+ is overloaded to perform string concatenation and addition, and it is left-to-right associative.
Because the operator is overloaded, there needs to be a rule how to resolve the situation where both operands are of different data types. This rule is simple:
If one operand is a string, convert the other operand to a string.
That means the code is evaluated as
// 1.
((5 + 2) + 3)
= 7 + 3
= 10
// 2.
((5 + 2) + "3")
= 7 + "3" // number + string -> convert number to string
= "7" + "3"
= "73"
// 3.
(("5" + 2) + 3) // number + string -> convert number to string
= (("5" + "2") + 3)
= "52" + 3 // number + string -> convert number to string
= "52" + "3"
= "523"
+ goes left to right, and which operation is done depends on the arguments. If both arguments are numbers, it performs addition. If any of the arguments is not a number, it performs concatenation. 5 + 2 is thus 7, but "5" + "2" is "52" (just like "a" + "b" is "ab"). Furthermore, 5 + "2" and "5" + 2 are also both "52". It then works with 52 + 3, 52 + "3" and "52" + 3 analogously.
It has to do with the fact that JavaScript has loosely typed data types. In your first example, all of the numbers are summed because they are all treated as integers.
In your other examples, the statements are processed from left to right. So the number + number + string first adds the numbers and then tries to add a number and a string, which would make the returned result a string.
In the case of number + string + number, when adding the first two operands the output is a string, so when adding a string and a number, it will return a string.
Further reading: http://www.w3schools.com/js/js_datatypes.asp
A slightly less technical version of the answers provided (which are all more correct than this answer) but to allow you to undesrand the displayed output - its all about strings versus numbers - if two elements are numbers and you add them - you will get numerical addition. If you have a number and a string - when you add them the output will be the number followed by the string.
so to look at your examples:
var x = 5 + 2 + 3;
Output: 10
The 5,2 and 3 are all numbers so that the output is what they are all added together
var x = 5 + 2 + "3";
Output: 73
The 5 and 2 are numbers so are added together to give 7, but the "3" is a string so it give the number followed by the string ie 7 followed by 3 or 73
x = "5" + 2 + 3;
Output: 523
The 5 is a string and 2 and 3 are numbers, but are not added to each other but displayed next to each other - 523
var x = 5 + "2" + 3;
Output: 523
The 5 is a number and the "2" is a string and 3 is a number, but are not added to each other but displayed next to each other - 523
