¿Cómo usar el método reduce en Javascript?

¿Cómo funciona el método reduce() en JavaScript?

Respuesta corta: reduce() recorre un array y lo convierte en un solo valor: un número, un objeto, un string u otro array. Recibe una función con dos parámetros, el acumulador y el elemento actual, y un valor inicial. Lo que devuelve la función en cada vuelta pasa a ser el acumulador de la siguiente:

const total = [1, 2, 3, 4].reduce((acumulador, n) => acumulador + n, 0);
console.log(total); // 10

Pasa siempre el valor inicial, como el 0 del ejemplo. Sin él, reduce() falla con un array vacío y da resultados raros con arrays de objetos.

En cada vuelta, reduce() pasa el resultado anterior como acumulador. Con el valor inicial correcto, el mismo método suma, cuenta o agrupa.

Sintaxis de reduce()

array.reduce((acumulador, elementoActual, indice, array) => {
  return nuevoAcumulador;
}, valorInicial);

reduce() no modifica el array original y devuelve el valor final del acumulador.

Cómo avanza reduce() vuelta a vuelta

Así suma [5, 10, 15].reduce((acc, n) => acc + n, 0):

El resultado es 30, lo que devolvió la última vuelta.

Ejemplos de reduce() en JavaScript

Sumar el total de un carrito

const carrito = [
  { producto: "Teclado", precio: 45, cantidad: 1 },
  { producto: "Ratón", precio: 20, cantidad: 2 },
  { producto: "Monitor", precio: 180, cantidad: 1 },
];
 
const total = carrito.reduce((suma, item) => suma + item.precio * item.cantidad, 0);
console.log(total); // 265

Calcular el promedio

const notas = [7, 9, 6, 10];
const promedio = notas.reduce((suma, n) => suma + n, 0) / notas.length;
console.log(promedio); // 8

Encontrar el valor máximo

const max = [12, 45, 7, 30].reduce((mayor, n) => (n > mayor ? n : mayor), -Infinity);
console.log(max); // 45

Para números sueltos, Math.max(...array) es más corto y da el mismo resultado.

Contar cuántas veces aparece cada elemento

const votos = ["sí", "no", "sí", "sí", "abstención", "no"];
 
const conteo = votos.reduce((resultado, voto) => {
  resultado[voto] = (resultado[voto] || 0) + 1;
  return resultado;
}, {});
 
console.log(conteo); // { sí: 3, no: 2, abstención: 1 }

Agrupar objetos por una propiedad

const alumnos = [
  { nombre: "Ana", curso: "IA" },
  { nombre: "Luis", curso: "Web" },
  { nombre: "Marta", curso: "IA" },
];
 
const porCurso = alumnos.reduce((grupos, alumno) => {
  (grupos[alumno.curso] ??= []).push(alumno.nombre);
  return grupos;
}, {});
 
console.log(porCurso); // { IA: ["Ana", "Marta"], Web: ["Luis"] }

Si solo necesitas agrupar, Object.groupBy(alumnos, (a) => a.curso) lo hace en una línea y funciona en los navegadores actuales y en Node.js 21 o superior.

Aplanar un array de arrays

const plano = [[1, 2], [3], [4, 5]].reduce((todo, sub) => todo.concat(sub), []);
console.log(plano); // [1, 2, 3, 4, 5]

Hoy [[1, 2], [3], [4, 5]].flat() hace lo mismo y se lee mejor.

reduce() frente a map(), filter() y forEach()

Se combinan bien en cadena. Este ejemplo se queda con los números mayores que 4, los duplica y los suma:

const resultado = [3, 8, 12, 5]
  .filter((n) => n > 4)
  .map((n) => n * 2)
  .reduce((total, n) => total + n, 0);
 
console.log(resultado); // 50

Sumar los valores de un objeto

reduce() es un método de los arrays, no de los objetos. Convierte primero el objeto con Object.values() o Object.entries():

const ventas = { enero: 1200, febrero: 950, marzo: 1430 };
 
const total = Object.values(ventas).reduce((suma, n) => suma + n, 0);
console.log(total); // 3580

reduceRight()

reduceRight() funciona igual, pero recorre el array de derecha a izquierda:

console.log(["a", "b", "c"].reduceRight((texto, letra) => texto + letra, "")); // "cba"

Usa reduce() con IA

Un asistente como ChatGPT, Claude o GitHub Copilot escribe y explica un reduce() en segundos, pero necesita ver tus datos reales y el resultado que esperas. Estos tres prompts están listos para copiar.

1. Escribe el reduce() para tus datos

Tengo este array en JavaScript: [pega un ejemplo con 3 elementos]
Quiero obtener: [el total / un objeto agrupado por categoría / un conteo por estado]
Escríbelo con reduce() y con un valor inicial, y explícame cada vuelta.

2. Arregla un reduce() que falla

Este reduce() devuelve [undefined / NaN / "[object Object]..."] y esperaba [resultado]:
[pega tu código]
Explícame la causa y dame la corrección.

3. Hazlo más legible

Revisa este código con reduce(): [pega tu código]
Dime si se lee mejor con map(), filter(), Object.groupBy() o un bucle for...of y reescríbelo.

Comprueba la respuesta ejecutándola en la consola del navegador o en Node.js con tus datos reales.

Cuándo no usar reduce()

reduce() es potente, pero no siempre es lo más claro. Si la función ocupa muchas líneas o tienes que releerla para entenderla, un bucle for...of o una combinación de filter() y map() suele ser más fácil de mantener. Usa reduce() cuando el resultado sea de verdad un solo valor construido a partir de todo el array.

Errores comunes con reduce()

Guías relacionadas

• Cómo usar el método forEach en JavaScript
• Cómo recorrer un array en JavaScript
• Cómo usar split en JavaScript
• Cómo vaciar un array en JavaScript
• Cómo reemplazar texto en un string de JavaScript