JavaScript Two-Dimensional Arrays

A two-dimensional JavaScript array is an array whose elements are themselves arrays. You can treat the outer index as a row and the inner index as a column.

const matrix = [
  ["A1", "A2", "A3"],
  ["B1", "B2", "B3"]
];

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

JavaScript does not have a separate built-in matrix type, so rows can have different lengths unless your code enforces a rectangular shape.

Create a Two-Dimensional Array Top ↑

The literal form is usually clearer than repeatedly calling new Array().

const details = [
  ["Example 1", "Example 2", "Example 3"],
  ["Example 4", "Example 5"]
];

This preserves the original page's intentionally different row lengths.

Access and Update a Value by Row and Column Top ↑

const details = [
  ["Example 1", "Example 2", "Example 3"],
  ["Example 4", "Example 5"]
];

console.log(details[0][2]); // Example 3
details[1][0] = "Updated";
console.log(details[1][0]); // Updated

Display a Two-Dimensional Array with Nested for Loops Top ↑

const details = [
  ["Example 1", "Example 2", "Example 3"],
  ["Example 4", "Example 5"]
];

for (let row = 0; row < details.length; row++) {
  for (let col = 0; col < details[row].length; col++) {
    console.log(details[row][col]);
  }
}

The important improvement over using fixed limits such as col <= 2 is that every row uses its own length. This avoids the undefined value shown by the original fixed-size loop when a shorter row is encountered.

Use Each Row's length Safely Top ↑

for (let row = 0; row < details.length; row++) {
  console.log(`Row ${row} has ${details[row].length} values`);
}

For rectangular matrices you may know the column count in advance, but row-specific length is safer when data may be jagged.

Loop Through Nested Arrays with for...of Top ↑

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

This is concise when you need values rather than numeric indexes.

Jagged Arrays: Rows Can Have Different Lengths Top ↑

const jagged = [
  [1, 2, 3],
  [4],
  [5, 6]
];

console.log(jagged[1].length); // 1

A jagged array is valid JavaScript. Your loop should not assume every row has the same number of columns unless your data model guarantees it.

Add Rows or Values with push() Top ↑

const matrix = [[1, 2], [3, 4]];
matrix.push([5, 6]);
matrix[0].push(99);

console.log(matrix); // [[1, 2, 99], [3, 4], [5, 6]]

See push() for mutation and return-value details.

Create a Rectangular Matrix with a Chosen Size Top ↑

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

console.log(matrix);

Each callback call creates a separate row array.

Avoid the Shared-Row fill() Mistake Top ↑

This looks compact but creates multiple references to the same inner array:

const bad = Array(3).fill(Array(2).fill(0));
bad[0][0] = 9;
console.log(bad); // [[9, 0], [9, 0], [9, 0]]

Use Array.from(..., () => ...) as shown above to create independent rows.

Transform Every Value in a Two-Dimensional Array Top ↑

const matrix = [[1, 2], [3, 4]];
const doubled = matrix.map((row) => row.map((value) => value * 2));

console.log(doubled); // [[2, 4], [6, 8]]

Copy a Two-Dimensional Array Top ↑

A top-level spread is not enough if you want separate row arrays.

const matrix = [[1, 2], [3, 4]];
const shallowTop = [...matrix];
const copiedRows = matrix.map((row) => [...row]);

console.log(shallowTop[0] === matrix[0]); // true
console.log(copiedRows[0] === matrix[0]); // false

For nested objects deeper than simple rows of primitives, choose a cloning approach that matches the data you actually need to duplicate.

Common Two-Dimensional Array Mistakes Top ↑

• Using fixed inner-loop limits and producing undefined on shorter rows.
• Forgetting the second index: matrix[row][column].
• Creating shared rows with Array(rows).fill(sameArray).
• Assuming [...matrix] deeply copies each row.
• Assuming JavaScript enforces equal row lengths.

Two-Dimensional Array Demo Top ↑

Open 2D Array Demo → JavaScript for Loop → Array length → Display Array Elements →

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: