Avoid bugs when using Array fill()

Array.fill in JavaScript is a handy method for filling an array with a single value, but it can lead to bugs if not used with caution. The reason is that the method passes objects by reference, rather than by value.

This means that if you call Array.prototype.fill(value) and value is an object, then all elements of the array will refer to the same object in memory. Any changes made to that object will be reflected in all elements of the array.

For example, consider the following code:

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

console.log(arr) // [ [], [], [], [], [] ]

arr[0].push(1)

console.log(arr) // [ [ 1 ], [ 1 ], [ 1 ], [ 1 ], [ 1 ] ]

🚨 This can be a source of bugs if you are not aware of the behavior of Array.fill with objects.