Differrent interaction of Array() constructor and using Array Literal

Question

I was using Array(n).fill([]) to initialize a dynamic 2d array and using push to insert. It kept inserting into all the sub-arrays. I cannot figure out why this is happening.

Here are the two different codes.

let n=3
let madeWithConstructor = new Array(n).fill([]);
madeWithConstructor[0].push(3);

this will insert value 3 in all sub-arrays.

let n=3
let madeWithLiteral = [];
for(let i=0;i<n;i++){
    madeWithLiteral.push([]);
}
madeWithLiteral[0].push(3);
madeWithLiteral;

this gives the desired output i.e. only the sub-array at index 0 = 3

Answer 1

The same object reference for all the indexes. The function Array.fill is using the same object for the N indexes.

You can use the function Array.from to initialize each index with different objects (Arrays).

let n = 3
let madeWithConstructor = Array.from({
  length: n
}, () => []);

madeWithConstructor[0].push(3);

console.log(JSON.stringify(madeWithConstructor))

Answer 2

The first piece of code is roughly equivalent to this:

function makeArray(len, defaultValue) {
  const arr = new Array(len);
  for (let i = 0; i < arr.length; ++i) {
    arr.push(defaultValue);
  }
  reutrn arr;
}

const arr = makeArray(n, []);

That means the same array reference is used for each index in the array.

Another way to do what you want is something like:

const arr = Array(n).fill(null).map(_ => []);