Arrays en JavaScript: Guía completa con ejemplos y métodos modernos

Los arrays son una de las estructuras de datos más utilizadas en JavaScript. Nos permiten almacenar colecciones ordenadas de elementos y ofrecen una gran variedad de métodos para recorrerlos, modificarlos y transformarlos fácilmente. En este artículo aprenderás a trabajar con arrays de forma efectiva y moderna, con ejemplos prácticos que puedes aplicar desde ya.

---

¿Qué es un array?

Un array es una lista ordenada de elementos. Cada elemento está en una posición específica, llamada índice, que empieza desde 0. Puedes guardar cualquier tipo de dato: números, textos, booleanos, otros arrays, objetos, etc.

let frutas = ["manzana", "banana", "cereza"];
console.log(frutas[0]); // "manzana"
console.log(frutas.length); // 3 (cantidad de elementos)

También puedes mezclar tipos:

let mezcla = ["texto", 42, true, null, [1, 2], {nombre: "Ana"}];

---

Métodos comunes para trabajar con arrays

JavaScript ofrece muchos métodos útiles para manipular arrays. Por ejemplo, si necesitas agregar elementos al final de un array puedes usar push(), mientras que si quieres eliminar el último elemento puedes usar pop(). Mira este ejemplo:

let numeros = [1, 2, 3];
numeros.push(4);  // ahora: [1, 2, 3, 4]
numeros.pop();    // vuelve a ser: [1, 2, 3]

De forma similar, si necesitas insertar elementos al principio, puedes usar unshift(), y si deseas eliminar el primero, shift() es la opción:

numeros.unshift(0);  // [0, 1, 2, 3]
numeros.shift();     // [1, 2, 3]

Cuando quieres encontrar la posición de un elemento puedes usar indexOf(), que te da el índice o -1 si no lo encuentra:

console.log(numeros.indexOf(2)); // 1

Para verificar si un valor existe dentro de un array puedes usar includes():

console.log(numeros.includes(3)); // true

Si deseas obtener una porción del array sin modificar el original, puedes utilizar slice(). Por ejemplo, para obtener los dos primeros elementos:

let copia = numeros.slice(0, 2); // [1, 2]

En cambio, si necesitas modificar el array directamente (agregar, eliminar o reemplazar elementos), puedes usar splice(). En este ejemplo reemplazamos el segundo número:

numeros.splice(1, 1, 99); // [1, 99, 3]

---

Recorrer y transformar arrays

Para recorrer los elementos puedes usar un bucle clásico for, pero también existen métodos más expresivos como forEach, map, filter, y reduce.

forEach() simplemente ejecuta una función para cada elemento. Por ejemplo:

numeros.forEach(function(n) {
  console.log(n);
});

Si quieres transformar cada valor del array y obtener un nuevo array, map() es ideal. Por ejemplo, si quieres duplicar los valores:

let dobles = numeros.map(n => n * 2); // [2, 198, 6]

Si deseas filtrar ciertos elementos, como obtener solo los números pares, puedes usar filter():

let pares = numeros.filter(n => n % 2 === 0); // [2]

Y si lo que necesitas es reducir todo el array a un solo valor (como una suma), reduce() te será muy útil:

let suma = numeros.reduce((acumulador, actual) => acumulador + actual, 0); // 103

Para encontrar un valor específico, find() devuelve el primer elemento que cumpla una condición. Por ejemplo:

let mayorAUno = numeros.find(n => n > 1); // 99

Finalmente, si solo necesitas comprobar si al menos un valor cumple cierta condición, puedes usar some(). Y si necesitas verificar si todos los elementos cumplen una condición, every() es el indicado:

numeros.some(n => n > 100);  // false
numeros.every(n => n > 0);   // true

---

Arrays de varias dimensiones

Un array puede contener otros arrays como elementos. A esto se le llama array de múltiples dimensiones o matriz. Son útiles cuando necesitas organizar datos en forma de tabla, grilla o coordenadas.

Por ejemplo, una matriz de 3×3:

let matriz = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

console.log(matriz[0][0]); // 1 (primer elemento de la primera fila)
console.log(matriz[2][1]); // 8 (segundo elemento de la tercera fila)

Puedes recorrer una matriz con bucles anidados:

for (let fila = 0; fila < matriz.length; fila++) {
  for (let columna = 0; columna < matriz[fila].length; columna++) {
    console.log(matriz[fila][columna]);
  }
}

También puedes usar métodos como forEach de forma anidada:

matriz.forEach(fila => {
  fila.forEach(valor => {
    console.log(valor);
  });
});

---

Funcionalidades modernas de arrays

Spread y rest operators

El operador spread (...) sirve para copiar arrays, combinarlos o pasarlos como argumentos. Por ejemplo:

let numeros = [1, 2, 3];
let copia = [...numeros];
let combinado = [...numeros, 4, 5];

El rest operator se usa principalmente para recoger el resto de los elementos al desestructurar:

let [primero, ...resto] = numeros;
console.log(primero); // 1
console.log(resto);   // [2, 3]

Desestructuración de arrays

Con la desestructuración, puedes extraer valores de un array fácilmente y asignarlos a variables:

let [a, b, c] = [10, 20, 30];
console.log(b); // 20

Comparación por referencia

En JavaScript, los arrays se comparan por referencia, no por valor. Esto significa que aunque dos arrays tengan los mismos valores, no serán iguales si no apuntan al mismo lugar en memoria:

let x = [1, 2];
let y = [1, 2];
console.log(x === y); // false

Verificar si una variable es un array

La función Array.isArray() te permite saber si una variable realmente es un array:

let lista = ["a", "b"];
console.log(Array.isArray(lista)); // true

Arrays vacíos y valor truthy

Un array vacío [] es considerado truthy en JavaScript, lo que puede ser confuso al principio. Por ejemplo:

let vacio = [];
if (vacio) {
  console.log("Esto se ejecuta");
}

Aunque el array esté vacío, se comporta como verdadero en una condición.

---

¿Cuándo usar arrays?

Los arrays son perfectos cuando necesitas guardar una colección de elementos del mismo tipo o con un propósito similar. Por ejemplo, una lista de nombres, productos, tareas o cualquier conjunto de valores que se puedan ordenar o recorrer.

Incluso puedes combinarlos con objetos para representar listas más complejas:

let usuarios = [
  { nombre: "Ana", edad: 28 },
  { nombre: "Luis", edad: 35 }
];

usuarios.forEach(u => console.log(u.nombre));

---