Métodos de Array en JavaScript: map, filter, reduce y Más (Con Ejemplos)

Los arrays son la estructura de datos fundamental en JavaScript. Ya sea que estés transformando respuestas de API, filtrando resultados de búsqueda o agregando datos de análisis, recurrirás a los métodos de array docenas de veces al día. Sin embargo, muchos desarrolladores solo rascan la superficie, confiando en bucles for cuando una solución declarativa de una sola línea sería más limpia, más rápida de leer y menos propensa a errores.

Esta guía ofrece una inmersión profunda en cada método principal de array de JavaScript, con ejemplos prácticos y del mundo real que puedes copiar en tus proyectos de inmediato.

forEach — Iterar Sin Retornar

forEach ejecuta una función de callback por cada elemento del array. No devuelve un nuevo array, lo que lo hace ideal para efectos secundarios como registrar en consola, manipular el DOM o añadir elementos a una estructura de datos externa.

const usuarios = [
  { nombre: 'Alicia', rol: 'admin' },
  { nombre: 'Bob', rol: 'editor' },
  { nombre: 'Carlos', rol: 'viewer' }
];

usuarios.forEach((usuario, indice) => {
  console.log(`${indice + 1}. ${usuario.nombre} (${usuario.rol})`);
});
// 1. Alicia (admin)
// 2. Bob (editor)
// 3. Carlos (viewer)

Detalle clave: No puedes salir de un bucle forEach antes de tiempo. Si necesitas una terminación anticipada, usa for...of o some en su lugar.

map — Transformar Cada Elemento

map crea un nuevo array aplicando una función de transformación a cada elemento. El array original nunca se modifica. Este es uno de los métodos más utilizados en React, Vue y cualquier pipeline de procesamiento de datos.

const productos = [
  { nombre: 'Teclado', precio: 75 },
  { nombre: 'Ratón', precio: 40 },
  { nombre: 'Monitor', precio: 350 }
];

// Crear cadenas listas para mostrar
const etiquetasPrecio = productos.map(
  p => `${p.nombre}: $${p.precio.toFixed(2)}`
);
// ['Teclado: $75.00', 'Ratón: $40.00', 'Monitor: $350.00']

// Extraer solo los precios
const precios = productos.map(p => p.precio);
// [75, 40, 350]

filter — Seleccionar Elementos Que Cumplen una Condición

filter devuelve un nuevo array que contiene solo los elementos para los cuales la función de callback retorna true. Es el reemplazo declarativo para las sentencias if dentro de los bucles.

const caros = productos.filter(p => p.precio > 50);
// [{ nombre: 'Teclado', precio: 75 }, { nombre: 'Monitor', precio: 350 }]

// Encadenando filter con map
const nombresCaros = productos
  .filter(p => p.precio > 50)
  .map(p => p.nombre);
// ['Teclado', 'Monitor']

reduce — Acumular en un Único Valor

reduce es la navaja suiza de los métodos de array. Itera sobre el array, pasando un acumulador a través de cada paso. El resultado puede ser un número, una cadena, un objeto o incluso otro array.

// Sumar todos los precios
const total = productos.reduce((suma, p) => suma + p.precio, 0);
// 465

// Agrupar usuarios por rol
const agrupados = usuarios.reduce((acc, usuario) => {
  acc[usuario.rol] = acc[usuario.rol] || [];
  acc[usuario.rol].push(usuario.nombre);
  return acc;
}, {});
// { admin: ['Alicia'], editor: ['Bob'], viewer: ['Carlos'] }

// Construir un mapa de búsqueda
const lookup = productos.reduce((mapa, p) => {
  mapa[p.nombre.toLowerCase()] = p.precio;
  return mapa;
}, {});
// { teclado: 75, ratón: 40, monitor: 350 }

Consejo: Siempre proporciona un valor inicial (el segundo argumento de reduce). Omitirlo hace que el primer elemento se use como acumulador inicial, lo que lleva a errores sutiles cuando el array está vacío.

