Cómo crear un histograma con reduce

Curso de Manipulación Avanzada de Datos con JavaScript

Contenido del curso

No sé dónde empezar

Grabacion

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:007:32

Cómo crear un histograma con reduce

Curso de Manipulación Avanzada de Datos con JavaScript

Clase 12 de 24

Clase 12 / 24

Recursos

El método reduce en JavaScript va mucho más allá de sumar números o calcular promedios. También puedes usarlo para crear un histograma, es decir, contar cuántas veces aparece cada elemento dentro de un array. Es una técnica clave para quienes trabajan con arrays de objetos y necesitan agrupar información de forma dinámica.

¿Qué es un histograma y cómo se construye con reduce?

Un histograma es una estructura que cuenta la frecuencia con la que aparece cada elemento en un conjunto de datos. Piensa en un array con animalitos repetidos: perritos, gatitos, un loro y un conejo. El objetivo es transformar ese array en un objeto que diga cuántos hay de cada uno.

Aquí es donde reduce se vuelve poderoso. Su magia está en tomar un array completo y reducirlo a un solo valor, que en este caso no es un número, sino un objeto que funciona como diccionario.

¿Qué devuelve reduce cuando construyes un histograma? Devuelve un único objeto donde cada clave es un elemento del array y cada valor es la cantidad de veces que aparece. Por ejemplo: { perrito: 3, gatito: 2, loro: 1, conejo: 1 }.

¿Cómo funciona el acumulador cuando es un objeto?

Cuando trabajas con valores primitivos, el acumulador suele ser un número. Pero para un histograma, el valor inicial del acumulador es un objeto vacío {}, porque al empezar el recorrido todavía no sabes nada del conteo [1:45].

A medida que iteras sobre el array, vas construyendo ese objeto dinámicamente. La lógica se apoya en algo muy sencillo de los diccionarios en JavaScript: puedes agregar propiedades sobre la marcha y comprobar si una clave ya existe.

El algoritmo tiene solo dos caminos posibles:

Si la clave ya existe en el acumulador, le sumas uno al valor actual.
Si la clave no existe, la creas y le asignas uno, porque es la primera aparición.

¿Cómo se ve el paso a paso del acumulador?

Imagina que iteras sobre el array de animalitos. En la primera iteración el acumulador está vacío. Cuando aparece el primer perrito, no existe en el diccionario, entonces se crea con valor 1.

Luego llega un gatito: tampoco existe, se crea con valor 1. En la siguiente iteración vuelve a aparecer un perrito, y como ya existe la clave, en vez de crear una nueva, se le suma uno, quedando en 2.

Así sigue el recorrido hasta procesar todo el array. El resultado final es un único objeto con el conteo total por categoría [4:20].

¿Cómo se aplica reduce con objetos en un caso real?

Esta técnica es útil siempre que necesites agrupar o categorizar información dentro de un array. El histograma es solo la puerta de entrada. Con la misma lógica puedes acumular sumas, agrupar productos por categoría o construir reportes.

¿Cuándo conviene usar reduce en lugar de map o filter? Cuando necesitas transformar un array en una estructura distinta, como un objeto agrupado, un total acumulado o cualquier valor que no sea otro array del mismo tamaño.

El patrón siempre es el mismo: partes de un estado inicial, revisas si la clave existe en el acumulador y decides si creas o actualizas. Esa flexibilidad convierte a reduce en una herramienta mucho más potente que un simple sumador.

Reto: reporte de ventas por categoría

Para seguir practicando, tienes un array de transacciones donde cada una incluye:

Un ID único.
El nombre del producto.
La categoría a la que pertenece.
El precio de la venta.

El objetivo es construir un reporte de ventas que agrupe el revenue por categoría. Es decir, sumar cuánto se vendió en tech, cuánto en food y así con cada categoría presente en el array. Si hay tres ventas en tech, el reporte debe mostrar la suma total de esas tres transacciones y qué productos se vendieron.

La solución se resuelve con la misma lógica: manejo de diccionario dentro del acumulador, comprobar si la categoría ya está registrada y, en caso afirmativo, ir sumando el precio; si no, inicializar la entrada con el primer valor.

Cuéntame en los comentarios cómo resolviste el reto y qué otras aplicaciones de reduce con objetos has encontrado útiles en tus proyectos.

Resumen

¿Qué es un histograma y cómo se construye con reduce?

Aquí es donde reduce se vuelve poderoso. Su magia está en tomar un array completo y reducirlo a un solo valor, que en este caso no es un número, sino un objeto que funciona como diccionario.

¿Qué devuelve reduce cuando construyes un histograma? Devuelve un único objeto donde cada clave es un elemento del array y cada valor es la cantidad de veces que aparece. Por ejemplo: { perrito: 3, gatito: 2, loro: 1, conejo: 1 }.

¿Cómo funciona el acumulador cuando es un objeto?

El algoritmo tiene solo dos caminos posibles:

Si la clave ya existe en el acumulador, le sumas uno al valor actual.
Si la clave no existe, la creas y le asignas uno, porque es la primera aparición.

¿Cómo se ve el paso a paso del acumulador?

Imagina que iteras sobre el array de animalitos. En la primera iteración el acumulador está vacío. Cuando aparece el primer perrito, no existe en el diccionario, entonces se crea con valor 1.

Así sigue el recorrido hasta procesar todo el array. El resultado final es un único objeto con el conteo total por categoría [4:20].

¿Cómo se aplica reduce con objetos en un caso real?

¿Cuándo conviene usar reduce en lugar de map o filter? Cuando necesitas transformar un array en una estructura distinta, como un objeto agrupado, un total acumulado o cualquier valor que no sea otro array del mismo tamaño.

Reto: reporte de ventas por categoría

Para seguir practicando, tienes un array de transacciones donde cada una incluye:

Un ID único.
El nombre del producto.
La categoría a la que pertenece.
El precio de la venta.

Cuéntame en los comentarios cómo resolviste el reto y qué otras aplicaciones de reduce con objetos has encontrado útiles en tus proyectos.

Grabacion

Transformar, filtrar y agrupar arrays en JavaScript

Clona y ejecuta FreeHabits localmente

Map avanzado: item, index y array completo

Exportar CSV desde el navegador con map

Mutabilidad vs inmutabilidad en arrays de JavaScript

Cómo filter elimina elementos sin mutar arrays

Filtros dinámicos con FormData en JavaScript

Observer Pattern para filtros reactivos en JS

Filtros reactivos con Observer Pattern en JS

Persistencia con local storage y repository pattern

Cómo calcular promedios con reduce en JavaScript

Cómo crear un histograma con reduce

Object.groupBy vs reduce en JavaScript

Cómo crear un mini dashboard con reduce en JavaScript

flat y flatMap para arrays anidados en JS

flatMap y reduce para agrupar hábitos por día

Gráfica de barras con Chart.js en Vanilla JS

some, every e includes para validar arrays

Cómo convertir arrays y strings con join y split

Fusionar arrays sin mutar datos con spread

Inmutabilidad en arrays con spread y slice

Map vs Array: cuándo usar cada uno

Map + array de IDs para acelerar búsquedas

Cierre del curso de arrays avanzados en JS

Cómo crear un histograma con reduce

Progreso del curso

Grabacion

Recursos

Recursos