JavaScript 2D Array

Un array bidimensional de JavaScript es un array cuyos elementos son arrays que representan filas. Usa literales anidados cuando ya conozcas los valores, o crea filas independientes con bucles, Array.from() o Array.prototype.map() cuando las dimensiones o los valores procedan de datos. Para leer una celda, usa dos índices: grid[rowIndex][columnIndex].

¿Qué es un array bidimensional en JavaScript?

JavaScript no tiene un tipo de array bidimensional independiente. Una cuadrícula es un array de arrays: el array externo contiene las filas y cada fila contiene sus celdas. Esta estructura permite representar una matriz, un tablero de juego u otros datos organizados en filas y columnas. Las filas pueden tener distintas longitudes, así que comprueba la longitud de cada fila si no tienes garantizado que la estructura sea rectangular.

Los índices de los arrays empiezan en cero. En grid[1][2], 1 selecciona la segunda fila y 2, la tercera celda de esa fila. Crear las filas y rellenar sus celdas son pasos distintos: un array recién creado puede tener posiciones sin inicializar, que no son lo mismo que celdas cuyo valor es null.

Crear un array bidimensional con literales de arrays anidados

Si la cuadrícula tiene un tamaño fijo y ya conoces sus valores, escribe cada fila como un array interno:

const grid = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

console.log(grid[0][1]);

Cada array interno es una fila distinta. La expresión grid[0][1] selecciona el valor 2: el primer índice elige una fila y el segundo, una celda de esa fila. La notación literal resulta práctica cuando ya tienes todos los datos.

Crear un array bidimensional con bucles

Usa bucles anidados cuando las dimensiones o los valores de las celdas se determinen durante la ejecución. En cada iteración del bucle externo, crea una fila nueva y luego asigna cada celda:

const rows = 3;
const columns = 3;
const grid = [];

for (let row = 0; row < rows; row++) {
  grid[row] = [];
  for (let column = 0; column < columns; column++) {
    grid[row][column] = row * columns + column + 1;
  }
}

console.log(grid);

El bucle externo crea tres filas independientes. El interno rellena cada fila con valores del 1 al 9. Si quieres que las celdas empiecen con un valor predeterminado, asígnalo dentro del bucle interno, por ejemplo, con grid[row][column] = 0.

Evita usar Array(rows).fill(Array(columns).fill(0)) para crear filas que luego modificarás: fill() repite la misma referencia a la fila, así que un cambio en una fila también se refleja en esa columna de todas las demás. En su lugar, crea una fila nueva en cada iteración del bucle externo.

Crear un array bidimensional con Array.from()

Array.from() puede crear el array externo y una fila nueva para cada índice. Su función de mapeo recibe el índice actual, por lo que puede calcular cada celda a partir de su fila y su columna:

const rows = 3;
const columns = 3;
const grid = Array.from({ length: rows }, (_, row) =>
  Array.from({ length: columns }, (_, column) => row * columns + column + 1)
);

console.log(grid);

La llamada externa crea tres filas; la interna crea y rellena cada fila con tres valores. Como el Array.from() interno se ejecuta una vez por cada índice externo, cada fila es un array independiente. Para que todas las celdas empiecen en 0, usa Array.from({ length: columns }, () => 0) en la llamada interna.

Crear un array bidimensional con Array.prototype.map()

map() transforma los elementos existentes de un array y devuelve uno nuevo. Empieza con posiciones ocupadas para que la función de retorno se ejecute en cada fila: new Array(rows) por sí solo crea posiciones dispersas, que map() omite.

const rows = 3;
const columns = 3;
const grid = Array.from({ length: rows }, (_, row) => row).map(row =>
  Array.from({ length: columns }, (_, column) => row * columns + column + 1)
);

console.log(grid);

Aquí, Array.from() crea primero una secuencia con posiciones ocupadas para los índices de las filas, y Array.prototype.map() crea una fila independiente para cada índice. La función de retorno también puede devolver una fila con valores predeterminados, por ejemplo, Array.from({ length: columns }, () => 0).

Inicializar y acceder a valores en un array bidimensional

Para leer una celda, usa grid[row][column]; para actualizarla, asigna un valor con los mismos índices, como en grid[1][2] = 42. En un array de tres filas y cuatro columnas, los índices válidos de fila van del 0 al 2, y los de columna, del 0 al 3. JavaScript no exige que las dimensiones sean rectangulares, así que la longitud de cada fila determina qué índices de columna contiene.

Para inicializar la cuadrícula con un valor común, crea una fila nueva para cada índice de fila. Por ejemplo, Array.from({ length: rows }, () => Array.from({ length: columns }, () => 0)) crea filas independientes con cada celda establecida en 0. Esto difiere de new Array(rows), que tiene posiciones dispersas, y de repetir un mismo array interno con fill().

Elige literales para valores conocidos, bucles cuando necesites controlar explícitamente la construcción, Array.from() para generar filas y celdas, y Array.prototype.map() cuando transformes una secuencia existente con posiciones ocupadas. Los cuatro métodos producen arrays anidados normales; accede a las celdas y actualízalas siguiendo el mismo orden: primero la fila y luego la columna.