Initialize a two-dimensional array in JavaScript

Question

I would like to create a two-dimensional array that gets initialized with booleans which are set to false. Currently I'm using this method of array creation:

const rows = 3
const cols = 5

const nestedArray = new Array(rows).fill(
    new Array(cols).fill(false)
)

The nestedArray looks fine, but as soon as I change the value of nestedArray[0][2], the values of nestedArray[1][2] and nestedArray[2][2] also get changed.

I guess this is because the sub-arrays are identical, probably because they get filled into the parent array by reference and not by value.

What would be an elegant and efficient way of creating an array of non-identical sub-arrays instead?

Answer 1

You can use nested Array.from() calls:

const rows = 3
const cols = 5

const nestedArray = Array.from({ length: rows }, () => 
  Array.from({ length: cols }, () => false)
);
  
nestedArray[0][1] = 'value'; // example of changing a single cell
  
console.log(nestedArray);

Answer 2

You could use Array.from method to create rows where second parameter is map method, and Array.fill for columns.

const rows = 3
const cols = 5

const nestedArray = Array.from(Array(rows), _ => Array(cols).fill(false));
nestedArray[0][1] = true;
console.log(nestedArray)

Another approach would be to use spread syntax ... on rows array so you can then use map method on that array.

const rows = 3
const cols = 5

const nestedArray = [...Array(rows)].map(_ => Array(cols).fill(false))
nestedArray[0][1] = true;
console.log(nestedArray)