Introducción a Arrays Bidimensionales

Clase 67 de 80Curso de JavaScript Desde Cero

Contenido del curso

Primeros Pasos

Funciones y This

Resumen

Trabajar con estructuras de datos que van más allá de una simple lista es fundamental para resolver problemas complejos en programación. Los arrays bidimensionales permiten organizar información en filas y columnas, simulando el comportamiento de una matriz matemática. A continuación se explican las formas de crearlos, cómo acceder a sus valores y las operaciones más útiles que podemos aplicar sobre ellos.

¿Qué diferencia hay entre un array unidimensional y uno bidimensional?

Un array unidimensional es una lista plana de elementos dispuestos en una sola fila [0:30]. Por ejemplo: [1, 2, 3] tiene tres columnas y una única fila.

Un array bidimensional agrega una segunda dimensión: ahora existen múltiples filas, cada una con sus propias columnas [1:05]. En JavaScript se representa como un array que contiene otros arrays internos:

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

Para mayor claridad visual, podemos escribirlo en forma de matriz [1:35]:

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

De esta manera se distinguen con facilidad la primera, segunda y tercera fila, así como cada columna dentro de ellas.

¿Cómo asignar y acceder a valores en una matriz?

Para modificar un valor se indica la fila y la columna, ambas comenzando desde cero [2:10]. Si queremos reemplazar el 6 por un 10:

  • Las filas se cuentan: fila 0, fila 1.
  • Las columnas se cuentan: columna 0, columna 1, columna 2.

js matrix[1][2] = 10; console.log(matrix); // [[1, 2, 3], [4, 5, 10], [7, 8, 9]]

Para consultar un valor específico, utilizamos la misma notación de corchetes dobles [3:05]:

js const value = matrix[0][1]; console.log(value); // 2

El primer índice selecciona la fila y el segundo la columna.

¿Qué operaciones comunes se aplican sobre arrays bidimensionales?

¿Cómo recorrer toda la matriz con un doble for?

Un solo ciclo for recorre únicamente las filas como bloques completos. Para ingresar a cada columna dentro de cada fila necesitamos dos ciclos anidados [3:50]:

js for (let i = 0; i < matrix.length; i++) { for (let j = 0; j < matrix[i].length; j++) { console.log(matrix[i][j]); } }

  • El primer for itera sobre las filas.
  • El segundo for itera sobre las columnas de la fila actual.

Un error frecuente al copiar y pegar es olvidar cambiar la variable del contador; usar i donde debería ir j provoca un loop infinito [6:25].

¿Cómo buscar un elemento específico dentro de la matriz?

Se crea una función que recibe la matriz y el elemento a buscar. Dentro se usan los mismos dos for anidados y un condicional que compara cada posición con el valor deseado [5:10]:

js function find_element(matrix, element) { for (let i = 0; i < matrix.length; i++) { for (let j = 0; j < matrix[i].length; j++) { if (matrix[i][j] === element) { return true; } } } return false; }

console.log(find_element(matrix, 5)); // true

Si el elemento coincide, la función retorna true de inmediato. Si ninguno coincide tras recorrer toda la estructura, retorna false.

¿Cómo duplicar una matriz sin mutar la original?

Para crear una copia independiente se utiliza el spread operator (...), que copia cada fila en un nuevo array [8:00]:

js function duplicate_matrix(matrix) { const newMatrix = []; for (let i = 0; i < matrix.length; i++) { newMatrix[i] = [...matrix[i]]; } return newMatrix; }

console.log(duplicate_matrix(matrix));

  • Se inicializa newMatrix como un array vacío.
  • En cada iteración se copia la fila correspondiente con ...matrix[i].
  • Al usar el spread operator se evita la mutación de la matriz original, ya que cada fila es una referencia nueva.

Estas tres operaciones —recorrer, buscar y duplicar— conforman la base para manipular cualquier estructura bidimensional. ¿Has probado combinar estas técnicas para resolver ejercicios más complejos como rotar o transponer una matriz? Comparte tu experiencia en los comentarios.