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

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:008:03

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

Curso de Manipulación Avanzada de Datos con JavaScript

Clase 16 de 24

Clase 16 / 24

Recursos

¿Qué día de la semana completas más hábitos? Con flatMap y reduce en JavaScript puedes procesar los registros de un habit tracker y descubrir tu día más productivo antes de graficarlo. Esta guía muestra cómo transformar arrays anidados en estadísticas útiles para tu proyecto.

Cómo preparar los datos de un habit tracker antes de calcular

Antes de calcular nada, necesitas la lista completa de hábitos, no la filtrada. La idea es que la gráfica refleje el histórico total, aunque el usuario aplique filtros en la interfaz. Si prefieres que reaccione al filtro, puedes usar listFiltered, pero lo estándar es trabajar con listHabits.

El primer paso es definir un arreglo con los nombres de los días de la semana en el orden que usarás para mapear posiciones. En Latinoamérica lo natural es empezar por lunes y cerrar con domingo [02:15].

Por qué el orden de los días importa en el array

Cada posición del arreglo funciona como un índice directo. Si consultas la posición 0 obtienes lunes, en la 1 martes, y así hasta domingo. Esto te permite después mapear cualquier fecha a su día correspondiente sin lógica adicional.

¿Qué hace flatMap en JavaScript? Aplica una función a cada elemento de un array y aplana el resultado un nivel. Si tienes un array de arrays, te devuelve todos los elementos en una sola dimensión.

Cómo usar flatMap para unir los logs de todos los hábitos

Cada hábito tiene su propio arreglo de logs con los registros diarios. El problema es que necesitas una sola dimensión para procesar todo junto. Aquí entra flatMap.

Al aplicar flatMap sobre la lista de hábitos y devolver habit.logs, obtienes un único array con todos los registros de todos los hábitos combinados [04:20]. Es la diferencia clave entre map, que te dejaría un array de arrays, y flatMap, que aplana automáticamente.

map: retorna un array de arrays cuando cada elemento es una colección.
flatMap: aplica la transformación y aplana un nivel en el mismo paso.
El resultado queda listo para pasar al siguiente método sin bucles anidados.

Con ese array plano ya puedes empezar a agrupar por día de la semana.

Cómo agrupar logs por día usando reduce

El objetivo es un diccionario donde cada clave sea un día (lunes, martes, etc.) y el valor sea la cantidad de hábitos completados ese día. Este patrón de agrupamiento ya lo has visto antes, y reduce es la herramienta indicada.

El acumulador arranca vacío. En cada iteración tomas el log, identificas su día de la semana usando el índice del array de nombres, y sumas al grupo correspondiente. Al final tienes las estadísticas agrupadas listas para graficar.

¿Cuándo usar reduce en lugar de filter y map? Cuando necesitas transformar una lista en un objeto, un número o cualquier estructura que no sea otro array del mismo tamaño. Agrupar y contar son casos clásicos de reduce.

Qué hacer cuando aparece un error de naming en el método

Durante la implementación es fácil equivocarse llamando a un método inexistente. En el ejemplo, la función correcta era listHabits y no otro nombre similar [06:45]. TypeScript ayuda a detectar estos errores antes de ejecutar el código, algo que apreciarás más adelante cuando tu proyecto crezca.

Si ves un error en consola tras un hard reload, revisa primero los nombres en tu archivo de servicio. Ahí suelen estar definidas las funciones como crear hábito, removerlos y listar.

Cómo renderizar las estadísticas del día más productivo

Una vez que la función devuelve el diccionario agrupado, creas un nuevo renderer dedicado a esas estadísticas. Por ahora basta con imprimir el resultado en consola para validar que el agrupamiento funciona.

Este render se suma a los que ya tienes en el proyecto: el del quote, el de la tabla de hábitos y ahora el del histograma. Cada uno se ejecuta de forma independiente cuando cambia el estado.

Renderer del quote motivacional.
Renderer de la tabla con el tracker actual, la racha y las estadísticas.
Renderer nuevo para el histograma de días productivos.

Al revisar la salida verás qué días concentran más hábitos completados. En el ejemplo, domingo y jueves aparecen como los más activos según los registros existentes [08:10].

Qué sigue después de tener el histograma en consola

El siguiente paso es visualizarlo. En vez de armar el gráfico con HTML plano, usarás un motor de gráficas que renderice un bar chart con los datos ya procesados. La lógica de cálculo queda intacta; solo cambia la capa de presentación.

Cuéntame en los comentarios qué día crees que será tu más productivo antes de correr el cálculo y cuál terminó siendo en realidad.

Resumen

Cómo preparar los datos de un habit tracker antes de calcular

Por qué el orden de los días importa en el array

¿Qué hace flatMap en JavaScript? Aplica una función a cada elemento de un array y aplana el resultado un nivel. Si tienes un array de arrays, te devuelve todos los elementos en una sola dimensión.

Cómo usar flatMap para unir los logs de todos los hábitos

Cada hábito tiene su propio arreglo de logs con los registros diarios. El problema es que necesitas una sola dimensión para procesar todo junto. Aquí entra flatMap.

map: retorna un array de arrays cuando cada elemento es una colección.
flatMap: aplica la transformación y aplana un nivel en el mismo paso.
El resultado queda listo para pasar al siguiente método sin bucles anidados.

Con ese array plano ya puedes empezar a agrupar por día de la semana.

Cómo agrupar logs por día usando reduce

¿Cuándo usar reduce en lugar de filter y map? Cuando necesitas transformar una lista en un objeto, un número o cualquier estructura que no sea otro array del mismo tamaño. Agrupar y contar son casos clásicos de reduce.

Qué hacer cuando aparece un error de naming en el método

Si ves un error en consola tras un hard reload, revisa primero los nombres en tu archivo de servicio. Ahí suelen estar definidas las funciones como crear hábito, removerlos y listar.

Cómo renderizar las estadísticas del día más productivo

Este render se suma a los que ya tienes en el proyecto: el del quote, el de la tabla de hábitos y ahora el del histograma. Cada uno se ejecuta de forma independiente cuando cambia el estado.

Renderer del quote motivacional.
Renderer de la tabla con el tracker actual, la racha y las estadísticas.
Renderer nuevo para el histograma de días productivos.

Al revisar la salida verás qué días concentran más hábitos completados. En el ejemplo, domingo y jueves aparecen como los más activos según los registros existentes [08:10].

Qué sigue después de tener el histograma en consola

Cuéntame en los comentarios qué día crees que será tu más productivo antes de correr el cálculo y cuál terminó siendo en realidad.

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

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

Progreso del curso

Grabacion

Recursos

Recursos