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.
📬 SUBSCRIBE: / @readwriteexercise
Code link: github.com/bradydowling/read-...
In this playlist
Part 1: • How to Flatten an Arra...
Part 2: • How to remove an eleme...
Part 3: • How to check if a stri...
Part 4: • Slice vs splice JavaSc...

[@Az-od3ip]

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

[@anoopjoy501]

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

[@kelofarrar]

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

[@DonDirtyDan]

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

[@dharat9446]

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

[@greghumphris174]

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

[@ShaharNik1]

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

[@danieljacobson5395]

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?

[@firzaarab3648]

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 ?

[@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?

[@ReadWriteExercise]

Interesting. I just tried this in the browser devtools in Firefox and it filled the nested arrays with `undefined` values. I figured this would apply the same across all Node runtimes but maybe not? I think I was running Node 8 in the video but I'm not 100% sure on that. What Node version are you running? Did you try it in a browser console as well?

[@ReadWriteExercise]

I also noticed that the video shows higher level array entries as containing . I think this means the 8 items kind of exist but are not set and therefore basically useless, especially since JavaScript arrays are dynamic in length anyway. When I try to access the items from the browser console, you're right, they're not null.
Since array length is dynamic and the values aren't set, I don't know if there's much significance to having a length on those inner arrays, aside from _feeling_ like you did a nice standard 2D array :) Thoughts?

[@bestapps4709]

What about 3D arrays bro, can you help?

[@MuhammadZeeshan-dg4ry]

thankx buddy :)

[@jonattansalcedo6924]

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
], etc......

[@NathanMunro-js3lp]

Im having the same problem. How did you fix that

[@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

[@adicide9070]

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.

[@ghostjavascript7072]

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