Teoría: Arrays anidados

Hasta ahora, has trabajado con arrays simples en JavaScript. Pero ¿sabías que un array puede contener otros arrays como elementos? A esto se le llaman arrays anidados.

Este concepto es muy útil en casos como representar una cuadrícula en un juego, almacenar datos en estructuras más complejas o incluso en cálculos matemáticos.

Crear arrays anidados

Para definir un array dentro de otro, simplemente colocamos otro array como elemento:

const arr1 = [[3]];
console.log(arr1.length); // 1

Aquí, arr1 es un array que contiene otro array con el número 3 dentro.

⏬ Veamos un ejemplo más grande:

const arr2 = [
  1,        // Primer elemento (un número)
  [3, 2],   // Segundo elemento (otro array)
  [3, [4]], // Tercer elemento (otro array con un array dentro)
];

console.log(arr2.length); // 3

Cada elemento que es un array cuenta como una sola unidad dentro del array principal.

Puedes verlo de otra manera:

No hay un límite para la cantidad de anidación: puedes tener arrays dentro de arrays, dentro de más arrays...

Acceder a elementos en arrays anidados

Acceder a los elementos en arrays anidados es parecido a los arrays normales, pero usamos varios índices:

const arr1 = [[3]];
console.log(arr1[0][0]); // 3

Así funciona:

1. arr1[0] accede al primer (y único) elemento de arr1, que es [3].
2. arr1[0][0] accede al primer elemento dentro de ese array, que es 3.

Ahora un ejemplo con más niveles de anidación:

const arr2 = [
  1,
  [3, 2],
  [3, [4]],
];

console.log(arr2[2]);       // [3, [4]]
console.log(arr2[2][1]);    // [4]
console.log(arr2[2][1][0]); // 4

Aquí, cada índice adicional entra más profundo dentro del array.

Modificar y agregar elementos a arrays anidados

Modificar elementos

const arr1 = [[3]];
arr1[0] = [2, 10];

console.log(arr1); // [[2, 10]]

Aquí, reemplazamos el único elemento de arr1 con otro array diferente.

También podemos modificar valores internos:

const arr1 = [[3]];
arr1[0][0] = 5;

console.log(arr1); // [[5]]

Agregar nuevos elementos:

Podemos usar .push() para agregar al final de un array anidado:

const arr1 = [[3]];
arr1[0].push(10);

console.log(arr1); // [[3, 10]]

También podemos agregar una nueva fila:

const arr1 = [[3]];
arr1.push([3, 4, 5]);

console.log(arr1); // [[3], [3, 4, 5]]

Aplicación Real: Tablero de Tres en Raya

Podemos usar arrays anidados para representar un tablero de Tres en Raya (Tic-Tac-Toe). Vamos a crear un tablero vacío y simular una jugada:

const field = [
  [null, null, null],
  [null, null, null],
  [null, null, null],
];

field[1][2] = 'x';

console.log(field);

// [
//   [null, null, null],
//   [null, null, 'x'],
//   [null, null, null],
// ]

Verificando si hay un movimiento en el tablero

Ahora crearemos una función que verifique si un jugador (con el símbolo 'x' o 'o') ha realizado al menos un movimiento:

const hasPlayerMove = (field, symbol) => {
  for (const row of field) {
    if (row.includes(symbol)) {
      return true;
    }
  }

  return false;
};

¿Cómo funciona?

1. Recorremos el field, donde cada elemento es una fila del tablero.
2. Usamos .includes(symbol) para revisar si el símbolo aparece en alguna fila.
3. Si encontramos el símbolo, retornamos true.
4. Si terminamos de revisar todas las filas y no encontramos nada, retornamos false.

Probemos:

console.log(hasPlayerMove(field, 'x')); // true
console.log(hasPlayerMove(field, 'o')); // false