In a loop, all array elements get value of the last one

Question

I have the following:

var travel_path=[];
var point={
    "left": 0,
    "top": 0
};
while(/*some condition here*/){
    point.left+=3;
    point.top+=5;
    travel_path.push(point);
}
console.log(travel_path);

Now, if the while loop runs for 10 iterations, instead of getting the incremented values of left and top in each element, I get 10 elements with the same value of {"left": 30, "top": 50}.

So it seems that, even though I'm using push to append elements to the end of the array, it's somehow updating all the previous elements as well.

Any ideas how I can resolve this?

Objects are passed by reference of a value, you only have one single point object that you keep pushing, and that's the only object you're changing. — adeneo
– adeneo, Commented Sep 21, 2016 at 13:57
You need to create a new object in each step of the iteration and then push it to your array, right now you're pushing multiple copies of your same point variable. — slugo
– slugo, Commented Sep 21, 2016 at 13:58
so how do I fix it? I've tried adding var tmp=point; and then pushing tmp instead of point every time but the result is the same. — sveti petar
– sveti petar, Commented Sep 21, 2016 at 13:59
@slugo See my comment above please, I've tried declaring a new var every time but it didn't help. — sveti petar
– sveti petar, Commented Sep 21, 2016 at 14:01

Nenad Vracar · Accepted Answer · 2016-09-21 14:01:21Z

2

You can create clone of object in each iteration of loop with Object.assign() and push that object to array.

var travel_path = [];
var point = {
  "left": 0,
  "top": 0
};
var i = 0;

while (i++ < 5) {
  point.left += 3;
  point.top += 5;
  travel_path.push(Object.assign({}, point));
}
console.log(travel_path);

answered Sep 21, 2016 at 14:01

Nenad Vracar

122k16 gold badges160 silver badges184 bronze badges

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

1 Comment

sveti petar Over a year ago

That did the trick. I had tried declaring a new var every time but that didn't work.

Adam · Accepted Answer · 2016-09-21 14:01:20Z

1

This is how javascript works. You can do something like this:

var travel_path = [];
var lastPoint;
var point = {
    "left": 0,
    "top": 0
};
while (/*some condition here*/) {
    lastPoint = travel_path[travel_path.length-1] || point;
    travel_path.push({
        left: lastPoint.left + 3,
        top: lastPoint.top + 5
    });
}
console.log(travel_path);

edited Sep 21, 2016 at 14:01

answered Sep 21, 2016 at 13:58

Adam

5,2933 gold badges33 silver badges64 bronze badges

1 Comment

sveti petar Over a year ago

That is not a simple option because the real function doesn't actually just add +3 and +5, it performs considerably more complex calculations. So I would have to stick the entire code into a separate function and call it each time. There must be a better way?

Aleksandar Matic · Accepted Answer · 2016-09-21 14:01:40Z

1

Try this:

var travel_path=[];
var point={
    "left": 0,
    "top": 0
};
while(/*some condition here*/){
    point.left+=3;
    point.top+=5;
    var tempPoint={
    "left": point.left,
    "top": point.top
    };
    travel_path.push(tempPoint);
}
console.log(travel_path);

answered Sep 21, 2016 at 14:01

Aleksandar Matic

7991 gold badge9 silver badges21 bronze badges

Comments

Nina Scholz · Accepted Answer · 2016-09-21 14:03:23Z

1

Depending how you calculate the new result, you could keep a count, like point and push tjen a new object with the values.

var travel_path=[];
var point={
    left: 0,
    top: 0
};
while(/*some condition here*/){
    point.left += 3;
    point.top += 5;
    travel_path.push({ left: point.left, top: point.top });
}
console.log(travel_path);

answered Sep 21, 2016 at 14:03

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Collectives™ on Stack Overflow

In a loop, all array elements get value of the last one

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related