Cómo calcular promedios con reduce en JavaScript

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:0012:08

Cómo calcular promedios con reduce en JavaScript

Curso de Manipulación Avanzada de Datos con JavaScript

Clase 11 de 24

Clase 11 / 24

Recursos

El método reduce en JavaScript es la navaja suiza de los arrays: te permite totalizar, promediar o transformar una colección de datos en una sola expresión. Si ya dominas map y filter, aprender reduce te abre la puerta a pipelines de programación funcional más potentes y declarativos.

Aquí vas a entender cómo funciona su firma, qué es el acumulador y cómo encadenarlo con otros métodos para resolver casos reales como calcular el promedio de edades de una base de datos.

¿Qué hace el método reduce en JavaScript?

Reduce toma un array y lo comprime a una mínima expresión según tu lógica de negocio. El ejemplo clásico es sumar todos los números de un array y obtener un único total [1:00].

¿Qué es reduce en JavaScript? Es un método de los arrays que itera cada elemento acumulando un valor y devuelve un único resultado al final. Puede reducir a un número, a un objeto o incluso a otro array, según lo que retornes en cada iteración.

Lo más común es reducir a un valor único, pero realmente depende de tu lógica: puedes terminar con un objeto, un array agrupado o cualquier estructura que necesites.

¿Cómo se compara con la programación imperativa?

Si lo pensamos con programación clásica, para calcular un promedio harías un for, sumarías cada elemento y luego dividirías entre el tamaño del array. Es una solución válida y funciona.

Pero cuando ya trabajas con pipelines de transformación de datos, conviene ir por el camino declarativo. Con reduce expresas la intención (totalizar) en lugar de describir el paso a paso del bucle.

¿Cómo funciona la firma de reduce y su valor inicial?

Reduce recibe dos cosas: una callback function y un estado inicial (init value) que aparece como segundo parámetro fuera del callback [3:15].

Ese valor inicial es clave y siempre deberías declararlo:

Usa 0 si vas a totalizar números.
Usa {} si vas a construir un objeto.
Usa [] si vas a devolver un array agrupado.
Puede ser -1 u otro número si tu lógica lo pide.

En la primera iteración, el acumulador toma exactamente ese valor inicial porque todavía no hay nada procesado.

¿Qué parámetros recibe el callback de reduce?

La función callback recibe cuatro argumentos, en este orden [5:40]:

accumulator: el valor que se va acumulando a lo largo de las iteraciones.
currentValue: el elemento actual del array, igual que en map.
currentIndex: la posición actual dentro del array.
array: el array completo original.

Aquí hay un detalle crítico: reduce siempre debe retornar un valor. Ese return se convierte en el nuevo estado del acumulador para la siguiente iteración. Si no retornas nada o retornas el acumulador sin modificarlo, tu resultado final será el valor inicial y parecerá que el método no hizo nada.

¿Cómo calcular una suma y un promedio con reduce?

Empecemos con lo básico. Para sumar [1, 2, 3, 4, 5] simplemente acumulas el currentValue en cada iteración:

javascript const numbers = [1, 2, 3, 4, 5]; const sum = numbers.reduce((accumulator, currentValue) => { return accumulator + currentValue; }, 0); // sum = 15

El acumulador arranca en 0, y en cada vuelta le sumas el elemento actual. No necesitas un for ni una variable externa: el valor vive dentro del propio reduce.

¿Cómo obtengo un promedio con reduce? Suma todos los elementos con reduce y divide el resultado entre array.length. Si el array tiene objetos, primero usa map para extraer el campo numérico.

¿Cómo encadenar map y reduce para procesar objetos?

Cuando tu array es de objetos (por ejemplo, un listado de customers con nombre, edad y hobbies), el patrón se vuelve elegante:

javascript const averageAge = customers .map(customer => customer.age) .reduce((acc, current) => acc + current, 0) / customers.length;

Primero transformas el array de objetos en un array de números con map, luego lo totalizas con reduce, y finalmente divides entre el tamaño del array para obtener el promedio [12:20].

Cuando la operación es sencilla, puedes omitir las llaves y el return explícito de la arrow function, dejando el callback en una sola línea. Ese es el corazón de la programación funcional: concatenar map, filter y reduce como piezas de un pipeline donde cada método hace una cosa y la pasa a la siguiente.

¿Qué reto puedes resolver para practicar reduce?

