How can I show the correct value in a javascript array element?

Question

In the following code, I create a car object and modify an element by increasing the count. Each time I modify the car, I push it onto an array called yada. At the end, I access the 3rd car that gets put onto the yada array to see what the count is, but it reports a count of 6 instead of what I expected to be a count of 3.

<html>
<body>
<script>

var car = {limit:4, count:0, trigger:0};
var yada = new Array();

for(var i=0; i<6; i++)
{
    car.count += 1;
    if(car.count >= car.limit)
    {
        car.trigger = 1;

    }
    yada.push(car);
    alert(car.count+" "+car.limit+" "+car.trigger);
};

alert(yada[2].count + " TEST ");

</script>
</body>
</html>

you're pushing multiple times the reference to the same car. So all the elements in the array are exactly one element - a reference to a car object — Gonzalo.-, May 16 '17 at 21:18

score 4 · Accepted Answer · edited May 23 '17 at 12:03

It is important to understand the difference between pass by value and pass by reference: Is JavaScript a pass-by-reference or pass-by-value language?.

Javascript's default is always pass by value, but for objects the value of the variable is a reference. Because of this, when you pass an object and change its members, those changes persist outside of the function.

You could adapt by making a new car object within your for loop:

<html>
<body>
<script>


var yada = new Array();

for(var i=0; i<6; i++)
{
    let car = {limit:4, count:0, trigger:0};
    car.count = i+1;
    if(car.count >= car.limit)
    {
        car.trigger = 1;

    }
    yada.push(car);
    alert(car.count+" "+car.limit+" "+car.trigger);
};

alert(yada[2].count + " TEST ");

</script>
</body>
</html>

Because you declare the car a local variable, it doesn't persist outside the loop and you create a new one every looprun that you can then store in your array.

This works for me.

Variables are function scoped, your car variable exists out of the for loop — Ayush Seth, May 16 '17 at 22:00
True, for correctness I changed it to let. Still, the code works. — Xavier Hendrickx, May 16 '17 at 22:01

Ayush Seth · Answer 2 · 2017-05-16T21:30:34.167

There is only one car object which you push everytime into your array, so all 6 entries in yada point to the same car object, and change in any one of them is reflected across all the "pointers" or array entries.

You loop through and increment car.count 6 times and when you are done with the loop you access the count of car in the array, which points to the same car object which has now car.count equal to 6 and that's what you see. No matter which array index you access, you will get the same result.

Perhaps, you want to create multiple car objects, have a look at https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new

Your constructor function could look something like this:

function Car() {
    this.limit = 4;
    this.count = 0;
    this.trigger = 0;
}

Then, to create a new car object you can just say :

var myCar = new Car();

score 0 · Answer 3 · answered May 16 '17 at 21:22

There is only one car with multiple references to it in your array. You need to create a new object from the current car.

var car = {limit:4, count:0, trigger:0};
var yada = new Array();

for(var i=0; i<6; i++)
{
    car.count += 1;
    if(car.count >= car.limit)
    {
        car.trigger = 1;
    }
    yada.push(Object.assign({},car) );
};
console.log(yada);

How can I show the correct value in a javascript array element?

3 Answers3