Why does pushing an object into an array change unwanted parts of the array?

Question

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 click, testarray would contain the values ​​10 and 11 for the first element of the array and 20 and 21 for the second.

In reality, the first element of the array contains 20 and 21. Thus, the second push overwrites the first element of the array. What's wrong?

Answer 1

The variable tempcontains a reference to the object and you refer twice to the link to the object, so updating one property will change the property of the object.

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

Run codeHide result

Answer 2

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

Run codeHide result

Answer 3

:

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

b.prop = 'new value'

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

Why is this happening? Since you have a single object {prop: 'value'}, and three references to the object: obj, b, c, so when you call this object using any of these links, you call the same object. in your case you need to create two different objects and you can use this method

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

Run codeHide result

Answer 4

do this before you change the properties and push

temp = {} 

this will set a new link to temp