3

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!

Alexandre d'Entraigues
  • 330
  • 1
  • 4
  • 11
  • How do you display your results? Using "alert" isn't very reliable. Use "console.debug" instead. – stile17 May 21 '15 at 09:23
  • possible duplicate of [Copying array by value in javascript](http://stackoverflow.com/questions/7486085/copying-array-by-value-in-javascript) – hindmost May 21 '15 at 09:33
  • @stile17 I use, in jsfiddle, a technique I found here http://stackoverflow.com/questions/17382200/print-out-a-var-in-jsfiddle/20925259#20925259. 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 May 21 '15 at 09:37

3 Answers3

6

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

Community
  • 1
  • 1
Luigi Sgro
  • 639
  • 8
  • 21
0

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

Dibran
  • 1,435
  • 16
  • 24
0

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.

Simon
  • 3,667
  • 1
  • 35
  • 49
  • All right, I get it now. So at the end of the loop, newData is actually [row[0],row[0],...row[0]] and not [10,10...,10]? And is there a way to push the _value_ of row[0] and not its reference? – Alexandre d'Entraigues May 21 '15 at 09:33
  • Yes, that's right. Although when I ran your code the entire `row` array (a single item) was pushed (as @Luigi Sgro states as well). You could get the desired behaviour by pushing running `newData.push(row[0])` instead, which will pass the value of `row[0]` by value. – Simon May 21 '15 at 09:36