How Array.fill can break arrays!

Introduction

When working with arrays one should always be very careful in the difference between Array.from and Array.fill.

Array.fill

It is very tempting to you Array.fill as it has a much simpler syntax. However it is a nasty little beast when it comes to multi-dimensional array

Array.fill actually references the same object in memory.

What does this mean?

lets create a 5*5 multi dimensional array. This could be used for generating video games based on a cell system.

let test = new Array(5).fill(new Array(5).fill("1"))
console.log(test)

This gives us the following output:

[
  [ '1', '1', '1', '1', '1' ],
  [ '1', '1', '1', '1', '1' ],
  [ '1', '1', '1', '1', '1' ],
  [ '1', '1', '1', '1', '1' ],
  [ '1', '1', '1', '1', '1' ]
]

Everything seems pretty ok until the moment we try to modify just one cell:

test[0][1] = "5"
console.log(test)

This gives us the following output:

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

WAIT WHAT???

Well by referencing the same object in memory that means all the cells in one column will change when changing one!

Array.from to the rescue

Array.from has a more iterative approach and does not reference same objects this means we will be able to modify anything.

let fixed = Array.from({length: 5}, () => (
    Array.from({length: 5}, () => ("1"))
))
console.log(fixed)

This gives us the following output:

[
  [ '1', '1', '1', '1', '1' ],
  [ '1', '1', '1', '1', '1' ],
  [ '1', '1', '1', '1', '1' ],
  [ '1', '1', '1', '1', '1' ],
  [ '1', '1', '1', '1', '1' ]
]

For now it looks the same but if we try to modify a cell:

fixed[0][1] = "5"
console.log(fixed)

We get the following output:

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

WOHOOO

Now we can create real multi-dimensional arrays

---

Burlet Mederic
https://medericburlet.com
https://mederic.me
https://twitter.com/crimson_med