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
Top comments (0)