Javascript - An array of object's value used the last value iterated

Question

I am trying to push objects to an empty array, where its x property value incremented on each loop. I used console.log(B.x) to check that it does iterate but even so, each object will have its x property value set to 300

n = 20, therefore, 100 (original x's value) + 10 (iteration) * 20 (loop) = 300

function createBlocks(n) {
  var blockArray = [];

  var B = {
    x: 100,
    y: 100,
    width: 35,
    height: 35,
    color: "brown"
  }

  for (var i = 0; i < n; i++) {
    blockArray.push(B);
    B.x += 10;
    console.log(B.x);
    console.log(blockArray[i]);
  }
  return blockArray;
}

I don't understand why all the objects have the same value (300) for its x's property.

Because objects are passed as reference not value. When you assign one object's value to another it will be referred not copied. — Lalit
– Lalit, Commented Nov 16, 2017 at 7:20

Suren Srapyan · Accepted Answer · 2017-11-17 05:45:01Z

2

Because your object is single and you have multiple references to it. So why changing for one, it changes the actually object. You need to create separate objects for each item.

You can use object destructing to copy the properties from one object into a new object and push that temp object into the array.

const blockArray = [];

const B = {
  x: 100,
  y: 100,
  width: 35,
  height: 35,
  color: "brown"
}

for (var i = 0; i < 10; i++) {
  let temp = { ...B };
  blockArray.push(temp);   
  B.x += 10;
}
  
console.log(blockArray);

edited Nov 17, 2017 at 5:45

answered Nov 16, 2017 at 7:19

Suren Srapyan

68.9k14 gold badges128 silver badges119 bronze badges

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

Comments

codejockie · Accepted Answer · 2017-11-16 07:31:26Z

0

You could use the ES6 spread operator for this also:

function createBlocks(n) {
  const blockArray = [];

  const B = {
    x: 100,
    y: 100,
    width: 35,
    height: 35,
    color: "brown"
  };

  for (var i = 0; i < n; i++) {
    const temp = { ...B }; // object spread
    blockArray.push(temp);
    B.x += 10;
  }
  return blockArray;
}

createBlocks(20);

answered Nov 16, 2017 at 7:31

codejockie

11.1k5 gold badges52 silver badges58 bronze badges

Collectives™ on Stack Overflow

Javascript - An array of object's value used the last value iterated

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related