CODEWITHSUNDEEP
javascript
Happysmithers
Happysmithers

Reputation: 761

Why does pushing an object into an array modify unwanted parts of array?

I am trying to populate an array with a list of objects. 

  var testarray=[];
  var temp={};

  temp.data = 10;
  temp.data2= 11;
  testarray.push(temp);
  console.log("After first push:");
  console.log(testarray[0].data);
  console.log(testarray[0].data2);

  temp.data = 20;
  temp.data2 = 21;
  testarray.push(temp);
  console.log("After second push:");
  console.log(testarray[0].data);
  console.log(testarray[0].data2);
  console.log(testarray[1].data);
  console.log(testarray[1].data2);

I would expect that after the second push, testarray would contain values 10 and 11 for first array element, and 20 and 21 for the second one.

In reality though, also the first array element contains 20 and 21. So the second push overwrites the first array element. What is wrong?

Upvotes: 4

Views: 118

Answers (4)

Ali Faris
Ali Faris

Reputation: 18592

do this before you change the properties and do the push

temp = {}

this will setup new reference to temp

Upvotes: 0

qiAlex
qiAlex

Reputation: 4346

Explanation:

var obj = {prop: 'value'};
var b = obj;
var c = obj;

b.prop = 'new value'

console.log (c.prop) // 'new value'

Why does it happening? Because you have one object {prop: 'value'} and three links to this object: obj, b, c so when you call this object using any of this link you will call one same object. in your case you need to create two different objects and you can it using this way

  function myClass (data, data2) {
     return {
        data: data,
        data2: data2
     }
  }

  var testarray=[];
  var temp = new myClass(10, 11);

  testarray.push(temp);
  console.log("After first push:");
  console.log(testarray[0].data);
  console.log(testarray[0].data2);

  var temp = new myClass(20, 21);
  testarray.push(temp);
  console.log("After second push:");
  console.log(testarray[0].data);
  console.log(testarray[0].data2);
  console.log(testarray[1].data);
  console.log(testarray[1].data2);

Upvotes: 1

user8233884
user8233884

Reputation:

See here:

var testarray=[];
  var temp={};

  temp.data = 10;
  temp.data2= 11;
  testarray.push(temp);
  console.log("After first push:");
  console.log(testarray[0].data);
  console.log(testarray[0].data2);


 //console.log(temp)
  temp = {} // You have to clear values of variable temp before adding new value on to it
  //console.log(temp)
  
  temp.data = 20;
  temp.data2 = 21;
  testarray.push(temp);
  console.log("After second push:");
  console.log(testarray[0].data);
  console.log(testarray[0].data2);
  console.log(testarray[1].data);
  console.log(testarray[1].data2);

Upvotes: 2

Pranav C Balan
Pranav C Balan

Reputation: 115222

The temp variable holds the object reference and you are pushing the object reference twice, so updating one property would change the object property.

var testarray = [];
var temp = {};

temp.data = 10;
temp.data2 = 11;
testarray.push(temp);
console.log("After first push:");
console.log(testarray[0].data);
console.log(testarray[0].data2);

// update with new object
temp = {};

temp.data = 20;
temp.data2 = 21;
testarray.push(temp);
console.log("After second push:");
console.log(testarray[0].data);
console.log(testarray[0].data2);
console.log(testarray[1].data);
console.log(testarray[1].data2);

Upvotes: 7

Related Questions