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

El método reduce() en JavaScript te permite reducir los elementos de un array y retornar un valor único. A continuación veremos un ejemplo bastante común haciendo uso de este método para conseguir el valor total de la suma de un array de números.

1const numeros = [1, 2, 3, 4, 5];
2const sumaTotal = numeros.reduce((total, numero) => {
3     return total + numero;
4}, 0);
5
6console.log("Suma total: ", sumaTotal);

( output ) del código

1Suma total: 15

En este ejemplo el método reduce() de javascript suma todos los números del array números y luego guarda ese resultado en la constante sumaTotal para después mostrar el resultado en la consola.

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

El método reduce es un método de arrays en JavaScript que te permite reducir un array a un solo valor, este array puede contener cualquier tipo de dato un número, un cadena de texto, un objeto o incluso un nuevo array. Este método es muy útil para sumar los números de un array, conseguir el valor promedio de la suma de los números de un array y muchas cosas más! Básicamente lo puedes usar para reducir o incluso para filtrar los elementos de un array.

Sintaxis del método reduce de Javascript

El método reduce() de Javascript recibe dos parámetros:

1Array.reduce(funcionReductora, valorInicial);

• funcionReductora: es la función reductora del array y recibe cuatro parámetros:

  • acumulador: es la variable que guarda el valor único que se reduce.
  • elemento: es el elemento del array en cada iteración.
  • indice: es el índice de los elemento del array ( opcional ).
  • array: es el array que deseas reducir ( opcional ).

• valorInicial : es el valor inicial que toma la función reductora, este valor puede ser de cualquier tipo de dato un número, una cadena de texto, un objeto o un nuevo array.

Aunque este segundo parámetro es opcional es una buena práctica colocarlo siempre ya que de no colocarlo la función reductora del método toma como valor inicial el primer valor del array que recorremos y si le pasas un array vacío te arroja un error.

En el siguiente ejemplo verás un poco mejor cómo funcionan estos parámetros.

1const numeros= [1, 2, 3, 4, 5];
2
3numeros.reduce((acumulador, elemento, indice, array) => {
4    console.log(`${acumulador}: este es el valor del acumulador en cada iteración`);
5    console.log(`${elemento}: este es el valor del elemento`);
6    console.log(`${indice}: este es el índice del elemento en el array`);
7    console.log(`${array}: este es el array que estamos recorriendo`);
8
9    return acumulador + elemento;
10}, 0);

En este ejemplo, la función reductora del método reduce() recibe los cuatro parámetros y simplemente muestra en la consola una cadena de texto que indica el valor de cada uno de los parámetros. Es importarte resaltar que de todos los parámetros que recibe la función reductora solo los parámetros acumulador y elemento se utilizan siempre, los parámetros indice y array son opcionales y solo se utilizan en ocasiones específicas.

Ejemplos de uso del método reduce en Javascript

El método reduce() de Javascript tiene diversos casos de uso, desde obtener la suma total de los números de un array, obtener el valor promedio de la suma de los números de un array, filtrar los valores de un array entre muchas cosas más, veremos algunos ejemplos a continuación.

1. Obtener el valor promedio de un array

Como mencionamos anteriormente el método reduce() de javascript te permite obtener el valor promedio de un array de elementos.

1const ciudades = [
2  { id: 1, nombre: "New york", temperatura: 25 },
3  { id: 2, nombre: "Los Ángeles", temperatura: 30 },
4  { id: 3, nombre: "Chicago", temperatura: 15 },
5  { id: 4, nombre: "Queens", temperatura: 27 }
6];
7
8const sumaDeLasTemperaturas = ciudades.reduce((acumulador, ciudad, indice) => {
9  console.log(`La temperatura de la ciudad de ${ciudad.nombre} es de ${ciudad.temperatura} grados`);
10
11  const temperaturaCiudad = ciudad.temperatura;
12  return acumulador + temperaturaCiudad;
13}, 0);
14
15const temperaturaPromedio = sumaDeLasTemperaturas / ciudades.length;
16
17console.log(`La temperatura promedio de los Estados Unidos es de ${temperaturaPromedio} grados`);

