JavaScript object literal and array

Question

I have the following JavaScript code:

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 three 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?

Egil Hansen · Accepted Answer · 2009-07-09 09:08:29Z

12

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} );

answered Jul 9, 2009 at 9:08

Egil Hansen

15.7k8 gold badges41 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

32423hjh32423 Over a year ago

thanks, perfect. Correct answer given for first full correct explanation

D'Arcy Rittich · Accepted Answer · 2009-07-09 09:16:01Z

3

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.

edited Jul 9, 2009 at 9:16

answered Jul 9, 2009 at 9:07

D'Arcy Rittich

172k41 gold badges298 silver badges287 bronze badges

2 Comments

andreas Over a year ago

Afaik you can't "re-declare" variables in JS, the var part will just be ignored and this answer would work without the extra vars (i.e. o = {} only).

Rene Saarsoo Over a year ago

cic is right, you aren't declaring a new variable each time, instead you are using the same variable o everywhere, but assigning new valus to it.

Vinay Sajip · Accepted Answer · 2009-07-09 09:10:48Z

1

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

answered Jul 9, 2009 at 9:10

Vinay Sajip

100k15 gold badges184 silver badges196 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 11:48:29Z

1

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]

edited May 23, 2017 at 11:48

CommunityBot

11 silver badge

answered Jul 9, 2009 at 9:36

andreas

7,4263 gold badges26 silver badges37 bronze badges

Comments

Peter Mortensen · Accepted Answer · 2016-06-26 11:48:54Z

1

You are overwriting the values of x and y in oCord.

So when you say

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

it overwrites the previous value.

edited Jun 26, 2016 at 11:48

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Jul 9, 2009 at 9:18

Ratnesh Maurya

7063 silver badges10 bronze badges

Collectives™ on Stack Overflow

JavaScript object literal and array

5 Answers 5

1 Comment

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related