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

En JavaScript existen muchos métodos que nos permiten acceder a los elementos de un array, ya sea para analizarlos o para manipularlos. Dentro de estas funciones, el método reduce de Javascript nos permite manipular un array para obtener un único valor como resultado. En este post, te enseñaremos cómo utilizar el método reduce de JavaScript en contextos prácticos y avanzados.

¿Qué es el método reduce de Javascript?

El método reduce de JavaScript nos permite, como su nombre indica, reducir el array insertado a un solo valor. Esta reducción se da a partir de una función reduce que insertamos como parámetro. Es decir, para ejecutar este método usaremos un callback. Además, insertaremos un valor inicial para crear la secuencia de reducción.

Si quieres saber más sobre este método, te invitamos a leer nuestro artículo sobre qué es el método reduce en Javascript.

¿Cómo utilizar el método reduce de JavaScript?

Sintaxis

El método reduce de Javascript acepta un callback y un valorInicial opcional. Expliquemos un poco cada uno de los parámetros que utiliza el callback, así como la importancia del valorInicial.

Parámetros del Callback

1. acumulador: Es el valor acumulado que lleva el resultado de la reducción a medida que el método reduce de Javascript itera sobre los elementos del array.
   • En la primera iteración, el acumulador será igual al valorInicial, si se proporcionó.Si no se proporciona un valorInicial, el primer elemento del array será utilizado como el acumulador inicial y la iteración comenzará desde el segundo elemento del array.
     Este es el lugar donde se almacena el resultado parcial o final del proceso de reducción.
   • Ejemplo: const suma = [1, 2, 3].reduce((acumulador, valorActual) => acumulador + valorActual, 0); console.log(suma); // 6
2. valorActual: Representa el elemento actual del array que está siendo procesado en cada iteración.
   • Este valor cambia en cada iteración del método reduce de Javascript, comenzando desde el índice 0 si se pasa un valorInicial, o desde el índice 1 si no se proporciona.Ejemplo: const multiplicacion = [2, 3, 4].reduce((acumulador, valorActual) => acumulador * valorActual, 1); console.log(multiplicacion); // 24
3. **índice (opcional): Es el índice del elemento actual del array que se está procesando.
   • Comienza desde 0 si se proporciona un valorInicial.Si no se proporciona un valorInicial, comienza desde 1.
   • Ejemplo: const sumaConIndices = [5, 10, 15].reduce((acumulador, valorActual, indice) => { console.log(`Índice: ${indice}, Valor: ${valorActual}`); return acumulador + valorActual; }, 0); console.log(sumaConIndices); // 30
4. array (opcional): Es el array completo sobre el que se está aplicando reduce.
   • Este parámetro se utiliza si necesitas acceder al array original durante el proceso de reducción.Ejemplo: const totalLongitudes = ["uno", "dos", "tres"].reduce((acumulador, valorActual, indice, array) => { console.log(`Procesando "${valorActual}" del array ${array}`); return acumulador + valorActual.length; }, 0); console.log(totalLongitudes); // 9

Parámetro valorInicial (opcional)

• Es el valor inicial que toma el acumulador en la primera iteración.
  • Si se proporciona, la iteración comienza desde el índice 0.
  • Si no se proporciona, el primer elemento del array se utiliza como valorInicial, y la iteración comienza desde el índice 1.
  • Es una buena práctica proporcionar siempre un valorInicial para evitar errores, especialmente si el array está vacío.

Ejemplo sin valorInicial (puede causar errores):

const suma = [].reduce((acumulador, valorActual) => acumulador + valorActual);
// TypeError: Reduce of empty array with no initial value

Ejemplo con valorInicial:

const sumaSegura = [].reduce((acumulador, valorActual) => acumulador + valorActual, 0);
console.log(sumaSegura); // 0

Importancia del valor inicial

Al utilizar el método reduce de JavaScript, es importante insertar primero el parámetro de valor inicial. Aunque este parámetro va después del callback, te recomendamos abrir el paréntesis e, inmediatamente, insertar la coma y, después, el valor inicial. Esto ayuda a evitar errores y asegura que la función se ejecute como se espera.

