Javascript Object Literal and Array Problem

Question

I have the following javascript:

oCoord = { x: null, y: null }; 
var aStack = []; 

oCoord.x = 726; 
oCoord.y = 52; 
aStack.push( oCoord ); 

oCoord.x = 76; 
oCoord.y = 532; 
aStack.push( oCoord ); 

oCoord.x = 716; 
oCoord.y = 529; 
aStack.push( oCoord );

Now this creates the following structure (an array of 3 objects)

Array[ Object, Object, Object ];

However when I try and access the properties of each object they are all coming out the same. Why is this ?

alert( aStack[0].x ); // outputs 716
alert( aStack[1].x ); // outputs 716
alert( aStack[2].x ); // outputs 716

What am I doing wrong ?

Answer 1

You are using the same reference to your object. You need to create a new one each time.

E.g.

var aStack = []; 

aStack.push( { x: 2, y: 23 }); 
aStack.push( { x: 3, y: 4 }); 
aStack.push( { x: 33, y: 2 });

Or, if you prefer the style you wrote it in, do:

var aStack = []; 

var o = {};
o.x=1;
o.y=3;
aStack.push(o); 

var o = {};
o.x=21;
o.y=32;
aStack.push(o); 

var o = {};
o.x=14;
o.y=43;
aStack.push(o); 


alert( aStack[0].x ); 
alert( aStack[1].x ); 
alert( aStack[2].x );

Note we are re-declaring with var each time to create a new instance.

Answer 2

You are using the same oCoord for all your coordinates objects.

Try this instead:

var aStack = []; 
aStack.push( { x: 726, y: 52} );
aStack.push( { x: 532, y: 76} ); 
aStack.push( { x: 716, y: 529} );

Answer 3

var aStack = [];
aStack.push({ x: 726; y: 52 });
aStack.push({ x: 76; y: 532 });
aStack.push({ x: 716; y: 529 });

Answer 4

you are overwriting the values of x and y in oCord. so when you say

 oCoord.x = 716; 
 oCoord.y = 529;

it overwrities the previous value

Answer 5

Egil Hansen's answer is probably better, but you could clone the object as an alternative solution:

// Some function to clone objects (e.g. using jQuery)
function clone(o) { return $.extend(true, {}, o); }

oCoord = { x: null, y: null };
var aStack = []; 

oCoord.x = 726; 
oCoord.y = 52; 
aStack.push( clone(oCoord) ); 

oCoord.x = 76; 
oCoord.y = 532; 
aStack.push( clone(oCoord) ); 

oCoord.x = 716; 
oCoord.y = 529; 
aStack.push( clone(oCoord) );

// console.log(aStack) =>
// [Object x=726 y=52, Object x=76 y=532, Object x=716 y=529]