Multidimensional Arrays in JavaScript: Working with Nested Collections

Creating 2D Arrays 🏗️

① Literals — Write the Grid Directly ⭐

const board =[["X", "O", "X"],["O", "X", "O"],["O", "X", "O"]];

Formatting matters:one row per line makes the gridvisiblein your code. Always format 2D arrays this way — your future self will thank you. 🙏

② Programmatically — Loops Building Grids

For bigger or dynamic grids, build them:

// A 3×4 grid filled with zeros:const rows = 3, cols = 4;const grid = [];
for (let r = 0;
r < rows;
r++) {
  const row =[];
  // 🆕 a FRESH array each row!  for (let c = 0; c < cols; c++) {    row.push(0);  }  grid.push(row);}
  console.log(grid);
  // [[0,0,0,0], [0,0,0,0], [0,0,0,0]] ✅

🚨 The Famous Trap: Array.fill() with Nested Arrays

The most-hitten bug in 2D arrays:

// 💀 THE TRAP — looks innocent:const grid = new Array(3).fill(new Array(3).fill(0));
grid[0][0] = 9;
console.log(grid);
// [[9,0,0], [9,0,0], [9,0,0]] 😱 — changing row 0 changed ALL rows!

Why?Remember Lesson 5's reference trap:fill(newArray)puts thesame array referencein every slot — all three rows are literallythe same array. Three labels, one box. 📦

The fixes:

// ✅ Fix 1 — build each row fresh (like the loop above):const grid1 = Array.from({ length: 3 }, () => new Array(3).fill(0));
// ✅ Fix 2 — map creates a new inner array per row:const grid2 = [...Array(3)].map(() => Array(3).fill(0));
grid1[0][0] = 9;
console.log(grid1);
// [[9,0,0], [0,0,0], [0,0,0]] ✅ — rows are independent!

🔑 The rule:never fill an array with anarray/objectvalue viafill()— the reference gets shared. Create each inner arrayfresh(loop,map, orArray.fromcallback). This single rule prevents 90% of nested-array bugs.

Accessing & Updating: The Double Bracket 🎯

const seats =[["A1", "A2", "A3"],["B1", "B2", "B3"],["C1", "C2", "C3"]];
// 📖 Reading — [row][column]:console.log(seats[0][0]);     // "A1" — first row, first seatconsole.log(seats[2][1]);     // "C2" — third row, second seatconsole.log(seats[1]);        // ["B1","B2","B3"] — an entire row
// ✏️ Updating — same double indexing:seats[1][2] = "B3-SOLD 🎟️";console.log(seats[1]);        // ["B1", "B2", "B3-SOLD 🎟️"]

Mental model:the first bracket picks thedrawer(row), the second picks theitem in the drawer(column). 🗄️

⚠️ Safe Access with Optional Chaining

Reading a row that doesn't exist crashes at thesecondbracket:

console.log(seats[10][0]);
// ❌ TypeError — seats[10] is undefined!
console.log(seats?.[10]?.[0]);
// ✅ undefined — Lesson 6's ?. saves us

Looping Nested Arrays: The Nested Loop 🔁

One loop per dimension — the outer loop walksrows, the inner walkscolumns:

const grid =[[1, 2, 3],[4, 5, 6]];
// Classic nested for (Lesson 17!):
for (let r = 0;
r < grid.length;
r++) {
  // each row…
  for (let c = 0;
  c < grid[r].length;
  c++) {
    // …each cell in it
    console.log(`[${r}][${c}] = ${grid[r][c]}`);
  }
}

Output:

[0][0] = 1[0][1] = 2[0][2] = 3[1][0] = 4[1][1] = 5[1][2] = 6

The for…of Version (Cleaner) ✨

for (const row of grid) {
  // row = each inner array
  for (const cell of row) {
    // cell = each value inside
    console.log(cell);
  }
}

📐 Grid Anatomy — The Visualization to Memorize

column 0 column 1 column 2row 0 →[0][0][0][1][0][2]row 1 →[1][0][1][1][1][2]row 2 →[2][0][2][1][2][2]grid.length = 3(rows)grid[0].length = 3(columns in row 0)grid[r][c] = the cell at row r, column c

⚠️ Ragged rows are legal:inner arrays can differ in length ([[1,2], [3], [4,5,6]]). Always usegrid[r].length— never assume all rows match!

Real-World Pattern: Processing a Grid 📊

Sum Every Cell

const sales =[[120, 80, 95], // week 1
[200, 150, 175], // week 2
[90, 110, 130] // week 3
];
let total = 0;
for (const week of sales) {
  for (const day of week) {
    total += day;
  }
}console.log(`Total sales: ₹${total}`);
// Total sales: ₹1150 ✅

Find Something in a Grid (With Early Exit!)

const board =[["empty", "empty", "empty"],["empty", "💎", "empty"],["empty", "empty", "empty"]];
outerLoop: // 🏷️ labeled break — Lesson 19!
for (let r = 0;
r < board.length;
r++) {
  for (let c = 0;
  c < board[r].length;
  c++) {
    if (board[r][c] === "💎") {
      console.log(`Treasure at row ${r}, col ${c}! 🎉`);
      break outerLoop;
      // exit BOTH loops
    }
  }
}// Treasure at row 1, col 1! 🎉

The labeled break from Lesson 19 wasmadefor grid searches. 🎯

flat(): Turning Grids Back Into Lists 🥞

Sometimes you need the grid as one flat list —flat()flattens one level deep:

const grid =[[1, 2],[3, 4],[5, 6]];
console.log(grid.flat());
// [1, 2, 3, 4, 5, 6] ✅ — one level
// Deeper nesting? Pass a depth:
const deep =[1,[2,[3,[4]]]];
console.log(deep.flat());
// [1, 2, [3, [4]]] — one level only
console.log(deep.flat(2));
// [1, 2, 3, [4]] — two levels
console.log(deep.flat(Infinity));
// [1, 2, 3, 4] — ALL levels! ✨

flat(Infinity)— the "flatten anything" cheat code. 🏆

🛠️ Mini Project: Tic-Tac-Toe Board ⭕❌

The classic student project — fully working with real win detection:

// ⭕ Tic-Tac-Toe — a 2D array in action
function createBoard() {
  return [
    [" ", " ", " "],
    [" ", " ", " "],
    [" ", " ", " "]
  ];
}


function printBoard(board) {
  console.log("─────────");
  for (const row of board) {
    console.log(" " + row.join(" | "));   // Lesson 50/52's join! 🌉
  }
  console.log("─────────");
}


function makeMove(board, row, col, player) {
  if (board[row][col] !== " ") {
    console.log("🚫 Spot taken!");
    return false;
  }
  board[row][col] = player;
  return true;
}


function checkWinner(board) {
  const lines = [
    // rows:
    [[0,0],[0,1],[0,2]], [[1,0],[1,1],[1,2]], [[2,0],[2,1],[2,2]],
    // columns:
    [[0,0],[1,0],[2,0]], [[0,1],[1,1],[2,1]], [[0,2],[1,2],[2,2]],
    // diagonals:
    [[0,0],[1,1],[2,2]], [[0,2],[1,1],[2,0]]
  ];


  for (const line of lines) {
    const [a, b, c] = line;
    const [v1, v2, v3] = [
      board[a[0]][a[1]],
      board[b[0]][b[1]],
      board[c[0]][c[1]]
    ];
    if (v1 !== " " && v1 === v2 && v2 === v3) {
      return v1;                     // 🏆 "X" or "O" wins!
    }
  }
  return null;                       // no winner yet
}


// ▶️ Play a quick game:
const board = createBoard();
makeMove(board, 0, 0, "X");
makeMove(board, 1, 1, "O");
makeMove(board, 0, 1, "X");
makeMove(board, 2, 2, "O");
makeMove(board, 0, 2, "X");          // X completes the top row!


printBoard(board);


const winner = checkWinner(board);
console.log(winner ? `🏆 ${winner} WINS!` : "Game continues…");

Output:

─────────
 X | X | X
   | O |  
   |   | O
─────────
🏆 X WINS!

Double indexing for moves, nested loops for printing, a line-list for win checks — the complete 2D toolkit in one genuinely fun program. Extend it: alternate players, detect draws, or take real input! 🎮

Common Beginner Mistakes (And Fixes)

⚠️ The 2D copy trap deserves emphasis:

script.js

Copy Code Run Online

const copy =[...grid];
// 😱 shallow! rows are SHARED
copy[0][0] = "X";
console.log(grid[0][0]);
// "X" — the original changed too!
const deepCopy = grid.map(row =>[...row]);
// ✅ row-level copies
// or: const deepCopy = structuredClone(grid); // ✅ Lesson 14's hero

Quick Self-Check: Lesson 58 Quiz 🧠

1. What's the output?
   script.js

   Copy Code Run Online

   const g =[["a", "b"],["c", "d"]];
   console.log(g[1][0]);

2. Why doesnew Array(2).fill(new Array(2).fill(0))create a dangerous grid?
3. What's the output?
   script.js

   Copy Code Run Online

   const g =[[1, 2],[3, 4]];
   console.log(g.flat());
   console.log(g.length, g[0].length);

4. Write the nested loop that prints every cell ofgrid.
5. How do you safely readgrid[5][5]when you're not sure row 5 exists?

(Answers: 1. "c" — g[1] is the second row ["c","d"], then [0] takes its first item · 2. fill() puts the SAME array reference in every slot — all rows are one shared array, so editing one "row" edits them all; build each row fresh instead · 3. [1,2,3,4] then "2 2" — flat() merges one level; length counts rows, row.length counts columns · 4.for (const row of grid) { for (const cell of row) { console.log(cell); } }· 5.grid?.[5]?.[5]— optional chaining returns undefined instead of throwing a TypeError)