map, filter y reduce: domina los arrays en JavaScript

En el día a día de un desarrollador frontend, los arrays aparecen en cualquier sitio: desde la respuesta de una API hasta los datos que muestra la UI. Saber manipularlos de forma declarativa con map, filter y reduce te ahorra bucles verbosos y hace que el código sea más legible. En este artículo repasaremos cada método, cuándo conviene utilizarlos y algunos trucos para combinarlos sin perder claridad.

¿Qué hace map?

map crea un nuevo array transformando cada elemento del original mediante una función que tú defines. Es ideal cuando necesitas aplicar la misma operación a todos los ítems, por ejemplo convertir precios de centavos a euros.

const preciosCent = [1200, 3400, 560];
const preciosEuro = preciosCent.map(p => p / 100);
// preciosEuro = [12, 34, 5.6]

Observa que map nunca modifica el array origen; siempre devuelve uno nuevo, lo que encaja perfectamente con el estilo inmutable que favorecemos en React o Vue.

Filtrar con filter

Cuando lo que buscas es quedarte solo con los elementos que cumplen una condición, filter es tu aliado. La función que pases debe devolver true para los ítems que quieras conservar.

const usuarios = [
  {nombre: 'Ana', activo: true},
  {nombre: 'Luis', activo: false},
  {nombre: 'Marta', activo: true}
];
const activos = usuarios.filter(u => u.activo);
// activos = [{nombre:'Ana',activo:true},{nombre:'Marta',activo:true}]

Al igual que map, filter devuelve un nuevo array y mantiene el original intacto.

Acumular datos con reduce

Si necesitas combinar todos los elementos en un único valor –una suma, un objeto, una cadena concatenada– reduce es la herramienta adecuada. Recibe una función reductora y un valor inicial para el acumulador.

const ventas = [120, 80, 250, 40];
const total = ventas.reduce((acum, v) => acum + v, 0);
// total = 490

En el ejemplo anterior, acum empieza en 0 y va sumando cada venta. Pero reduce puede hacer mucho más: agrupar por categorías, crear índices de búsqueda, etc.

Combinar los tres métodos

Una de las grandes ventajas de estos métodos es que se pueden encadenar de forma fluida. Imagina que tienes un listado de pedidos y quieres saber el total de los que superan los 100 € después de aplicar un descuento del 10 %.

const pedidos = [
  {id:1, importe:150},
  {id:2, importe:90},
  {id:3, importe:200}
];
const totalDescuento = pedidos
  .filter(p => p.importe > 100)
  .map(p => p.importe  0.9)
  .reduce((sum, v) => sum + v, 0);
// totalDescuento = 315

El flujo es claro: primero filtramos, luego transformamos y, por último, acumulamos. Cada paso devuelve un nuevo array, lo que mantiene la inmutabilidad y facilita la depuración.

Rendimiento y buenas prácticas

En la mayoría de los casos la legibilidad gana sobre micro‑optimizaciones, pero hay situaciones donde el coste de crear varios arrays intermedios puede ser relevante (por ejemplo, con millones de elementos). En esos casos, considera usar un único reduce que implemente la lógica completa.

const totalDescuento = pedidos.reduce((sum, p) => {
  if (p.importe > 100) {
    return sum + p.importe  0.9;
  }
  return sum;
}, 0);

Así evitamos los arrays temporales de filter y map. Otra práctica útil es evitar funciones anónimas demasiado complejas dentro de los callbacks; extrae lógica a funciones con nombres descriptivos para que el stack trace sea más claro.

Conclusión

Dominar map, filter y reduce te permite escribir código más declarativo, menos propenso a errores y más fácil de testear. Recuerda que todos devuelven nuevos arrays (o valores) y que, cuando el rendimiento sea crítico, puedes combinar la lógica en un único reduce. Practica con datos reales de tus proyectos y verás cómo estos métodos se convierten en una segunda naturaleza al trabajar con JavaScript.