const totalGoals = footballLeague.teams.reduce((accumulated, currentValue) => {
return accumulated + currentValue.goalsFor;
}, 0);

console.log(Total goals are ${totalGoals});

En este ejemplo, hemos definido que la función reduce empiece con el valor 0 y luego va sumando progresivamente el valor de la propiedad goalsFor de cada equipo. El método recorre el array y suma el valor de esta propiedad de cada elemento del array para devolvernos un único valor final.

Ejemplos

Supongamos que estamos programando un proyecto en el que debemos crear una liga de fútbol. Cuando queramos crear la tabla de clasificación para definir al ganador, necesitaremos programar una acción que acumule los goles metidos por cada equipo para conocer el número total de goles metidos durante la liga.

const totalGoals = footballLeague.teams.reduce((accumulated, currentValue) => {
    return accumulated + currentValue.goalsFor;
}, 0);

console.log(`Total goals are ${totalGoals}`);

Ejemplo con objetos y strings

const names = ['Alice', 'Bob', 'Charlie'];
const concatenatedNames = names.reduce((acc, name) => acc + ', ' + name);
console.log(concatenatedNames); // "Alice, Bob, Charlie"

Aplicaciones avanzadas: Agrupación de datos

const people = [
    { name: 'Alice', age: 21 },
    { name: 'Bob', age: 25 },
    { name: 'Charlie', age: 21 }
];

const groupedByAge = people.reduce((acc, person) => {
    if (!acc[person.age]) {
        acc[person.age] = [];
    }
    acc[person.age].push(person);
    return acc;
}, {});

console.log(groupedByAge);

El método reduce de JavaScript es una herramienta extremadamente poderosa para manejar y manipular arrays, permitiendo operaciones complejas con facilidad y eficiencia. Aprender a usar el método reduce de Javascript correctamente puede mejorar significativamente la calidad y eficiencia de tu código.

Errores comunes:
Uno de los errores comunes al usar reduce es olvidar el valor inicial, lo cual puede llevar a resultados inesperados. Siempre es recomendable proporcionar un valor inicial.

Comparación con otros métodos

reduce es muy potente, pero a veces otros métodos como map, filter, o forEach pueden ser más apropiados según la tarea específica. Aquí hay una breve comparación:

• map: Transforma cada elemento de un array.
• filter: Filtra elementos de un array.
• forEach: Ejecuta una función para cada elemento de un array.

Para grandes volúmenes de datos, es importante considerar el rendimiento. reduce puede ser optimizado usando técnicas como la programación en paralelo si el entorno lo permite.

Método	Descripción	¿Cuándo usarlo?
map()	Transforma cada elemento del array según una función y devuelve un nuevo array.	Cuando necesitas transformar elementos y obtener un array del mismo tamaño.
filter()	Filtra elementos del array según una condición.	Cuando necesitas extraer elementos que cumplan un criterio.
forEach()	Ejecuta una función para cada elemento sin devolver un valor.	Cuando necesitas realizar operaciones en cada elemento sin crear un nuevo array.
some()	Comprueba si al menos un elemento cumple una condición.	Cuando necesitas verificar si existe un elemento que cumpla un criterio.
every()	Comprueba si todos los elementos cumplen una condición.	Cuando necesitas asegurarte de que todos los elementos cumplen un criterio.
find()	Devuelve el primer elemento que cumple una condición.	Cuando necesitas encontrar un único elemento específico.
findIndex()	Devuelve el índice del primer elemento que cumple una condición.	Cuando necesitas la posición de un elemento específico.
flatMap()	Combina map() y flat() en una sola operación.	Cuando necesitas transformar y aplanar arrays en una operación.

¿Qué sigue?

Ahora que sabes cómo utilizar el método reduce de JavaScript en contextos más prácticos, puedes ver que aprender a programar es mucho más fácil con la práctica. Por ello, te invitamos a formar parte del Desarrollo Web Full Stack Bootcamp, donde encontrarás la mezcla perfecta entre teoría y práctica. ¡Te convertirás en un experto en desarrollo web en pocos meses! ¡No lo dudes más e inscríbete!