El método reduce en JavaScript no se limita a sumar números o calcular promedios. Cuando aprendes a usar un objeto como acumulador, puedes construir un histograma: una estructura que cuenta cuántas veces aparece cada elemento dentro de un array. Esta técnica es clave para reportes, conteos y agrupaciones en aplicaciones reales.
¿Qué es un histograma y por qué usar reduce para construirlo?
Un histograma es una representación que cuenta la frecuencia de aparición de cada elemento en un conjunto. Si tienes un array con animales repetidos (perro, gato, perro, loro, conejo), el histograma te dirá: tres perros, dos gatos, un loro y un conejo.
¿Qué hace reduce en JavaScript? Toma un array y lo transforma en un único valor de salida. Ese valor puede ser un número, un string o incluso un objeto, como en el caso del histograma.
La magia está en el acumulador. En vez de devolver un número, devuelves un objeto que va creciendo en cada iteración con nuevas keys y conteos.
¿Cómo funciona el algoritmo del diccionario para contar elementos?
La idea base es tratar al acumulador como un diccionario vacío {} y, en cada vuelta, preguntar si el elemento actual ya existe como key.
- Si la key no existe, la creas y le asignas el valor
1, porque es el primer voto.
- Si la key ya existe, le sumas
1 al valor actual.
- El valor inicial del reduce siempre es un objeto vacío
{}.
En código, la lógica luce así:
javascript
const votos = ['perro', 'gato', 'perro', 'loro', 'gato', 'perro', 'conejo'];
const histograma = votos.reduce((acumulador, votoActual) => {
if (acumulador[votoActual]) {
acumulador[votoActual] += 1;
} else {
acumulador[votoActual] = 1;
}
return acumulador;
}, {});
console.log(histograma);
// { perro: 3, gato: 2, loro: 1, conejo: 1 }
¿Cómo se ve la iteración paso a paso?
Si imprimes el acumulador junto con el index en cada vuelta, ves cómo se construye el objeto poco a poco [4:30].
- Iteración 0: el acumulador está vacío
{}.
- Iteración 1: aparece el primer perro y se crea
{ perro: 1 }.
- Iteración 2: aparece un gato, se agrega la key y queda
{ perro: 1, gato: 1 }.
- Iteraciones siguientes: cuando el elemento ya existe, solo se suma
+1 al contador, sin crear nuevas keys.
Ese comportamiento es el corazón del histograma: crear cuando no existe, acumular cuando ya existe.
¿Cómo aplicar reduce a un reporte de ventas por categoría?
El mismo patrón sirve para agrupar y sumar valores numéricos por categoría, no solo para contar. Imagina un array de transacciones donde cada objeto tiene id, product, category y price.
¿Cómo agrupo datos por categoría con reduce? Usa un objeto como acumulador, donde cada key es la categoría. Si la key no existe, inicialízala con el primer precio. Si existe, suma el precio actual al valor previo.
El reto consiste en construir un reporte que indique cuánto revenue generó cada categoría (tech, food, etc.) sumando los precios de todas las transacciones que pertenecen a ella.
¿Qué patrón se repite en estos casos?
- Definir el acumulador como
{} en el segundo argumento de reduce.
- Verificar si la key (categoría o elemento) ya existe en el acumulador.
- Crear la key con el valor inicial cuando es la primera vez.
- Sumar al valor existente cuando ya hay un registro previo.
Este mismo flujo lo puedes extender para guardar también la lista de productos vendidos por categoría, combinando un número y un array dentro del mismo objeto acumulador.
Conceptos clave para dominar reduce con objetos
Antes de seguir practicando, vale la pena fijar las ideas que aparecieron en el recorrido.
- Acumulador como objeto [2:10]: cuando el acumulador deja de ser un número y pasa a ser
{}, reduce gana flexibilidad para construir estructuras complejas.
- Estado inicial [2:25]: el segundo argumento de reduce define desde dónde arranca el acumulador. Para histogramas siempre es
{}.
- Diccionarios en JavaScript [3:15]: los objetos funcionan como diccionarios key-value, donde puedes agregar propiedades dinámicamente con notación de corchetes.
- Comprobación de existencia [4:00]: preguntar
if (acumulador[key]) te permite decidir entre crear o acumular.
- Histograma [0:45]: estructura que cuenta frecuencias y resume un array en un único objeto de salida.
Ahora te toca a ti: arma el reporte de ventas con las transacciones, agrupa el revenue por categoría y comparte tu solución en los comentarios.