Cómo usar reduce() en JavaScript con ejemplos

map() transforma. filter() selecciona. ¿Y cuándo necesitas calcular un total, encontrar el máximo, o combinar todos los elementos en uno solo? Para eso existe reduce().

¿Qué hace reduce()?

reduce() recorre un array y lo "reduce" a un único valor. En cada paso, toma el resultado acumulado hasta ese punto y el elemento actual, y devuelve un nuevo acumulado.

Sintaxis

const resultado = array.reduce(function(acumulador, elemento) {
  return nuevoAcumulador;
}, valorInicial);

• acumulador: el valor que va creciendo en cada paso
• elemento: el elemento actual del array
• valorInicial: el valor con el que empieza el acumulador

Ejemplo 1: sumar todos los números

const numeros = [10, 20, 30, 40];

const suma = numeros.reduce((acc, n) => acc + n, 0);

console.log(suma); // 100

Paso a paso:

• Inicio: acc = 0
• Paso 1: 0 + 10 = 10
• Paso 2: 10 + 20 = 30
• Paso 3: 30 + 30 = 60
• Paso 4: 60 + 40 = 100

Ejemplo 2: calcular el total de una compra

const carrito = [
  { producto: 'Café', precio: 2500 },
  { producto: 'Sándwich', precio: 3800 },
  { producto: 'Jugo', precio: 1800 },
];

const total = carrito.reduce((acc, item) => acc + item.precio, 0);

console.log(total); // 8100

Ejemplo 3: encontrar el valor máximo

const precios = [15000, 8000, 42000, 3500, 27000];

const maximo = precios.reduce((max, precio) => {
  return precio > max ? precio : max;
}, 0);

console.log(maximo); // 42000

Cuándo usar reduce vs map/filter

Errores frecuentes

Olvidar el valor inicial: Si no especificas el valor inicial (el segundo argumento), reduce usa el primer elemento como acumulador inicial. Esto puede causar bugs cuando el array está vacío — obtendrás un error.

Resultado inesperado por no retornar: Dentro de reduce, si olvidas el return (con llaves {}), el acumulador se vuelve undefined en la siguiente iteración.

Sobre-usar reduce: reduce puede hacer casi todo, pero a veces un for o una combinación de map + filter es más legible. Prioriza la claridad.