How postfix increment work when it meet addition(+) operator in JavaScript?

Question

First of all, I know the expressions talked about later has side-effects, and should not be used in production environment. I just want to understand JavaScript through them. All of them are tested under Chrome.

var a = 42;
var b = "42";
a + ++b; // result is 85 

Here is my understanding of a + ++b,

The Prefix Increment (++) (precedence 15) has higher precedence than Addition(+) (precedence 13) according to Operator precedence. ++b could be parsed var ToNumber(GetValue(expr)) to 43, refer to 12.5.7 Prefix Increment Operator. Then the result of a + 43 could be 85.

However,

var a = 42;
var b = "42";
a++ + b; // "4242"

Why the result of a++ + b is "4242"?

I try to understand the result "4242", it seems that the a++ return 42 firstly, then for 42 + '42', the 42 will be '42' var ToString() firstly, refer to 12.7.3 The Addition operator ( + ). then the result could be "4242".

But it seems violate the rule: Postfix increment (precedence 16) higher than Addition (precedence 13)???

var a = 42;
var b = "42";
a +++b; // "4242" 

How does the a +++b; be parsed?

Answer 1

Haha, tricky one!

Post-fix increment returns the same value and then increments the variable. This is the default behaviour in every language I know.

So, when you do (warning: this is not a valid expression, it's just to show the idea):

42++ + "42"

What is really going on is:

1. First 42 is returned by the ++ operator
2. Then 42 is incremented to 43
3. Then 42 (the result value of the expression) is coerced into a string
4. Then the two operands are concatenated

---

Edit #1:

If you do:

var a = 42;
var b = "42";
a + b++; // result is 84

Test it!

Edit #2:

So, we conclude your question has nothing to do with operator precedence (:

Answer 2

There is a difference in post and pre increment in javascript then other languages. That is these operators can be seperated by a single space from the operand. For example:

var a = 42;
++ a;

Notice the space between ++ and a, this also works with a ++
so when javascript start parsing statements it takes operand or operator and store it in its stack and find any chance to use that. I hope you know how languages parse statements, from left to right or right to left. Javascript parse it from left to right.
So, when you wrote a +++b it started parsing from left,

Found a: push a in stack; stack: [a]
Found +: push + in stack; stack: [a, +]
Found +: pop + and a from stack and apply operand and push the result on stack (Now the stack only has a in memory, not a++ because of post increment); stack [a]
Found +: push on stack; stack: [a, +]
Found b: pop + and a from stack, apply operand and push the result on stack; stack: [b]

No more operands or operators, so it gives the result which is a+b and also increment a after it as a result of post increment on a, if you wanted to increment b before adding, you can try this:

a + ++b

this will seprate + from ++, now javascript knows where to apply increment.