JavaScript strange behavior with operator precedence!!!1

Question

What do you think will be result of this expression?

var a = 10;
a = a + (a = 5);
console.log(a);

// a = 10?

NO!!! It's 15!

Now lets look at the other similar statement:

var a = 10;
    a = (a = 5) + a;
    console.log(a);
    
    // a = 15?

Again no, now its 10. Why is that? I cant understand. But wait, there is two more:

var a = 10;
a = a + a++;
console.log(a);

// a = 21? Haha no! Its 20!

And the last one:

var a = 10;
a = a++ + a;
console.log(a);

// 21))) now my mind is blown away (

So can anybody tell, why javascript behaves this way?

While all the questions you have are grounded in the same *basic* issue (**What order are operations carried out in when I assign a value to the same variable multiple times in the same expression?** — which is a terrible idea in the first place ), I'm voting to close this as too broad because they are separate problems (and there are probably separate duplicates for each issue floating around anyway). — Quentin, Nov 14 '18 at 10:28
Do you think i havent tried to find the answer? If thats so simple why you dont just give a link to a similar problem that have been discussed. thx — Nikol Lakin, Nov 14 '18 at 10:33
The first two seem pretty straight-forward to me: `var a = 10; a = a + (a = 5);` is the same as `a = 10 + 5;`. At the moment the first `a` is evaluated, it has the value `10`. `(a = 5)` evaluates to `5` (the result of the assignment expression). The fact that you assigned the value to `a` is irrelevant since are not reading from it anymore. However, in `a = (a = 5) + a;`, you first assign to `a`, so when you read from it (`... + a`) it has the value `5`. It's the same a `a = 5 + 5`. — Felix Kling, Nov 14 '18 at 10:33
*"If thats so simple why you dont just give a link to a similar problem that have been discussed."* Everything can be answered by reading the spec ;) Not that that is easy though... https://www.ecma-international.org/ecma-262/9.0/ — Felix Kling, Nov 14 '18 at 10:34
More accessible references: https://stackoverflow.com/q/34094916/218196, https://stackoverflow.com/q/50869790/218196 — Felix Kling, Nov 14 '18 at 10:36
but it completly negates everything that is taught about operator precedence... The expresion in parentheses must evaluate first? Than goes addition.. — Nikol Lakin, Nov 14 '18 at 10:39
*"The expresion in parentheses must evaluate first?"* That's not what parenthesis mean. I guess one could say that they impact the order of evaluation (but that does not necessarily mean that they are evaluated first, just imagine you have multiple groups of parenthesis, they cannot be "first" all together). Rather they change the precedence of operands/operators and operators, which as a side effect impacts evaluation order. E.g. `3 * 4 + 5` is different than `3 * (4 + 5)`. The LHS of `x * y`, i.e. `3` is still evaluated first. The difference is in evaluating the RHS, `4` vs `4 + 5`. — Felix Kling, Nov 14 '18 at 10:44
After this comment i come with an idea to write a new bestseller 'You dont know JS operators' — Nikol Lakin, Nov 14 '18 at 10:48
The examples with `a++` are also pretty straight-forward. It does what it should: return the current value of `a`, *then* increase it by one. — str, Nov 14 '18 at 10:51

score 1 · Answer 1 · answered Nov 14 '18 at 10:47

To understand this better, let us consider another variable

CASE 1

var a = 10;
a = a + (a = 5); 
console.log(a); // 15

a = 10;
var b = a + (a = 5);
console.log(a); // 5
console.log(b); // 15

a + (a = 5)
5 + (a = 5) // here a is assigned a value 5 and bracket returns 5
5 + 5 // here value of a is 5
10 // value will be assigned to variable on LHS

CASE 2

var a = 10;
a = (a = 5) + a;
console.log(a); // 10


a = 10;
var b = (a = 5) + a;
console.log(a); // 5
console.log(b); // 10

(a = 5) + a
(a = 5) + a // here a is assigned a value 5 and bracket returns value 5
5 + 5 // here value of a is 5
10 // value will be assigned to variable on LHS

CASE 3

var a = 10;
a = a + a++;
console.log(a); // 20

a = 10;
var b = a + a++;
console.log(a); // 11
console.log(b); // 20

a + a++ // post increment i.e. it will return the value first and then increment
10 + 10 // where value of a will 10 + 1 i.e. 11 
20 // value will be assigned to variable on LHS

CASE 4

var a = 10;
a = a++ + a;
console.log(a); // 21

a = 10;
var b = a++ + a;
console.log(a); // 11
console.log(b); // 21

a++ + a // post increment i.e. it will return the value first and then increment
10 + a // where value of a will 10 + 1 i.e. 11
10 + 11 // as value of a is 11
21 // value will be assigned to variable on LHS

score 0 · Answer 2 · answered Nov 14 '18 at 10:47

0

var a = 10;
a = a + (a = 5);
console.log(a);

// a = 10?

It's 15 because the value of a was 10 and you added (a = 5) after, which changed a's value to 5. Therefore, you did 10+5.

var a = 10;
    a = (a = 5) + a;
    console.log(a);
    
    // a = 15?

Now that you have (a = 5) first, you're changing its value to 5 before adding a. Therefore, you're doing 5+5.

Hope this helps.

answered Nov 14 '18 at 10:47

Ryan Walls

191
1
13

But the expression in parentheses must be evaluated first, i thought that what operator precedence mean – Nikol Lakin Nov 14 '18 at 11:16

JavaScript strange behavior with operator precedence!!!1

2 Answers2