How to create a 2D array in JavaScript

JavaScript does not have built-in support two dimensional arrays. But just because are no standard library functions to create a two or multi-dimensional array doesn't mean it's not possible. Here are several different simple ways, from a one-liner to using for loops, to initialize a two dimensional array in JS.

---

Checkout @Neurture for science-backed methods to overcome social media or phone addiction!

---

In this playlist

[Az-odip]

Thank you, I was having a hard time understanding a concept in a book because of this.

[DonDirtyDan]

In 3 mins you teached me 2D-Arrays better than my prof at University in 90 minutes.

[kelofarrar]

This is EXACTLY what I needed for my project!!!! Thank you so much!

[anoopjoy]

Most elegant way to create a 2D Matrix (say, of size 5x6) and initialize in JS:

const memo = new Array(5).fill(0).map(()=>new Array(6).fill(0))

[greghumphris]

I like your explanation. I was reading some code that had the Arrow Operator. I like method 1 so that I can understand it and initialize it too. Many Thanks

[dharat]

Great, thank you
here is 5th way
// for 3 rows and 4 columns or any other 2d size array based on use case
const
console.log(myArray5);

[ZachBradyisBrachZady]

I think you've made a mistake in example #3, although it seems to be working in your terminal. What you have is:

```

const myArray3 = Array.from(Array(rows), () => new Array(columns));
```


But that doesn't fill the most deeply nested arrays with null in my case. Instead I needed to do this:

```
const myArray3 = Array.from(Array(rows), () => Array.from(new Array(columns)));
```


Curious why that may be. What's your runtime?

[adicide]

Not the most intuitive at all, but: Array.from(Array(rows), (e) => Array.apply({ length: cols })) Consult Kyle Simpson's You Don't Know JS: Types and Grammar on why apply is useful here, but generally it says to avoid creating arrays with empty slots in them (otherwise some surprising behavior with standard Array.prototype methods.

[itz-electro]

I found a new way of doing this with even less code:

new Array(10).fill(new Array(10).fill(null))
It makes a array with length of 10, and fills it with other arrays with length of ten filled with null

[danieljacobson]

If I create an array with 3 sets of brackets and each bracket has 3 items i.e.

NewArray = ["Class", "Test", 1], ["Class", "Test", 2], ["Class", "Test", 3]; and want to console .log the first set looped without brackets?

[jonattansalcedo]

Does some one knows why the output on my terminal doesn't show the 2D array the same way as on this video? If you look at minute 3:13 in the video you can see really nice the 2D array. I'm also using visual studio code and I copied the code exactly the same, but on my end it shows like this.
[
[
null, null, null,
null, null, null,
null, null
],
[
null, null, null,
null, null, null,
null, null
],

[ShaharNik]

There is a comfortable way to show this matrix in html?

[firzaarab]

if i want put
1, 2, 3, 4, 5, 6
7, 8, 9, 10, 11
12, 13, 14, 15
can you tell me for the way ?

[appsdecasa]

What about 3D arrays bro, can you help?

[ghostjavascript]

class Matrix {
constructor(width, height, element = (x, y) => undefined) {
this.width = width;
this.height = height;
this.content = [];

for (let y = 0; y < height; y++) {
for (let x = 0; x < width; x++) {
this.content[y * width + x] = element(x, y);
}
}
}

get(x, y) {
return this.content[y * this.width + x];
}
set(x, y, value) {
this.content[y * this.width + x] = value;
}
}

#FROM #ELOQUENTJAVASCRIPT