Map, filter y reduce en JavaScript: diferencias con ejemplos

Map, filter y reduce en JavaScript resuelven tareas diferentes: map transforma elementos, filter selecciona los que cumplen una condición y reduce acumula un resultado. Elegir el método según lo que necesitas devolver suele simplificar el código.

Utilizaremos una lista pequeña de productos para que puedas comparar las tres operaciones con los mismos datos.

const productos = [
  { nombre: "Cuaderno", precio: 8, disponible: true },
  { nombre: "Mochila", precio: 30, disponible: false },
  { nombre: "Lápiz", precio: 2, disponible: true }
];

Map: crear un array transformado

const nombres = productos.map(producto => producto.nombre);
console.log(nombres); // ["Cuaderno", "Mochila", "Lápiz"]

Map crea un nuevo array con el resultado de cada callback sobre las posiciones presentes. En un array denso como el del ejemplo, conserva el número de elementos. No sirve para eliminar elementos devolviendo undefined: eso introduce ese valor en el resultado.

Filter: conservar elementos que cumplen una condición

const disponibles = productos.filter(producto => producto.disponible);
console.log(disponibles.map(producto => producto.nombre));
// ["Cuaderno", "Lápiz"]

Filter evalúa el callback y conserva el elemento original si el resultado es verdadero en sentido booleano. Puede devolver un array vacío. Si solo necesitas el primer elemento coincidente, find expresa mejor esa intención.

Reduce: calcular un resultado acumulado

const total = productos.reduce((acumulado, producto) => {
  return acumulado + producto.precio;
}, 0);
console.log(total); // 40

El cero final es el valor inicial. Evita depender del primer elemento como acumulador cuando necesitas sumar precios y manejar arrays vacíos. Reduce sin valor inicial lanza un error si no hay ningún elemento utilizable.

Cómo combinar los métodos

const totalDisponible = productos
  .filter(producto => producto.disponible)
  .reduce((total, producto) => total + producto.precio, 0);

console.log(totalDisponible); // 10

La cadena primero selecciona productos y después suma. Es legible para esta tarea, aunque crea una colección intermedia. En recorridos muy grandes o críticos, mide antes de decidir entre una cadena, un bucle u otra estrategia.

¿Estos métodos modifican el array original?

Map y filter crean arrays nuevos, pero eso no significa una copia profunda de los objetos. Filter conserva referencias a los productos originales. Map también puede devolver la misma referencia o modificar un objeto si lo haces dentro del callback.

const nuevosPrecios = productos.map(producto => ({
  ...producto,
  precio: producto.precio + 1
}));

Este ejemplo crea objetos nuevos a un nivel. Si contienen propiedades anidadas, esas referencias requieren atención adicional.

Cómo elegir rápidamente

• Quiero una versión transformada de cada elemento: map.
• Quiero un subconjunto de la lista: filter.
• Quiero un total o una acumulación: reduce.
• Solo quiero ejecutar una acción: considera forEach o un bucle.

Errores frecuentes

En un callback con llaves necesitas devolver el resultado. Otro error habitual es utilizar async dentro de map y tratar el array de promesas como si contuviera valores resueltos. Para ese caso necesitas coordinar la resolución, por ejemplo con Promise.all cuando las operaciones puedan concurrir.

Preguntas frecuentes

¿Reduce siempre devuelve un número?

No. Puede acumular otros tipos de valores. Elige la estructura que haga comprensible el código.

¿Filter elimina datos del servidor?

No. Solo produce una selección en memoria. No borra registros remotos.

Practica añadiendo un producto no disponible. Para mostrar la lista en pantalla, repasa cómo funciona el DOM.

Referencia técnica: documentación de MDN.