1

I want to do something to a couple of variables using operators in quick succession. I don't think what I want to do is important as such; my question is more about the fundamentals of JavaScript evaluation.

In the three examples below, I try to use addition to change the values of two variables. However, not all perform as I (perhaps naïvely) expected.

JSFiddle here.

  1. OPERATIONS AS THREE SEPARATE STATEMENTS

    var a = 9, b = 2;
a += b; b += a; a += b;
// a === 24, b === 13

  2. OPERATIONS SEPARATED BY COMMA OPERATOR

    var a = 9, b = 2;
a += b, b += a, a += b;
// AS EXPECTED: a === 24, b === 13

  3. OPERATIONS IN ONE STATEMENT/EXPRESSION

    var a = 9, b = 2;
a += (b += (a += b)); 
// BUT HERE WE GET THIS: a === 22, b === 13

In the last example, b evaluates as expected, but a evaluates to a number two short of what appears in the first two examples.

I think that this is because everything in the parentheses returns the correct value but is finally added to the original value of a, i.e. 9, rather than the value suggested by (a += b) earlier in precedence which would be 11.

I have looked for why this might be in Flanagan's JavaScript: The Definitive Guide (6th ed.), (particularly under 4.11.1 "Assignment with operation") but found nothing there. Crockford doesn't seem to mention it explicitly in The Good Parts either. I've used various search terms to try to find more information on this behaviour. Can anyone tell me what this phenomenon is called or point me to some information on this behaviour (assuming it is expected) or what I might be doing wrong (assuming it's not)?

NB. I'm conscious that the parentheses in example 3 may be redundant since, as I understand it, assignment precedence goes from right-to-left anyway. But I thought having them there would make the example easier to talk about.

UPDATE

Judging by the answers below, I think my confusion over this issue actually stems from having absorbed a couple of paragraphs from the Flanagan book, possibly incorrectly:

In most cases, the expression:

a op= b

where op is an operator, is equivalent to the expression:

a = a op b

In the first line, the expression a is evaluated once. In the second, it is evaluated twice. The two cases differ only if side a includes side effects such as a function call or an increment operator. The following two assignments, for example, are not the same:

data[i++] *= 2
data[i++] = data[i++] * 2

I took this to mean that my one line example should produce the same results as the other two, because:

  1. Flanagan mentions two evaluations occurring in a = a op b as opposed to one, implying this is in fact different to a op= b where a is not evaluated as an lval on the right.
  2. I assumed the assignment operator I used (e.g. a += b) would count as a side-effect.

IMHO, I think Flanagan has made this confusing and it seems to contradict what's in the ECMAScript convention (as pasted below by pocka), but it could be my reading/misinterpretation. Is what he is saying incorrect or simply unclear? Or, is it just me?

Improve this question
5
  • write it out in long hand math and will get same result with a pencil....really think you answered your own question Commented Nov 3, 2013 at 15:14
  • @charlietfl Examples 1 and 2 are long-hand versions of example 3. I could understand the result a === 22 if first evaluation was a + b rather than a += b. My question is about the behaviour given that this is an assignment to a, which seems to be forgotten by the time we get to the final assignment/evaluation. Commented Nov 3, 2013 at 15:23
  • 1
    The right to left precedence of parenthesis leves you with adding a to what's evaluated in parentheis, whereas prior two examples add b to a...then add the same amont on right. Nothing funky about it. I think it's one of those mind melt things where you think logic is flawed and want to delve deep into why....when it's your own mind playing tricks on you. We've all been there Commented Nov 3, 2013 at 15:29
  • @charlietfl I love the part about "your own mind playing tricks on you". Commented Nov 3, 2013 at 15:33
  • @charlietfl You're possibly right about my own mind playing tricks. I've updated the question to (hopefully) explain my confusion. Thanks for saying "we've all been there"--that's actually comforting :-) Commented Nov 4, 2013 at 18:19

2 Answers 2

Reset to default
2

I think (not sure, although this is counter-intuitive) you can imagine:

a += (b += (a += b));

being written as:

a = a + (b += (a += b));

