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 of the object referred 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