Arrays en JavaScript: métodos, ejemplos y ejercicios

Un array se escribe entre corchetes. Los índices empiezan en 0 y la propiedad length indica cuántos elementos tiene. Para leer desde el final, at() acepta índices negativos.

const colores = ["rojo", "verde", "azul"];

colores[0];      // "rojo"
colores.length;  // 3
colores.at(-1);  // "azul"
colores[5];      // undefined (no lanza error)

A diferencia de otros lenguajes, leer una posición que no existe no produce un error: devuelve undefined. Eso hace que algunos errores pasen inadvertidos hasta más adelante.

Estos métodos modifican el array original (lo mutan):

const numeros = [1, 2, 3];

numeros.push(4);      // agrega al final        → [1, 2, 3, 4]
numeros.pop();        // quita el último (4)    → [1, 2, 3]
numeros.unshift(0);   // agrega al principio    → [0, 1, 2, 3]
numeros.shift();      // quita el primero (0)   → [1, 2, 3]

const letras = ["a", "b", "c", "d", "e"];
letras.splice(1, 2);      // desde la posición 1 quita 2: devuelve ["b", "c"]
// letras → ["a", "d", "e"]
letras.splice(1, 0, "x"); // en la posición 1 quita 0 e inserta "x"
// letras → ["a", "x", "d", "e"]

Declarar un array con const no lo vuelve inmutable: const impide reasignar la variable, pero push, pop o splice siguen funcionando sobre el mismo array.

const colores = ["rojo", "verde", "azul"];

for (const color of colores) {
  console.log(color);
}

colores.forEach((color, i) => {
  console.log(i, color);
});

for...of es la opción más simple y permite usar break. forEach entrega también el índice, pero no se puede detener a la mitad y no devuelve nada: sirve para hacer algo con cada elemento, no para transformar el array.

Estos métodos no modifican el array original: reciben una función y devuelven un resultado nuevo. Son la base de la mayoría del código que trabaja con listas de datos.

const precios = [1200, 3500, 800, 5000];

// map: aplica la función a cada elemento y devuelve un array del mismo largo
precios.map((p) => Math.round(p * 1.19));  // [1428, 4165, 952, 5950]

// filter: se queda con los elementos para los que la función devuelve true
precios.filter((p) => p > 1000);           // [1200, 3500, 5000]

// find: devuelve el primer elemento que cumple (o undefined)
precios.find((p) => p > 3000);             // 3500
precios.findIndex((p) => p > 3000);        // 1

// some / every: ¿alguno cumple? ¿todos cumplen?
precios.some((p) => p < 1000);             // true
precios.every((p) => p < 1000);            // false
precios.includes(800);                     // true

Para copiar o unir arrays sin modificar el original sirven slice() y el operador spread: precios.slice(1, 3) devuelve [3500, 800] y [...precios, 200] crea un array nuevo con un elemento más.

reduce recorre el array llevando un acumulador. La función recibe el acumulado hasta ahora y el elemento actual, y devuelve el nuevo acumulado. El segundo argumento es el valor inicial.

const precios = [1200, 3500, 800, 5000];

const total = precios.reduce((acumulado, p) => acumulado + p, 0);
// total → 10500

Pasa siempre el valor inicial. Sin él, reduce usa el primer elemento como acumulador y, si el array está vacío, lanza TypeError: Reduce of empty array with no initial value.

sort() ordena el array original y, si no le pasas una función de comparación, convierte todo a texto y ordena alfabéticamente. Con números, el resultado sorprende:

[10, 9, 1, 100].sort();                  // [1, 10, 100, 9]
[10, 9, 1, 100].sort((a, b) => a - b);   // [1, 9, 10, 100]
[10, 9, 1, 100].sort((a, b) => b - a);   // [100, 10, 9, 1]

La función de comparación devuelve un número negativo si a va antes, positivo si va después y 0 si da igual. Si no quieres modificar el original, toSorted() hace lo mismo pero devuelve un array nuevo.

Usar sort() sin función de comparación

Olvidar el return dentro de map

[1, 2, 3].map((n) => { n * 2; });         // [undefined, undefined, undefined]
[1, 2, 3].map((n) => { return n * 2; });  // [2, 4, 6]
[1, 2, 3].map((n) => n * 2);              // [2, 4, 6]

Usar forEach para transformar

Comparar arrays con ===

Ejercicios resueltos

Intenta resolver cada ejercicio antes de abrir la solución: equivocarse y corregir es la parte que más enseña.