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.

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

	(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.

	const i = 3;

const array = [];

for (let x = 0; x < i; x++) {
    array[x] = [];
}

console.log(array);

	(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.

	const i = 3;
const j = 3;

const array = Array.from({ length: i }, () => Array(j));

console.log(array);

	(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.

	const i = 3;
const j = 3;

const array = Array(i).fill().map(() => Array(j));

console.log(array);

	(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!

• Support Us
• Join
• Share
• Tweet
• Share