Arrays Inside Arrays

An array can contain other arrays! This is perfect for anything that's shaped like a grid: a game board, a spreadsheet, a seating plan, a map.

Here's a tic-tac-toe board:

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

console.log(board[0]);
console.log(board[1][1]);
console.log(board[2][0]);

[ 'X', 'O', 'X' ]
X
O

board[0] is the first row (itself an array). board[1][1] means "row 1, then column 1": the center square. Two sets of square brackets, two steps: first pick the row, then pick the item in that row.

To visit every square, use a nested loop (Grade 5): an outer loop for the rows and an inner loop for the columns:

for (const row of board) {
  console.log(row.join(" | "));
}

let xCount = 0;
for (let r = 0; r < board.length; r++) {
  for (let c = 0; c < board[r].length; c++) {
    if (board[r][c] === "X") {
      xCount++;
    }
  }
}
console.log(`X appears ${xCount} times.`);

X | O | X
O | X | O
O | X | X
X appears 5 times.