Double-assignment of an object property results in undefined property

Question

Can anyone tell how the output became undefined?

var foo = {n: 2};
foo.x = foo = {n: 2};
console.log(foo.x); // undefined

Answer 1

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

The foo.x refers to the property x to the object refered to by foo. However, foo = {n:2} assigns a completely new object to foo. x is indeed assigned to an object, but that object is immediately replaced by another object. The object with the x property isn’t referenced by anything anymore.

You can read that line as

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

---

Graphical explanation

var foo = {n:2};

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

console.log(foo.x);

Answer 2

I'll break down the assignment and output of each variable as it plays out.

var foo = {n:2}
# foo: Object {n: 2}
# foo.x: undefined

foo.x = 3
# foo: Object {n: 2, x: 3 }
# foo.x: 3

foo.x = foo
# foo: Object {n: 2, x: Object {n:2, x: Object (recursive) } }
# foo.x: Object {n: 2, x: Object {n:2, x: Object (recursive) } }

foo.x = foo = {n: 2}
# foo: Object {n: 2}
# foo.x: undefined

The last line, as you can see, resets foo to equal {n: 2} which makes foo.x non-existent (because you have overwritten the foo object)

Answer 3

Your code is exactly the same as this one,

    var foo = {n:2}; // foo ==> {n:2}
    foo.x = {n:2}; // foo ==> {n:2,x:{n:2}}
    foo = {n:2}; // foo ==> {n:2}
    console.log(foo.x); // undefined 

because there's no "x" key in your object