Pushing to one element in a nested array is adding to all elements in javascript-CodePudding

I am creating a prefilled nested array and want to push elements to specific indexes, but the elements are being added to all indexes.

let arr = new Array(4).fill([])
arr => Array(4) [ [], [], [], [] ] //this is what I want
arr[0].push(3)
arr => Array(4) [ [3], [3], [3], [3] ] //I only wanted to push 3 to first index,
//why do all indexes have this element?

Any help on how to just update one index would be appreciated.

CodePudding user response：

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

This is creating arr as an array of four references to the same array ([] passed as argument). Thus, modifying any of the references modifies the underlying array, and since it's referenced by all of them, you will notice this when logging the object.

> arr[0] === arr[1]
< true

Just use a good ol' for, or even simply [[],[],[],[]] if we are just talking about 4 elements.

let arr = new Array(4)

for (let i = 0; i < arr.length; i  )
    arr[i] = new Array()

> arr[0] === arr[1]
< false

CodePudding user response：

This initialization method gives an array of length 4 with an empty array in each element:

[...Array(4)].map(() => []); // [[], [], [], []]

or for example you can use

[...Array(4)].map((_, i) => i); // and get [0, 1, 2, 3]