Although the plus + operator has right to left associativity, JavaScript expressions are evaluated from left-to-right, so a is evaluated first which is 9 now, then (b += (a += b)) is evaluated to 13.

Now the + operator adds from right-to-left, thus adding 13 to 9 and giving us 22.

EDIT: I am not gonna comment directly on your questions because I feel confused by reading them :).

Instead I am gonna try to explain this differently. I think the main source of your confusion comes from the difference between operator precedence, associativity and order of evaluation.

I really advise you to read the part on the Order of Evaluation (4.7.7 in the book, which is a great book by the way).

Let's go with an example first:

var x =1, y = 2, z = 3;
var alpha = (z=4) + y * z;
console.log(x); // 1
console.log(y); // 2
console.log(z); // 4
console.log(alpha);  // 12

In this example, although the multiplication operator * has higher precedence than the summation operator +, the the evaluation of the different components of the entire expression is still from left-to-right.

alpha on the left is declared and created first, then (z=4) is evaluated, then y is evaluated to 2. Now z is evaluated again which results in 4, notice that this is the new value which is caused by the side-effect of assigning 4 to z earlier in the expression, remember (z=4).

This results in an overall value for alpha that is equal to 12.

Now back to our original expression:

a += (b += (a += b));

a on the left is evaluated first which is 9 now, then the first b to the left is evaluated which is now 2, now the second a is evaluated which is 9 also, then the last b to the right is evaluated which is again 2.

Now starts the real work, because of the parentheses the last (a += b) is evaluated so now we have a = 11, then (b += (a += b)) is evaluated which is now 13, now this value is summed the value already evaluated which is 9 resulting in 22.

If it hasn't happened this way, this would mean that a on the left side of = would have been evaluated twice which is not the case.

Summary: You can't update the value of an already evaluated expression.

I hope this can clear this for you, if you have any further questions then feel free to ask :)

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

@charlietfl Thank you, mistake corrected. They are actually summed to 13 not 11. Sorry for this one.
@charlietfl Nice one xD
@Sniffer +1 for your answer. I don't know if it's right yet, but you've made me think about it in a different way. Could you take a look at the update in my question and see what you think? Do you think Flanagan is misleading on this or is it just me? Thanks.
2

According to ECMA-262 5th ed. 11.13.2,Compound Assignment Operators are evaluated as below:

  1. Let lref be the result of evaluating LeftHandSideExpression.
  2. Let lval be GetValue(lref).
  3. Let rref be the result of evaluating AssignmentExpression.
  4. Let rval be GetValue(rref).
  5. Let r be the result of applying operator @ to lval and rval.
  6. Throw a SyntaxError exception if the following conditions are all true: Type(lref) is Reference is true IsStrictReference(lref) is true Type(GetBase(lref)) is Environment Record
    GetReferencedName(lref) is either "eval" or "arguments"
  7. Call PutValue(lref, r).
  8. Return r.

The last example is evaluated as below:

1. Let a be lref, Let (b += (a += b)) be rlef.
2. Evaluate a and Let lval be the result of it(9).
3. Evaluate (b += (a += b)) and Let rval be the result of it.
   a. Let b be lref_, Let (a += b) be rlef_.   
   b. Evaluate b and let lval_ be the result of it(2).
   c. Evaluate (a += b) and let rval_ be the result of it.
     A. Let a be lref__, let b be rlef.
     B. Evaluate a and Let lval__ be the result of it(9).
     C. Evaluate b and Let rval__ be the result of it(2).
     D. Put lval__ + rval__ (means 9+2) to lref__(a) and return it.   
   d. Put lval_ + rval_ (means 2+11) to lref_(b) and return it.
4. Put lval + rval (means 9+13) to lref(a) and return it.

then we can get a === 22, b === 13.

Improve this answer

1 Comment

Thanks for your answer @pocka, especially for translating the ECMA standard for my specific example. I've updated my question to show where it is I think I got my misunderstanding about this from. Do you the Flanagan excerpt I pasted contradicts what's in the ECMA standard? Perhaps it's just misleading... or perhaps it's just me. Thanks again.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.