Aquí va un ejercicio para afianzar el concepto: encuentra la suma máxima de dos números consecutivos en un array usando reduce [15:30].

Algunos ejemplos de entrada y salida:

[1, 2, 3, 4, 5] devuelve 9, porque 4 + 5 es la mayor suma consecutiva.
Un array desordenado donde 5 + 1 sea la suma más alta también es válido.
Un array con 4 y 2 juntos daría 6 como resultado.
Puede haber números negativos, así que cuida los signos.

La clave está en usar el acumulador para llevar dos cosas al mismo tiempo: el valor anterior del array y la suma máxima encontrada hasta ahora. Practica ese algoritmo y déjame en los comentarios cómo resolviste el reto.

Resumen

Aquí vas a entender cómo funciona su firma, qué es el acumulador y cómo encadenarlo con otros métodos para resolver casos reales como calcular el promedio de edades de una base de datos.

¿Qué hace el método reduce en JavaScript?

Reduce toma un array y lo comprime a una mínima expresión según tu lógica de negocio. El ejemplo clásico es sumar todos los números de un array y obtener un único total [1:00].

¿Qué es reduce en JavaScript? Es un método de los arrays que itera cada elemento acumulando un valor y devuelve un único resultado al final. Puede reducir a un número, a un objeto o incluso a otro array, según lo que retornes en cada iteración.

Lo más común es reducir a un valor único, pero realmente depende de tu lógica: puedes terminar con un objeto, un array agrupado o cualquier estructura que necesites.

¿Cómo se compara con la programación imperativa?

Si lo pensamos con programación clásica, para calcular un promedio harías un for, sumarías cada elemento y luego dividirías entre el tamaño del array. Es una solución válida y funciona.

¿Cómo funciona la firma de reduce y su valor inicial?

Reduce recibe dos cosas: una callback function y un estado inicial (init value) que aparece como segundo parámetro fuera del callback [3:15].

Ese valor inicial es clave y siempre deberías declararlo:

Usa 0 si vas a totalizar números.
Usa {} si vas a construir un objeto.
Usa [] si vas a devolver un array agrupado.
Puede ser -1 u otro número si tu lógica lo pide.

En la primera iteración, el acumulador toma exactamente ese valor inicial porque todavía no hay nada procesado.

¿Qué parámetros recibe el callback de reduce?

La función callback recibe cuatro argumentos, en este orden [5:40]:

accumulator: el valor que se va acumulando a lo largo de las iteraciones.
currentValue: el elemento actual del array, igual que en map.
currentIndex: la posición actual dentro del array.
array: el array completo original.

¿Cómo calcular una suma y un promedio con reduce?

Empecemos con lo básico. Para sumar [1, 2, 3, 4, 5] simplemente acumulas el currentValue en cada iteración:

javascript const numbers = [1, 2, 3, 4, 5]; const sum = numbers.reduce((accumulator, currentValue) => { return accumulator + currentValue; }, 0); // sum = 15

El acumulador arranca en 0, y en cada vuelta le sumas el elemento actual. No necesitas un for ni una variable externa: el valor vive dentro del propio reduce.

¿Cómo obtengo un promedio con reduce? Suma todos los elementos con reduce y divide el resultado entre array.length. Si el array tiene objetos, primero usa map para extraer el campo numérico.

¿Cómo encadenar map y reduce para procesar objetos?

Cuando tu array es de objetos (por ejemplo, un listado de customers con nombre, edad y hobbies), el patrón se vuelve elegante:

javascript const averageAge = customers .map(customer => customer.age) .reduce((acc, current) => acc + current, 0) / customers.length;

Primero transformas el array de objetos en un array de números con map, luego lo totalizas con reduce, y finalmente divides entre el tamaño del array para obtener el promedio [12:20].

¿Qué reto puedes resolver para practicar reduce?

Aquí va un ejercicio para afianzar el concepto: encuentra la suma máxima de dos números consecutivos en un array usando reduce [15:30].

Algunos ejemplos de entrada y salida:

[1, 2, 3, 4, 5] devuelve 9, porque 4 + 5 es la mayor suma consecutiva.
Un array desordenado donde 5 + 1 sea la suma más alta también es válido.
Un array con 4 y 2 juntos daría 6 como resultado.
Puede haber números negativos, así que cuida los signos.

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 calcular promedios con reduce en JavaScript

Progreso del curso

Grabacion

Recursos

Recursos