I'm new to javascript and don't quite understand how the push() method works.

I've got two empty arrays, row and newData. And two pieces of codes with very different outputs:

for (i = 1; i <= 10 ; i++) {
    row[0] = i;
    newData.push(row);
}

results in newData == [10,10,10,...,10], which I find very surprising, and

for (i = 1; i <= 10 ; i++) {
    newData.push(i);
}

results in newData == [1,2,3,...,8,9,10] which is the intended oute.

But I do not understand why every iteration of the first loop seems to replace every element of newData with the last element, when the second loop works just as intended?

Thanks!

I'm new to javascript and don't quite understand how the push() method works.

I've got two empty arrays, row and newData. And two pieces of codes with very different outputs:

for (i = 1; i <= 10 ; i++) {
    row[0] = i;
    newData.push(row);
}

results in newData == [10,10,10,...,10], which I find very surprising, and

for (i = 1; i <= 10 ; i++) {
    newData.push(i);
}

results in newData == [1,2,3,...,8,9,10] which is the intended oute.

But I do not understand why every iteration of the first loop seems to replace every element of newData with the last element, when the second loop works just as intended?

Thanks!

• javascript
• arrays

• How do you display your results? Using "alert" isn't very reliable. Use "console.debug" instead. – stile17 Commented May 21, 2015 at 9:23
• possible duplicate of Copying array by value in javascript – hindmost Commented May 21, 2015 at 9:33
• @stile17 I use, in jsfiddle, a technique I found here stackoverflow./questions/17382200/…. I hope it's reliable. Edit: I just tried using firebug to display a console.log instead and it is indeed much more precise. – Alexandre d'Entraigues Commented May 21, 2015 at 9:37

3 Answers 3

Your first snippet:

var row = new Array();
var newData = new Array();

for (i = 1; i <= 10 ; i++) {
    row[0] = i;
    newData.push(row);
}

pushes 10 times the reference to the array row, and at the same time changes the value contained in the position 0 of that array in turn to the values 1, 2, 3 .. 10, with the net result of setting the final contents of the row array to: [10].

The actual final value of newData is more correctly shown as:

[[10],[10],[10],[10],[10],[10],[10],[10],[10],[10]]

and not as:

 [10,10,10,...,10]

In JavaScript, pushing an object into an array, (as in this case an instance of the Array class), actually pushes into the array a reference to the object. Pushing the same variable row doesn't create multiple instances of it.

This behavior is explained in detail here: Is JavaScript a pass-by-reference or pass-by-value language?.

The first code sample doesn't return an array with [10, 10, 10, etc..] but an array with a single item: [10]. The push method basically adds every object to the given array. It will not add the items of an array if the given object is an array. It simple adds its like an object to the array, and determines the index based on the existing items.

Another way to add items to your array is using an index. Here are two samples which both result in the same array.

var arr = [];
for(var i = 0; i < 5; i++) {
    arr[i] = i;
}

[0, 1, 2, 3, 4]

var arr = [];
for(var i = 0; i < 5; i++) {
    arr.push(i);
}

[0, 1, 2, 3, 4]

Hope this helps

In your first example you are pushing the array row onto newData ten times in a row. On each iteration you are also setting the value to i. In javascript an array is an object, and when you push it you do so by reference, and not by value (which is the case with literal values such as in your second example).

Thus, what happens is that you end up with an array newData which has ten elements all pointing to the same javascript array, namely row. If you change the first element of row, row[0] = 2, newData will reflect this change as well.