Objects push()ed into Array

Question

I wish to understand the following behaviour when pushing objects into an array.

(1) I create an object, create a property of the object and then push it into an array.

var array = [];
var obj = {};

obj.x = 1;
array.push(obj); 
console.log(array); //Output [{x: 1}]

Consider the two alternatives:

(2a): I change the object's property and so change the object referenced in the array:

obj.x = 2;
console.log(array); //Output [{x: 2}] ... it has been changed

(2b instead of 2a ) I make the object reference refer to a new object and create the property, the original object referenced in the array is unchanged:

obj = {}; //Change reference to new object
obj.x = 2;
console.log(array); //Output [{x: 1}] ... it is unchanged

Why is this the case?

PS: I notice that this distinction is discussed here ( Do objects pushed into an array in javascript deep or shallow copy? ), but it is not satisfactorily explained.

Answer 1

JavaScript objects are pushed onto the array by object reference, that is if you push the object into the array and then later manipulate the object, the array's contents appear to change as well because the array references the same object.

Creating a new object either by initialization or by cloning side-steps this problem, you've got two entirely different objects in the array.

Think of it this way: When you call push on an object the object itself doesn't go into the array, a reference (pointer) to the object does. Primitive types like numbers get copied in, objects don't.

Answer 2

1. When you are pushing an object, you adding reference of first object, So thats reason its updated to 2

2. You are creating new object and assigning to obj and changing that object won't change array value because it is pointing to different reference.

Answer 3

I don't know if my poor ASCII diagramming skills would help, but here's an attempt:

-----------------------------------------
(1)
-----------------------------------------

array = []

  [ ]    'array'
   ^--------/

obj = {}

  [ ]    'array'   { }     'obj'
   ^--------/       ^-------/

obj.x = 1

  [ ]    'array'   {x: 1}    'obj'
   ^--------/        ^---------/

array.push(obj)

       ,-----------------v
  [0: * ]    'array'   {x: 1}    'obj'
   ^------------/        ^---------/

-----------------------------------------
(2a)
-----------------------------------------

obj.x = 2

       ,-----------------v
  [0: * ]    'array'   {x: 2}    'obj'
   ^------------/        ^---------/


-----------------------------------------
(2b)
-----------------------------------------

obj = {}

       ,-----------------v
  [0: * ]    'array'   {x: 1}    'obj'    { }
   ^------------/                  `-------^ 


obj.x = 2

       ,-----------------v
  [0: * ]    'array'   {x: 1}    'obj'    {x: 2}
   ^------------/                  `--------^