Strange JavaScript object assignment in array

Question

I've a strange problem while assigning the object to array in JavaScript here is complete code

var co = {'yAxis':10};

var dynCharts = new Array();

for (var x=0; x<2; x++){                  
    dynCharts[x] = co;   
}
//assigning to first array only 
dynCharts[0].yAxis = { 'a':'1'};
//now alert second array
alert(dynCharts[1].yAxis.a);

If you above example code first of all I've a object called co then i'm assigning that object to arrays. Now I want to change the property called yAxis of first array but it's changing the value for the yAxis object of second array too.

JSfiddle of this code is here : http://jsfiddle.net/qvKaZ/

Can somebody please help me why its happening how to do it in property way ?

This question is similar to: Why does mutating an object assigned to another variable modify the original object? How to avoid it?. If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem. — dumbass
– dumbass, Commented Dec 26, 2024 at 17:20

Denys Séguret · Accepted Answer · 2012-09-22 18:47:19Z

0

You have the same object (that is the same instance) in all the cells of your array.

You need to duplicate (clone) co so that one change doesn't apply to all cells :

for (var x=0; x<2; x++){                  
    dynCharts[x] = {yAxis:co.yAxis}; // this puts in dynCharts[x] a copy of co
}

answered Sep 22, 2012 at 18:47

Denys Séguret

384k90 gold badges813 silver badges779 bronze badges

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

1 Comment

roshanbh Over a year ago

ok thanks for answering quickly..I've figured it out after posting this question :) ... I've updated the jsfiddle now with and used jQuery function to clone the object - jsfiddle.net/qvKaZ/3

monitorjbl · Accepted Answer · 2012-09-22 18:48:46Z

0

Every object in your array is a reference to the object. If you change the object at all, all values in the array will appear to be updated. You need to make a new object or clone the existing one on each iteration of your loop.

answered Sep 22, 2012 at 18:48

monitorjbl

4,3803 gold badges39 silver badges46 bronze badges

Comments

I Hate Lazy · Accepted Answer · 2012-09-22 18:57:29Z

0

One way is to use Object.create, which will create a new object that inherits from co.

for (var x=0; x<2; x++){                  
    dynCharts[x] = Object.create(co);   
}

An advantage is that you can update co at any time, and all the objects that inherit from it will see the update, as long as the updated property is not shadowed on the actual object.

To handle older browsers, include this code.

if (!Object.create) {
   Object.create = function(proto) {
       Object.create.F.prototype = proto;
       return new Object.create.F;
   };
   Object.create.F = function(){};
}

It's not a fully compliant substitute, but will work for basic cases as used above

answered Sep 22, 2012 at 18:57

I Hate Lazy

49k13 gold badges89 silver badges79 bronze badges

Collectives™ on Stack Overflow

Strange JavaScript object assignment in array

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related