map, filter y reduce: domina los arrays en JavaScript

En el día a día de un desarrollador frontend, los arrays son una herramienta esencial. Entre sus métodos, map, filter y reduce forman un trío que permite procesar datos de forma declarativa y legible. En este artículo vamos a ver cómo funcionan, cuándo utilizarlos y algunos trucos que quizás no conozcas.

¿Qué hace `map`?

map recorre un array y devuelve uno nuevo con el mismo número de elementos, pero transformados según la función que le pases. Es ideal cuando necesitas aplicar una operación a cada ítem sin modificar el original.

const numeros = [1, 2, 3, 4];
const cuadrados = numeros.map(num => num * num);
console.log(cuadrados); // [1, 4, 9, 16]

Fíjate en que map nunca altera numeros; siempre devuelve un nuevo array, lo que ayuda a mantener la inmutabilidad.

Filtrar con `filter`

Si lo que buscas es obtener sólo los elementos que cumplen una condición, filter es tu aliado. Devuelve un array con los ítems que pasan la prueba que defines.

const usuarios = [
  {nombre: 'Ana', edad: 28},
  {nombre: 'Luis', edad: 17},
  {nombre: 'María', edad: 22}
];
const mayoresDeEdad = usuarios.filter(u => u.edad >= 18);
console.log(mayoresDeEdad);
// [{nombre:'Ana', edad:28}, {nombre:'María', edad:22}]

Al igual que map, filter devuelve un nuevo array, por lo que el array original sigue intacto.

Reducir a un único valor con `reduce`

reduce es el más potente (y a veces el más intimidante) de los tres. Te permite “reducir” un array a un solo valor, ya sea un número, un objeto o incluso otro array.

const ventas = [120, 75, 200, 95];
const total = ventas.reduce((acumulado, actual) => acumulado + actual, 0);
console.log(total); // 490

El segundo argumento de reduce es el valor inicial del acumulador (0 en el ejemplo). Si lo omites, el primer elemento del array se usa como valor inicial y el recorrido empieza en el segundo elemento.

Combinando los tres métodos

Una de las mayores ventajas es que puedes encadenarlos para crear pipelines de datos claros y expresivos. Imagina que tienes una lista de productos y quieres saber el total de los que están en oferta y cuyo precio supera los 50 €.

const productos = [
  {nombre:'Camisa', precio:45, oferta:true},
  {nombre:'Pantalón', precio:80, oferta:false},
  {nombre:'Zapatos', precio:120, oferta:true},
  {nombre:'Sombrero', precio:55, oferta:true}
];
const totalOferta = productos
  .filter(p => p.oferta && p.precio > 50)
  .map(p => p.precio)
  .reduce((sum, precio) => sum + precio, 0);
console.log(totalOferta); // 175

El código es fácil de leer: primero filtramos, luego transformamos y, por último, sumamos.

Consejos para evitar errores comunes

No modifiques el array original. Tanto map como filter y reduce devuelven nuevos arrays o valores; si modificas el original dentro de la callback, perderás la ventaja de la inmutabilidad.
Cuida el valor inicial de reduce. Olvidarlo puede producir resultados inesperados, sobre todo con arrays vacíos.
Usa nombres descriptivos. En las callbacks, item o elem están bien, pero cuando la lógica es compleja, nombres como producto o usuario mejoran la legibilidad.

Rendimiento y cuándo elegir cada método

En la mayoría de los casos la diferencia de rendimiento entre estos métodos y un bucle for tradicional es mínima y no justifica sacrificar claridad. Sin embargo, si trabajas con arrays muy grandes (decenas de miles de elementos) y necesitas máxima velocidad, vale la pena medir con performance.now() y comparar.

En resumen, map, filter y reduce son herramientas poderosas que, bien usadas, hacen tu código más declarativo, fácil de mantener y menos propenso a errores. Practícalas en tus proyectos y verás cómo tus transformaciones de datos se vuelven mucho más fluidas.

¿Qué hace map?

Filtrar con filter

Reducir a un único valor con reduce