Creating 2D arrays using new Array in Javascript

Question

I was trying out a question on Hackerrank where I needed to create an array of array (basically 2d arrays).

My go-to one liner would be const counter = new Array(4).fill([]) However, I realized that it would create a 2D array but applying any function to the array would cause it to apply to all the elements.

let count = new Array(4).fill([])
count[0].push("Test")
console.log(JSON.stringify(count))

The outcome would be all the sub-arrays having the same value of "Test" inside them.

The final solution would be:

let count = Array.from(Array(4), () => new Array());
count[0].push("Test")
console.log(JSON.stringify(count))

May I ask the reason why it's not working as expected?

Because you're filling all the arrays with the reference to the same array. — Roberto Zvjerković, Feb 25 '20 at 13:35
`.fill([])` will set all elements in the array to a reference to the array passed into fill, whereas with array.from, you're mapping each element to its own array instance — Nick Parsons, Feb 25 '20 at 13:36
The question is the answer. Arrays are referenced, not copied, when passed around. — Wyck, Feb 25 '20 at 13:38
Object's in JS are referenced, array happen to be objects too. So `var a = {x: 1}, b = a; b.x = 2;` Here `a.x` will end up being 2. Referenced object in JS can be tricky, but once you understand that one-liner, it becomes a lot clearer. — Keith, Feb 25 '20 at 13:45

Sebastian Kaczmarek · Accepted Answer · 2020-02-25T13:38:19.903

5

Because .fill() takes the argument and, if it's an object, it copies the reference to that object into every index of the new array. Since in fact [] is an object, your new array ends up being filled with references to the same array.

From the docs:

If the first parameter is an object, it will copy its reference and fill the array with references to that object.

edited Feb 25 '20 at 13:38

answered Feb 25 '20 at 13:35

Sebastian Kaczmarek

8,120
4
20
38

Does it make a shallow copy though? Doesn't it just put a direct reference to the argument, with no shallow copy? – TKoL Feb 25 '20 at 13:36
1

After seeing your edit, my comment stands: that doesn't say it makes a shallow copy, that says it copies the reference -- it's not a shallow copy at all – TKoL Feb 25 '20 at 13:37
1

@TKoL you're right, I was thinking too fast. I've updated my answer. Is it more clear now? – Sebastian Kaczmarek Feb 25 '20 at 13:39
yeah! it's better now – TKoL Feb 25 '20 at 15:28

Richard · Answer 2 · 2020-02-25T13:47:38.853

When you use Array(4).fill([]), you are actually filling count with only one array ([]). All the elements inside count refer to the same array. This is why when you alter the first element (which is also referenced by the second, third, and fourth element) and print count, count's elements all have the same array object. The same referencing scenario in fill happens to all objects, not just arrays.

Here, you can see that the second, third, and fourth element refers (denoted by /**ref:2**/) to the object with the same id (/**id:2**/) as the first element:

let count = new Array(4).fill([])
count[0].push("Test")
console.log(count)

score 2 · Answer 3 · answered Feb 25 '20 at 13:42

        .fill([]) | New Array
       +----------+------+------+------+------+
       |          |      |      |      |      |
Memory |    []    |indx0 |indx1 |indx2 |indx3 |
       |          |      |      |      |      |
       +----------+------+------+------+------+
            ^        |      |      |      |   
            |        |      |      |      |   
            +--------+      |      |      |   
            +---------------+      |      |
            +----------------------+      |
            +-----------------------------+

The four indexes are pointing to the same value in memory, so when you're pushing an element, you're doing on the same value (array) in memory.

score 1 · Answer 4 · answered Feb 25 '20 at 13:36

Let me explain:

let count = new Array(4).fill([])

Here you create just 2 arrays actually. one is [] and second contains 4 links to [].

In other words you are creating an array of 4 links to the single instance of array.

--

let count = Array.from(Array(4), () => new Array());

Here you create 5 different arrays. 4 different empty [] and array that contains 4 links, one link to each unique [].

In other words here you create array filled with a different arrays

Creating 2D arrays using new Array in Javascript

4 Answers4

Linked

Related