Escrito por:
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.
( 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.
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.
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.
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.
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.
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.
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.
Otro uso que le podemos dar al método reduce() de Javascript en para obtener el número más grande de un array.
( 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.
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.