Modifying the javascript array and pushing it into array is copying to every element in array

Question

I am not able to understand why it is copying the modified value to every element in the javascript array. Can somebody please explain the concept why?

var obj = {x:12};

var arr =[];

for(var i=0;i<5;i++){
    obj["x"] = i;
    arr.push(obj);
    println("Inside -> " + JSON.stringify(arr));
}
println("Output -> " + JSON.stringify(arr));

Output of the above code returns -

Inside -> [{"x":0}]
Inside -> [{"x":1},{"x":1}]
Inside -> [{"x":2},{"x":2},{"x":2}]
Inside -> [{"x":3},{"x":3},{"x":3},{"x":3}]
Inside -> [{"x":4},{"x":4},{"x":4},{"x":4},{"x":4}]


Output -> [{"x":4},{"x":4},{"x":4},{"x":4},{"x":4}]

Werner · Accepted Answer · 2017-11-14 10:09:46Z

1

You're pushing an reference of the original Object into the array. By changing the value of an reference-object you do it for the original one too.

To prevent that you have to clone it.

const clone = Object.assign({}, obj)

Example:

var obj = {
  x: 12
};

var arr = [];

for (var i = 0; i < 5; i++) {
  const clone = Object.assign({}, obj);
  clone["x"] = i;
  arr.push(clone);
  println("Inside -> " + JSON.stringify(arr));
}
println("Output -> " + JSON.stringify(arr));

function println(x) {
  console.log(x);
}

Object.assign (MDN)

answered Nov 14, 2017 at 10:09

Werner

2,1743 gold badges24 silver badges34 bronze badges

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

Comments

anteAdamovic · Accepted Answer · 2017-11-14 10:05:32Z

1

Because you're pushing a reference to obj so whenever you make a push using the same object you basically duplicate the instance of it, also when you change 1 instance all of them will change value:

Imagine you have object A what you're doing is ...

for (var i = 0; i < 5; i++) {
  A = i;
  arr.push(A);
}

So you will push a total of 5 equal object instances and when you change 1 all of them will change value, instead you should use an approach like:

for (var i = 0; i < 5; i++) {
  arr.push({ x: i });
}

So every time you will create a new object and the result will be:

[{x:1},{x:2},{x:3},{x:4},{x:5}]

answered Nov 14, 2017 at 10:05

anteAdamovic

1,44312 silver badges25 bronze badges

Comments

sabithpocker · Accepted Answer · 2017-11-14 10:10:00Z

1

In your code you are pushing the same object to all indices in array. You can use Object.assign to copy an object and push a copy each to each index.

var obj = {x:12};

var arr =[];

for(var i=0;i<5;i++){
    let objCopy = Object.assign({}, obj);
    objCopy["x"] = i;
    arr.push(objCopy);
    console.log("Inside -> " + JSON.stringify(arr));
}
console.log("Output -> " + JSON.stringify(arr));

answered Nov 14, 2017 at 10:10

sabithpocker

15.6k1 gold badge44 silver badges77 bronze badges

2 Comments

Ori Drori Over a year ago

You can also update x when you assign - const objCopy = Object.assign({}, obj, { x: i });

sabithpocker Over a year ago

@OriDrori yes sure, useful in most real-life cases, I thought it didn't make much sense in this example.

Karthik RP · Accepted Answer · 2017-11-14 10:04:17Z

0

This is because happening because when you are pushing the object into the array, you are in fact pushing reference to the object.

arr.push(obj);

So when you change the any value within the object it changes only in one place, but the contents of your array in fact are referencing the same object. To avoid this you can do this to push the data to your array,

arr.push(JSON.parse(JSON.stringify(obj)));

answered Nov 14, 2017 at 10:04

Karthik RP

1,0781 gold badge16 silver badges26 bronze badges

Comments

nicholaswmin · Accepted Answer · 2017-11-14 10:18:12Z

0

Complex values (i.e objects) are passed by reference.

In each iteration, you're simply working with the same object. When you modify it, the modification reflects to all the passed references already present in your arr

var foo = { foo: 'bar' }

// you assume we are gonna copy the value of `foo` to `foo2` 
var foo2 = foo

// change the value of the original object
foo.foo = 'baz'

// the change reflects to the other object,
// since it refers back to the original object
console.log(foo2)

// ..so we didn't copy, we just referred to it

edited Nov 14, 2017 at 10:18

answered Nov 14, 2017 at 10:03

nicholaswmin

23.2k16 gold badges103 silver badges175 bronze badges

Comments

pbialy · Accepted Answer · 2017-11-14 10:21:45Z

-1

instead of

obj.x = i;
arr.push(obj);

do

var objCopy = Object.assign({}, obj, {x: i})
arr.push(objCopy);

answered Nov 14, 2017 at 10:21

pbialy

1,1131 gold badge14 silver badges27 bronze badges

Collectives™ on Stack Overflow

Modifying the javascript array and pushing it into array is copying to every element in array

6 Answers 6

Comments

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related