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?

Possible Duplicate stackoverflow.com/questions/18163234/…

Steve P
– Steve P

2018-04-24 13:14:21 +00:00
Commented Apr 24, 2018 at 13:14 — Steve P
– Steve P, Commented Apr 24, 2018 at 13:14
Why dont you try using json?

Mithun Shreevatsa
– Mithun Shreevatsa

2018-04-24 13:16:43 +00:00
Commented Apr 24, 2018 at 13:16 — Mithun Shreevatsa
– Mithun Shreevatsa, Commented Apr 24, 2018 at 13:16

Ori Drori · Accepted Answer · 2018-04-24 13:13:51Z

10

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);

answered Apr 24, 2018 at 13:13

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nenad Vracar · Accepted Answer · 2018-04-24 13:24:44Z

5

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)

edited Apr 24, 2018 at 13:24

answered Apr 24, 2018 at 13:14

Nenad Vracar

122k16 gold badges160 silver badges184 bronze badges

Comments

lavalade · Accepted Answer · 2021-04-02 17:47:20Z

1

Quite similar to Ori Drori answer, but a little bit shorter :

const rows = 3;
const cols = 5;

const nestedArray = Array.from({length: rows}, () => Array(cols).fill(false));
nestedArray[1][2] = true;
console.log(nestedArray);

answered Apr 2, 2021 at 17:47

lavalade

3682 silver badges11 bronze badges

Comments

Dheeraj Kumar · Accepted Answer · 2018-04-24 13:27:40Z

0

const nestedArray = Array(rows).fill(false).map(x => Array(cols).fill(false))

try this one

edited Apr 24, 2018 at 13:27

answered Apr 24, 2018 at 13:26

Dheeraj Kumar

1292 silver badges15 bronze badges

1 Comment

Erty Seidohl Over a year ago

While this answer is probably correct and useful, it is preferred if you include some explanation along with it to explain how it helps to solve the problem. This becomes especially useful in the future, if there is a change (possibly unrelated) that causes it to stop working and users need to understand how it once worked.

Klaimmore · Accepted Answer · 2018-04-24 13:28:13Z

0

Maybe something like:

const rows = 3
const cols = 5

const nestedArray = new Array(rows).fill(0);

nestedArray.forEach((e, i, a) => a[i] = new Array(cols).fill(false));

console.log(nestedArray);

First, initialize the array with dummy values
Then, for each position initialize another nested array

answered Apr 24, 2018 at 13:28

Klaimmore

6901 gold badge6 silver badges16 bronze badges

Comments

zajer · Accepted Answer · 2021-05-06 12:27:04Z

0

There are already a lot of answers but maybe someone find this one more readable:

let rows = 3;
let columns = 5;
let rowTemplate = Array(columns).fill(false);
let matrix = Array.from(Array(rows), () => [...rowTemplate]);

matrix[1][3] = true;
/*
[
  [ false, false, false, false, false ],
  [ false, false, false, true, false ],
  [ false, false, false, false, false ]
]
*/

answered May 6, 2021 at 12:27

zajer

8428 silver badges20 bronze badges

Collectives™ on Stack Overflow

Initialize a two-dimensional array in JavaScript

6 Answers 6

Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related