CODEWITHSUNDEEP
javascriptarrays
Alexandre d'Entraigues
Alexandre d'Entraigues

Reputation: 420

Javascript: push array into array vs. push values into array?

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 outcome.

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!

Upvotes: 3

Views: 15165

Answers (3)

Luigi Sgro
Luigi Sgro

Reputation: 649

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?.

Upvotes: 6

Simon
Simon

Reputation: 3727

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.

Upvotes: 0

Dibran
Dibran

Reputation: 1555

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

Upvotes: 0

Related Questions