Two assignments in one line

Question

Let's say we start with this:

var foo = {n:1}; var bar = foo;

In JavaScript, what is the order in which the following assignments are carried out:

foo.x = foo = {n:2};

When I looked up answers to this I found several that seemed to suggest that assignments happen from RIGHT TO LEFT, eg:

foo = {n:2}; foo.x = foo;

In which case we would expect:

console.log(foo) //{n:2, x:Object} - (a circular reference back to foo)

However what I see in the console when I actually do this suggests that assignments actually happen from LEFT TO RIGHT:

console.log(foo) //{n:2} console.log(bar) //{n:1, x:Object} --> The {n:1} obj gets an 'x' property, and foo gets reassigned to a new object {n:2}

Can someone clarify for me the order of operations when there are multiple assignments in one line?

Also, what is the underlying rule that distinguishes the above scenario from a situation like the following: Multiple variable assignments in one row

Some of the answers in the above question claim that assignments of primitives are carried out RIGHT TO LEFT...

Andrew Shepherd · Accepted Answer · 2015-05-29T04:12:34.053

12

The assignment does go from right to left. It's just that the resolution of foo.x happens before the assignment. (Ecma Standard 11.13.1 Simple Assignment)

Think of it like this. Before the assignment, foo and bar happen to be pointing to the same object in memory. (We'll call it inMemoryObject).

foo --|
bar --|
      |---> inMemoryObject { 
                               n:1 
                           }

We then refer to foo.x at the beginning of an assignment method. Because foo.x doesn't exist, the placeholder gets created, ready to be assigned to.

foo --|
bar --|
      |---> inMemoryObject { 
                               n:1, 
                               x: undefined 
                           }

Once the variable is created, then the right-to-left assignment process begins, assigning to inMemoryObject.x. At the end of the assignment process, foo no longer points to inMemoryObject, but bar still does.

bar --|
      |---> inMemoryObject { 
                              n:1, 
                              x: --| 
foo --|                     }      |
      |                            |
      |----------------------------|--- secondInMemoryObject {
                                                                n:2
                                                             }

edited May 29 '15 at 04:12

answered May 11 '15 at 01:13

Andrew Shepherd

44,254
30
139
205

1

How do you know this? – gotnull May 11 '15 at 01:32
There is absolutely no such thing as "placeholder" objects. – Fabrício Matté May 11 '15 at 01:33
1

Re-reading your answer and the [spec](http://es5.github.io/#x11.13.1), I've noticed why you did this together with a fatal flaw in my own answer. There's no "placeholder object", but instead, a *reference* to the property `x` of the in-memory object. – Fabrício Matté May 11 '15 at 02:10
And by reference, I mean: http://es5.github.io/#x8.7 -- see the second paragraph, may be useful for your answer. – Fabrício Matté May 11 '15 at 02:13
2

@gotnull The standard declares that the left-hand expression gets evaluated first: http://www.ecma-international.org/ecma-262/5.1/#sec-11.13.1 – Andrew Shepherd May 29 '15 at 04:09
@AndrewShepherd well explained, thanks! – Roy Ling Mar 20 '16 at 13:38

Stefan Haustein · Answer 2 · 2015-05-11T01:18:02.560

1

The assignments happen from right to left, but the assignment target evaluation happens from left to right.

Basically the whole expression starts evaluating from left to right, but the actual assignment needs the return value from the right side. So the assigment itself has to happen after retuning the value of the evaluation of the right side.

edited May 11 '15 at 01:18

answered May 11 '15 at 01:11

Stefan Haustein

18,427
3
36
51

"but the assignment target evaluation happens from left to right." -- the way you use "evaluation" is misleading. If the assignment targets were evaluated left-to-right then this would log `undefined`: http://jsfiddle.net/w8cbhdub/ – Fabrício Matté May 11 '15 at 01:38

Two assignments in one line

2 Answers2