find & findIndex — Localizar un Único Elemento

find devuelve el primer elemento que satisface el predicado, o undefined si ninguno coincide. findIndex devuelve el índice en su lugar, o -1.

const pedidos = [
  { id: 'PED-001', estado: 'enviado' },
  { id: 'PED-002', estado: 'pendiente' },
  { id: 'PED-003', estado: 'entregado' }
];

const pendiente = pedidos.find(o => o.estado === 'pendiente');
// { id: 'PED-002', estado: 'pendiente' }

const indicePendiente = pedidos.findIndex(o => o.estado === 'pendiente');
// 1

Ambos métodos dejan de iterar tan pronto como se encuentra una coincidencia, lo que los hace más eficientes que filter cuando solo necesitas un resultado.

some & every — Pruebas Booleanas de Array

some devuelve true si al menos un elemento cumple la prueba. every devuelve true solo si todos los elementos la cumplen. Ambos son de "corte de cortocircuito" (short-circuit) — dejan de iterar tan pronto como se determina la respuesta.

const puntuaciones = [82, 91, 76, 95, 88];

const tieneFallo = puntuaciones.some(s => s < 60);
// false

const todosAprobados = puntuaciones.every(s => s >= 70);
// true

// Práctico: comprobar si algún campo del formulario está vacío
const campos = ['Alicia', '[email protected]', ''];
const tieneVacío = campos.some(f => f.trim() === '');
// true

includes & indexOf — Comprobar Presencia

includes devuelve un booleano indicando si el array contiene un valor dado. Utiliza el algoritmo SameValueZero, lo que significa que puede detectar NaN — a diferencia de indexOf, que no puede.

const roles = ['admin', 'editor', 'viewer'];

roles.includes('admin');   // true
roles.indexOf('admin');    // 0

// Detección de NaN
[1, 2, NaN].includes(NaN);  // true
[1, 2, NaN].indexOf(NaN);   // -1 (no puede encontrar NaN)

flat & flatMap — Aplanar Arrays Anidados

flat crea un nuevo array con los elementos de sub-array concatenados hasta una profundidad especificada. flatMap combina map y flat(1) en una sola pasada, lo que es más legible y más eficiente cuando necesitas mapear y luego aplanar en un nivel.

const anidado = [[1, 2], [3, [4, 5]], [6]];

anidado.flat();    // [1, 2, 3, [4, 5], 6]  — profundidad 1
anidado.flat(2);   // [1, 2, 3, 4, 5, 6]    — profundidad 2
anidado.flat(Infinity); // aplana todos los niveles

// flatMap — dividir frases en palabras
const frases = ['hola mundo', 'foo bar baz'];
const palabras = frases.flatMap(s => s.split(' '));
// ['hola', 'mundo', 'foo', 'bar', 'baz']

// flatMap — filtrar y transformar en un solo paso
const nums = [1, 2, 3, 4, 5];
const dobles = nums.flatMap(n => n > 3 ? [n * 2] : []);
// [8, 10]  — actúa como filtro + mapa combinado

sort — Ordenar Elementos

sort ordena el array en el lugar (in place) y devuelve el array ordenado. Sin un comparador, los elementos se convierten a cadenas y se ordenan en orden Unicode — lo cual casi nunca es lo que deseas para números.

// INCORRECTO: ordenamiento por defecto de cadenas para números
[10, 9, 100].sort();
// [10, 100, 9]  — ¡ordenado como cadenas!

// CORRECTO: comparador numérico
[10, 9, 100].sort((a, b) => a - b);
// [9, 10, 100]

// Ordenar objetos por propiedad
productos.sort((a, b) => a.precio - b.precio);

// Ordenamiento de cadenas insensible a mayúsculas/minúsculas
const nombres = ['banana', 'Apple', 'cherry'];
nombres.sort((a, b) => a.localeCompare(b));
// ['Apple', 'banana', 'cherry']

