Two-dimensional array

JavaScriptJunior~3 min read

A two-dimensional array (or an array of arrays) is a data structure in which every element is itself an array. Put simply, it is a table: rows and columns, like in Excel or in a mathematical matrix. JavaScript has no separate "matrix" type; a two-dimensional array is an ordinary Array that holds other Array values.

Theory

TL;DR

A two-dimensional array is a normal array whose elements are arrays.
You reach an element through two indexes: matrix[row][column].
The first index is the row, the second is the column.
To walk over every element you use nested loops.
Build an empty matrix with Array.from, because Array(n).fill(Array(m)) gives you n references to one and the same row.
Rows may have different lengths: JavaScript does not require a rectangular shape.

Quick example

javascript

const matrix = [
  [1, 2, 3],   // row 0
  [4, 5, 6],   // row 1
  [7, 8, 9]    // row 2
];

console.log(matrix[0]);     // [1, 2, 3] - the first row
console.log(matrix[1][2]);  // 6 - second row, third column

Here matrix[0] returns the whole row [1, 2, 3], while matrix[1][2] returns one specific number from the second row and third column.

What it looks like as a table

The same array is easiest to picture as a grid:

javascript

[
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
]

	0	1	2
0	1	2	3
1	4	5	6
2	7	8	9

The row headers are the first index, the column headers are the second.

Accessing elements

javascript

console.log(matrix[0][0]); // 1
console.log(matrix[2][1]); // 8

The first index is the row, the second is the column. Order matters: matrix[2][1] and matrix[1][2] are different cells. Reading a row that does not exist gives undefined, and immediately applying a second index to it (matrix[9][0]) throws a TypeError.

Iterating over all elements

The classic way is nested loops:

javascript

for (let i = 0; i < matrix.length; i++) {
  for (let j = 0; j < matrix[i].length; j++) {
    console.log(matrix[i][j]);
  }
}

i is the row number,
j is the column number.

Note that the inner loop is bounded by matrix[i].length, not by some shared width. That is exactly what keeps the traversal correct for jagged arrays, where rows have different lengths.

The same thing with for...of reads more compactly:

javascript

for (const row of matrix) {
  for (const value of row) {
    console.log(value);
  }
}

Creating an empty matrix

javascript

const rows = 3;
const cols = 4;
const matrix = Array.from({ length: rows }, () => Array(cols).fill(0));

console.log(matrix);
/*
[
  [0, 0, 0, 0],
  [0, 0, 0, 0],
  [0, 0, 0, 0]
]
*/

Array.from calls the factory function separately for each row, so every row is a brand new array.

Where it is used and a short recap

Two-dimensional arrays are commonly used for:

storing tables and numeric matrices;
representing game boards (chess, tic-tac-toe, for example);
storing coordinate pairs (x, y);
working with images, pixels, grids and so on.

Term	Meaning
Two-dimensional array	An array where each element is an array
Indexing	`[row][column]`
Example	`matrix[1][2]` returns `6`
Typically used for	Tables, grids, coordinates, matrices

Bottom line: a two-dimensional array is a "table in code": an array made of other arrays. It lets you store data conveniently as rows and columns.

Common mistakes

Array(3).fill(Array(3).fill(0)). All three "rows" are the same reference, so matrix[0][0] = 1 changes the first column in every row. Use Array.from({ length: 3 }, () => Array(3).fill(0)) instead.
Swapped indexes. matrix[column][row] instead of matrix[row][column] gives you either the wrong value or an out-of-range read.
Hard-coded width. The condition j < matrix[0].length breaks on jagged rows; use matrix[i].length.
Treating matrix.length as the cell count. It is the number of rows, not the total number of elements.
Copying with spread. [...matrix] copies only the outer array; the nested rows stay shared. An independent copy needs matrix.map(row => [...row]).
Reading from a row that does not exist. matrix[99][0] throws a TypeError because matrix[99] is undefined; check bounds or use matrix[99]?.[0].

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.