Introduction

JavaScript does not have a built-in matrix type for everyday array work, so a two-dimensional array is usually just an array of row arrays. The important part is not only how to create it, but how to avoid accidentally making every row refer to the same inner array.

Create a Two-Dimensional Array with Literals

If the values are known up front, the clearest solution is an array literal.

1const grid = [
2  [1, 2, 3],
3  [4, 5, 6],
4  [7, 8, 9]
5];
6
7console.log(grid[0][1]);

This is ideal for small fixed examples, test data, and board layouts that are easy to see directly in code.

Build It Dynamically with Array.from

When row and column counts come from variables, create each row separately.

1const rows = 3;
2const cols = 4;
3
4const matrix = Array.from({ length: rows }, () => Array(cols).fill(0));
5
6console.log(matrix);

This is one of the safest modern patterns because the callback creates a new inner array for every row.

Use Loops When Initialization Logic Is Custom

If each cell depends on row and column position, nested loops are often clearer than compressing everything into one expression.

1const rows = 3;
2const cols = 3;
3const board = [];
4
5for (let r = 0; r < rows; r++) {
6  board[r] = [];
7  for (let c = 0; c < cols; c++) {
8    board[r][c] = r * cols + c;
9  }
10}
11
12console.log(board);

This is also the easiest style to adapt when the default value is not constant.

Avoid the Shared-Row Trap

A common mistake is using fill with an array directly.

const bad = Array(3).fill(Array(3).fill(0));
bad[0][0] = 99;
console.log(bad);

All rows change because every row points to the same inner array object. The correct version creates a fresh row each time.

const good = Array.from({ length: 3 }, () => Array(3).fill(0));
good[0][0] = 99;
console.log(good);

That difference matters in grids, games, and table editing logic.

Access, Update, and Iterate Over the Data

You read and write cells using two indexes: one for the row and one for the column.

1const scores = [
2  [10, 20],
3  [30, 40]
4];
5
6scores[1][0] = 35;
7console.log(scores[1][0]);

Iteration normally uses nested loops or higher-order array methods.

1for (const row of scores) {
2  for (const value of row) {
3    console.log(value);
4  }
5}

Choose the style that fits the transformation you need. Simple traversal often reads better with loops.

Consider Whether an Array of Objects Is Better

Not every table-like problem should use a numeric grid. If each row has named fields, an array of objects may be easier to maintain than a two-dimensional array where column meaning is implicit.

Two-dimensional arrays work best when the row-column structure itself is the core data model, such as matrices, boards, and pixel-like grids.

Common Pitfalls

• Using Array(rows).fill(Array(cols).fill(value)) and accidentally sharing every row.
• Forgetting that row lengths can differ, because JavaScript arrays do not enforce rectangular shape.
• Choosing a matrix when an array of objects would make the data meaning clearer.
• Accessing indexes without checking bounds in dynamic grid code.
• Hiding custom initialization logic in one dense expression that is hard to debug later.

Summary

• A two-dimensional array in JavaScript is an array of arrays.
• Use literals for fixed data and Array.from for dynamic rectangular grids.
• Create each row separately to avoid shared references.
• Use nested loops when initialization depends on row and column position.
• Pick a different data structure when the data is record-shaped rather than grid-shaped.