Advertencia: sort modifica el array original. Si necesitas un ordenamiento inmutable, usa toSorted() (ES2023) o primero expande el array: [...arr].sort().

Nuevos Métodos que Vale la Pena Conocer (ES2023+)

Las versiones recientes de ECMAScript introdujeron contrapartes no mutables a los métodos mutables clásicos:

• toSorted() — devuelve un nuevo array ordenado sin modificar el original
• toReversed() — devuelve un nuevo array invertido
• toSpliced(inicio, eliminarCount, ...elementos) — devuelve un nuevo array con splice aplicado
• with(indice, valor) — devuelve un nuevo array con un elemento reemplazado
• findLast() / findLastIndex() — busca desde el final del array

const original = [3, 1, 4, 1, 5];

const ordenado = original.toSorted((a, b) => a - b);
// ordenado: [1, 1, 3, 4, 5]
// original: [3, 1, 4, 1, 5]  — ¡sin cambios!

const reemplazado = original.with(2, 99);
// reemplazado: [3, 1, 99, 1, 5]
// original: [3, 1, 4, 1, 5]  — ¡sin cambios!

Consideraciones de Rendimiento

Los métodos funcionales de array son expresivos y legibles, pero conllevan una sobrecarga que debes entender:

1. Encadenar crea arrays intermedios. arr.filter(...).map(...) itera el array dos veces y crea un array temporal. Para conjuntos de datos muy grandes, un solo reduce o un bucle for pueden ser significativamente más rápidos.
2. sort tiene complejidad O(n log n). Evita ordenar dentro de bucles o reordenar en cada renderizado. Memoriza los resultados ordenados cuando sea posible.
3. find y some son de corte de cortocircuito. Prefiérelos sobre filter(...)[0] o filter(...).length > 0 cuando solo necesitas comprobar la existencia de un elemento.
4. flat(Infinity) puede ser costoso. Si conoces la profundidad de anidamiento, especifícala explícitamente.
5. Evita crear funciones dentro de bucles "calientes" (hot loops). Define las funciones de callback fuera del bucle o usa referencias a funciones para una mejor optimización del JIT.

// Más lento: dos pasadas + array intermedio
const resultado = arrayGrande
  .filter(item => item.activo)
  .map(item => item.valor);

// Más rápido: una sola pasada
const resultado = arrayGrande.reduce((acc, item) => {
  if (item.activo) acc.push(item.valor);
  return acc;
}, []);

Patrones y Recetas Comunes

Eliminar Duplicados

const unicos = [...new Set([1, 2, 2, 3, 3, 3])];
// [1, 2, 3]

// Objetos únicos por clave
const usuariosUnicos = usuarios.filter(
  (usuario, i, arr) => arr.findIndex(u => u.nombre === usuario.nombre) === i
);

Dividir un Array en Trozos (Chunking)

function chunk(arr, size) {
  return Array.from(
    { length: Math.ceil(arr.length / size) },
    (_, i) => arr.slice(i * size, i * size + size)
  );
}

chunk([1, 2, 3, 4, 5], 2);
// [[1, 2], [3, 4], [5]]

Suma, Mínimo, Máximo

const numeros = [4, 2, 9, 1, 7];

const suma = numeros.reduce((a, b) => a + b, 0);   // 23
const min = Math.min(...numeros);                   // 1
const max = Math.max(...numeros);                   // 9
const prom = suma / numeros.length;                 // 4.6

Resumen

Dominar los métodos de array de JavaScript te permite escribir código más declarativo, fácil de probar y menos propenso a errores de desplazamiento (off-by-one). Comienza con los tres grandes: map, filter, reduce, y gradualmente incorpora find, some, every, flat y las variantes inmutables más nuevas de ES2023. Comprende las compensaciones de rendimiento para tomar decisiones informadas en rutas críticas y mantén tu código limpio y legible en los demás lugares.