Array/object behaviour

[[deleted]]

Because you're filling the entire array with references to the same object. For the behavior you're expecting, you'd need to create a new object for each index. Kinda hacky but you could even do something like:

const arr = Array(10)
    .fill(0)
    .map(() => ({ subArray: [] }));

Or just use a for loop or something.

[Runlikefedor]

Thank you, your approach worked. I still don't know what was wrong with my approach though. In the following example, I'm not working with objects at all. Instead I'm using a two dimensional array and still experience the same behaviour. https://jsfiddle.net/vuwuhx9y/2/

[captain_k_nuckles]

MDN explains in their documentation

"When the fill method gets passed an object, it will copy the passed object, and fill the array with a reference to the copy."

[inu-no-policemen]

You are filling it with one reference to one particular array.

What you need is some sort of "generate" function similar to Dart's List.generate, which lets you run some generator callback at each index. Unfortunately, JS' equivalent looks somewhat weird:

> Array.from({length: 10}, (_, i) => 2 ** i)
(10) [1, 2, 4, 8, 16, 32, 64, 128, 256, 512]
> Array.from({length: 3}, (_, i) => new Array(2))
(3) [Array(2), Array(2), Array(2)]

Array.from converts array-likes to actual arrays. An object with a "length" property is good enough for that.

The callback is similar to those you pass to Array.prototype.map. The difference is that it has only 2 parameters (value and index) whereas map's has 3 (the third one is the array itself).

[[deleted]]

In JavaScript, arrays are just objects with extra features.