( output ) del código

1La temperatura de la ciudad de New york es de 25 grados
2La temperatura de la ciudad de Los Ángeles es de 30 grados      
3La temperatura de la ciudad de Chicago es de 15 grados
4La temperatura de la ciudad de Queens es de 27 grados
5
6La temperatura promedio de los Estados Unidos es de 24.25 grados

Supongamos que queremos buscar la temperatura promedio del país de los Estados Unidos, en este caso el método reduce() nos permite sumar todos los valores de las temperaturas de cada una de la ciudades y guarda el total en la constante sumaDeLasTemperaturas.

Luego guardamos el valor de esta constante dividido por la cantidad de ciudades presentes en el array ciudades, este valor se guarda en la constante temperaturaPromedio que tendrá como valor la temperatura promedio de este país.

2. Contar cuantas veces aparece un elemento en un array

Otro de los usos del método reduce() de Javascript es para contar cuantas veces aparece un elemento en un array.

1const  frutas  = ["manzana", "banano", "limón", "manzana", "limón", "coco", "banano", "limón"];
2
3const contador = frutas.reduce((acumulador, fruta) => {
4    if (!acumulador.hasOwnProperty(fruta)) {
5        acumulador[fruta] = 1;
6    } else {
7        acumulador[fruta]++;
8    }
9    return acumulador;
10}, {});
11
12console.log(contador);

( output) del código

1{ 
2  manzana: 2, 
3  banano: 2,  
4  limón: 3, 
5  coco: 1 
6}

En este ejemplo usamos el método reduce() para contar cuántas veces aparecen cada uno de los elementos del array, primero le pasamos la función reductora y luego como segundo parámetro le pasamos un objeto vacío como valor inicial {}, creamos una estructura condicional if en la función reductora y verificamos si el objeto acumulador no contiene la propiedad actual en la iteración !acumulador.hasOwnProperty(fruta) de ser así creamos esa propiedad en el objeto y le asignamos el valor de 1 acumulador[fruta] = 1, de lo contrario si el objeto ya contiene esa propiedad incrementamos el valor en esa propiedad acumulador[fruta]++, de esta forma contamos cuántas veces aparecen cada uno de los elementos en el array frutas.

3. Obtener el valor máximo de un array

Otro uso que le podemos dar al método reduce() de Javascript en para obtener el número más grande de un array.

1const numeros = [0, 2, 4, 500, 5, -2, -6, -1000, 2000];
2
3const numeroMaximo = numeros.reduce((numMax, numero) => {
4    if (numero > numMax) {
5        numMax = numero;
6    }
7
8    return numMax;
9}, Number.NEGATIVE_INFINITY);
10
11console.log("El número más grande del array es", numeroMaximo);

( output ) del código

1El número más grande del array es 2000

En este ejemplo hacemos uso del método reduce() de Javascript para encontrar el número más grande de un array, en la función reductora del array creamos una estructura condicional if para verificar si el valor actual en la iteración es más grande que el valor inicial numMax el cual tiene un valor de Number.NEGATIVE_INFINITY que es el número negativo más grande con el que puede trabajar Javascript, si el valor actual es más grande que la variable numMax entonces a esta variable le asignamos el valor actual, de esta forma la variable numMax tendrá como valor el número más grande del array el cual retorna en la última iteración y se guarda en la constante numeroMaximo.

Conclusión

En conclusión el método reduce() de Javascript te permite reducir o filtrar un array de elementos y te devuelve un único valor, este método es muy útil y tiene muchas aplicación en la programación con Javascript, además de ser uno de los métodos más importantes de este lenguaje. Si quieres conocer más información sobre este método te recomiendo que visites la página oficial de Mozilla Javascript sobre el metodo reduce.

Si estas interesado en conocer más información sobre el lenguaje de programación Javascript te invito a que visites el siguiente articulo sobre aprender a programar en JavaScript de 4Geeks Academy en el cual encontrarás una gran cantidad de información sobre este lenguaje con ejemplos de código, videotutoriales y muchas cosas más que te ayudarán a mejorar tus habilidades en Javascript.