Arrays can contain any values, including other arrays.
An array that contains other arrays is a multidimensional array.
Multidimensional arrays are used to represent tables and other grid structures.
You may have played a video game that used a tile map grid. Such maps are stored as two-dimensional arrays.
Creating a 2D array
To create a 2D array, you can first create the individual arrays that will go inside the main array:
const row1 = [1, 2, 3];
const row2 = [4, 5, 6];
const row3 = [7, 8, 9]
const grid = [row1, row2, row3];
console.log(grid);
The above example clearly shows the individual row arrays and the grid that contains each row.
We could also define the 2D grid array all at once:
const grid = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9],
];
console.log(grid);
Accessing values
Accessing values in a 2D array is much like accessing the values in a flat array.
We use bracket notation to get a value at a particular index:
- The first set of brackets will return one of the arrays inside the main array.
- The second set of brackets will return a value from that inner array.
const grid = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9],
];
const row1 = grid[0];
console.log(row1); // [1, 2, 3]
const row1cell1 = grid[0][0];
console.log(row1cell1); // 1
const row3cell2 = grid[2][1];
console.log(row3cell2); // 8
Iterate a 2D array
Iterating through all the elements of a 2D array requires two nested for loops:
const grid = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9],
];
for (let rowIndex = 0; rowIndex < grid.length; rowIndex++) {
const row = grid[rowIndex];
for (let cellIndex = 0; cellIndex < row.length; cellIndex++) {
const cell = row[cellIndex];
console.log(rowIndex, cellIndex, cell);
}
}