Multiple assignment confusion

Question

I understand that the assignment operator is right associative.

So for example x = y = z = 2 is equivalent to (x = (y = (z = 2)))

That being the case, I tried the following:

foo.x = foo = {a:1}

I expected that the object foo would be created with value {a:1} and then the property x will be created on foo which will just be a reference to the foo object.

(This is actually what happens if I was to separate the multiple assignment statement into two separate statements foo = {a:1};foo.x = foo; )

The outcome was actually:

ReferenceError: foo is not defined(…)

So then I tried the following:

var foo = {};
foo.x = foo = {a:1};

Now I don't get the exception anymore but foo.x is undefined!

Why is the assignment not working as I expected?

---

Disclaimer: The 'duplicate' question seems to be very different to the one that I'm asking, as the issue there is that the variables that were created in the assignment were global, as apposed to variables created with the var keyword. That's not the issue here.

Answer 1

There's an important difference between associativity and order of evaluation.

In JavaScript, even though the assignment operator groups right to left, the operands are evaluated left to right before the actual assignments are performed (which do occur right to left). Consider this example:

var a = {};
var b = {};
var c = a;

c.x = (function() { c = b; return 1; })();

The variable c initially references a, but the right-hand side of the assignment sets c to b. Which property gets assigned, a.x or b.x? The answer is a.x because the left-hand side is evaluated first, when c still references a.

In general, the expression x = y is evaluated as follows:

1. Evaluate x and remember the result.
2. Evaluate y and remember the result.
3. Assign the result from step 2 to the result of step 1 (and return the former as the result of the expression x = y).

What happens with multiple assignments, as in x = (y = z)? Recurse!

1. Evaluate x and remember the result.
2. Evaluate y = z and remember the result. To do this:
   1. Evaluate y and remember the result.
   2. Evaluate z and remember the result.
   3. Assign the result from step 2.2 to the result of step 2.1 (and return the former as the result of the expression y = z).
3. Assign the result from step 2 to the result of step 1 (and return the former as the result of the expression x = (y = z)).

Now let's look at your example, slightly edited:

var foo = {};
var bar = foo;         // save a reference to foo
foo.x = (foo = {a:1}); // add parentheses for clarity

foo.x is evaluated before foo gets assigned to {a:1}, so the x property gets added to the original {} object (which you can verify by examining bar).

Answer 2

Edited the answer to make it simple

First of all you have to understand the differnce between Reference- and Value- Type.

var foo = {};

foo variable holds a Reference to an object in memory, lets say A

Now, there are two arts of accessors: Variable Accessor and Property Accessor.

So foo.x = foo = {a:1} can be understood as

[foo_VARIABLE_ACCESSOR][x_PROPERTY_ACCESSOR] = [foo_VARIABLE_ACCESSOR] = {a:1}

!!! Accessor chain is evaluated first to get the last accessor, which is then evaluated associative.

A['x'] = foo = {a:1}

Property Accessor are seperated into setters and getters

var foo = { bar: {} };
foo.bar.x = foo = {a:1}

Here where have decared two nested objects foo and bar. In memory we have then two object A and B.

[foo_VAR_ACCESSOR][bar_PROP_GETTER][x_PROP_ACCESSOR] = [foo_VAR_ACCESSOR] = {a:1}

> A[bar_PROP_GETTER][x_PROP_ACCESSOR] = [foo_VAR_ACCESSOR] = {a:1}
> B[x_PROP_ACCESSOR] = [foo_VAR_ACCESSOR] = {a:1}
> B['x'] = foo = {a: 1}

Here you have little example

var A = {};
var B = {}
Object.defineProperty(A, 'bar', {
    get () {
        console.log('A.bar::getter')
        return B;
    }
})
Object.defineProperty(B, 'x', {
    set () {
        console.log('B.x::getter')
    }
});

var foo = A;
foo.bar.x = foo = (console.log('test'), 'hello');

// > A.bar.getter
// > test
// > B.x.setter