How to Create a Two-Dimensional Array in JavaScript
A two-dimensional array is an array whose elements are themselves an array.
If you think of a single array as one-dimensional, then when you put arrays inside of an array, it becomes two-dimensional.
You can also think of it as a grid, with each row being an array, and each column being an element in the row, also forming a matrix.
In this post, let's learn all the different ways you can create a two-dimensional array in JavaScript.
Using the Array Constructor
One way that you can create a two-dimensional array is to use the Array
constructor inside a for
loop.
JAVASCRIPTconst i = 3;
const j = 3;
const array = new Array(i);
for (let x = 0; x < i; x++) {
array[x] = new Array(j);
}
console.log(array);
BASH(3) [Array(3), Array(3), Array(3)]
0: (3) [empty × 3]
1: (3) [empty × 3]
2: (3) [empty × 3]
length: 3
This code created a two-dimensional array of size 3
by 3
.
Using Literal Notation
Instead of using the Array
constructor, you can use the literal notation, which consists of using brackets to initialize your array.
The difference with this approach is that you don't get to set the size of the inner array.
JAVASCRIPTconst i = 3;
const array = [];
for (let x = 0; x < i; x++) {
array[x] = [];
}
console.log(array);
BASH(3) [Array(0), Array(0), Array(0)]
0: []
1: []
2: []
length: 3
Array.from
The Array
class has a method called from
that can be used to create a two-dimensional array. This method takes anything iterable and creates a new array from it.
For our use-case we can just pass it in array and it will go through each element, and create a new array from it.
JAVASCRIPTconst i = 3;
const j = 3;
const array = Array.from({ length: i }, () => Array(j));
console.log(array);
BASH(3) [Array(3), Array(3), Array(3)]
0: (3) [empty × 3]
1: (3) [empty × 3]
2: (3) [empty × 3]
length: 3
This is a very sleek way to create a two-dimensional array because it's in one line and doesn't require any loops.
Array.map
The final way to create a two-dimensional array is to use the Array.map
method. This method takes an array or anything iterable, and iterates over it one by one, running a function on each element and replacing the element with the output.
In our case, we just want to create a new array every time it gets to a new element in the original array.
We can also use the fill()
function to initialize our array with a value.
JAVASCRIPTconst i = 3;
const j = 3;
const array = Array(i).fill().map(() => Array(j));
console.log(array);
BASH(3) [Array(3), Array(3), Array(3)]
0: (3) [empty × 3]
1: (3) [empty × 3]
2: (3) [empty × 3]
length: 3
Conclusion
In this post, we looked at all the different ways you can create a two-dimensional array in JavaScript.
Your options include using the Array
constructor, using the literal notation, using Array.from
, and using Array.map
.
Hopefully, this has been helpful to you. Thanks for reading!
- How to Install Node on Windows, macOS and Linux
- Getting Started with Electron
- How to Set Up Cron Jobs in Linux
- Best Visual Studio Code Extensions for 2022
- How to deploy a Deno app using Docker
- Getting Started with Deno
- How to deploy a MySQL Server using Docker
- Getting Started with Sass
- Learn how to use v-model with a custom Vue component
- How to Scrape the Web using Node.js and Puppeteer
- Creating a Twitter bot with Node.js
- Using Push.js to Display Web Browser Notifications