Question

I have an array ele, and I want to populate another array arr with copies of ele, and then return the populated array. The JavaScript function I have is:

function foo(n) {
    var arr = new Array(n);
    var ele = [0,1];

    for(var i=0;i<n;i++) {
        arr[i] = ele;
    }
    return arr;
}

for e.g. foo(3), the output I want is [[0,1],[0,1],[0,1]], but I instead get the output: [#1=[0, 1], #1#, #1#] (using Firefox’s Web Console). When I instead populate arr with [0,1] directly, as in

function fooNew(n) {
    var arr = new Array(n);

    for(var i=0;i<n;i++) {
        arr[i] = [0,1];
    }
    return arr;
}

I get the correct output for fooNew(3): [[0,1],[0,1],[0,1]]. Why does my original function foo not give the same output as fooNew? That is: why can’t I populate arr by assigning ele to arr[i], and instead have to populate it by assigning the content of ele directly to arr[i], to get the output I want?

======

Update: in light of Felix Kling’s helpful answer, and after some googling, I found that by using slice(0), you can place a copy of ele into arr[i] rather than a reference to it. So the following modification of foo will give the desired output:

function foo(n) {
    var arr = new Array(n);
    var ele = [0,1];

    for(var i=0;i<n;i++) {
        arr[i] = ele.slice(0);
    }

    return arr;
}

Answer 1

Actually, Firebug’s output is quite helpful in this situation ^†. It tells you that every element of your resulting array references the same array:

  [#1=[0, 1], #1#, #1#]
//  ^----------^----^  

#1 (or #1#) is a placeholder for the array [0, 1], indicating a reference.

It is still an array of arrays, it’s just differently represented by Firebug.

I’m not sure if this is what you want though. For example, if you modify the first element of the first array:

result[0][0] = 5;

the result would be

[[5,1], [5,1], [5,1]]

I assume you want the arrays to be independent from each other, therefore you have to assign a new array each time. This is what you do in the second case.

---

†: But it is also a reminder that one should not always believe everything one sees. The state of an object (for example) can be quite different from how tools represent it. Here is an article about such a case (sorry for self promotion), the issue is fixed in Firebug, but not in Chrome (afaik).