Método reduce: transforma y agrupa datos de manera eficiente en Javascript

El método reduce aplica una función a un acumulador y a cada valor de un array (de izquierda a derecha) para reducirlo a un solo valor. La función de reducción se pasa como argumento a reduce y se invoca en cada iteración del array. Este método no modifica el array original, lo cual es buena práctica para mantener la inmutabilidad en tu código.

Sintaxis del método reduce

🔸 callback: La función de reducción que se aplica a cada elemento del array.

🔸 initialValue: El valor inicial del acumulador.

array.reduce(callback(accumulator, currentValue, index, array), initialValue)

La función de reducción

La función de reducción se llama "callback" porque es una función que se pasa como argumento a otra función (en este caso, el método reduce) y se invoca ("llama de vuelta") dentro de esa función en un momento específico, después de que algún tipo de evento o acción haya tenido lugar.

En el caso de reduce, la función callback es la lógica que se aplica a cada elemento del array para reducirlo a un solo valor. Esta función se llama repetidamente, una vez por cada elemento en el array.

const numbers = [1, 2, 3, 4, 5];

const sum = numbers.reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
}, 0);

console.log(sum); // 15

// Desglosando el ejemplo:
// Esta función es la callback ⬇️. Se pasa como argumento a reduce y se llama de vuelta en cada iteración del array.

(accumulator, currentValue) => {
  return accumulator + currentValue;
};

La función de reducción (callback) toma los siguientes parámetros:

• accumulator: El acumulador que mantiene el resultado parcial.
• currentValue: El valor del elemento actual en la iteración.
• index (opcional): El índice del elemento actual.
• array (opcional): El array completo sobre el cual se está iterando.

Podemos ver los valores de estos parámetros en cada iteración del array del ejemplo anterior en la siguiente tabla:

| Iteración        | accumulator                                      | currentValue | Resultado        |
|------------------|--------------------------------------------------|--------------|------------------|
| Primera Iteración| 0 (valor inicial)                                | 1            | 0 + 1 = 1        |
| Segunda Iteración| 1 (resultado anterior)                           | 2            | 1 + 2 = 3        |
| Tercera Iteración| 3 (resultado anterior)                           | 3            | 3 + 3 = 6        |
| Cuarta Iteración | 6 (resultado anterior)                           | 4            | 6 + 4 = 10       |
| Quinta Iteración | 10 (resultado anterior)                          | 5            | 10 + 5 = 15

Valor Inicial del Acumulador

El valor inicial (initialValue) es crucial para determinar el punto de partida de la reducción. Cambiar este valor puede cambiar el resultado final.

Dependiendo de la operación que estés realizando, el valor inicial podría ser diferente. Por ejemplo, si estuvieras concatenando strings, podrías comenzar con una cadena vacía ('') o un prefijo; si estuvieras multiplicando números, podrías comenzar con 1.

El valor inicial del acumulador afecta directamente el resultado final de la operación de reducción. Cambiar el valor inicial de 0 a 27 del ejemplo anterior cambia el resultado final de 15 a 42 en este ejemplo. Este comportamiento es útil cuando necesitas realizar operaciones que requieren un valor inicial específico, como sumar con un desplazamiento inicial o concatenar cadenas con un prefijo.

Si no se proporciona un valor inicial a la función reduce, el primer elemento del array se utiliza como el valor inicial del acumulador. La iteración entonces comienza desde el segundo elemento del array. Esto puede simplificar el código en algunos casos, pero también puede llevar a errores si el array está vacío o si el tipo de los elementos no es adecuado para la operación que se está realizando.

Si en el ejemplo anterior no se proporciona un valor inicial, el valor inicial del acumulador sería 1 en lugar del 0 que se había especificado y el primer currentValue sería 2 en lugar de 1.

Generalmente es una buena práctica proporcionar un valor inicial para evitar errores y hacer el código más fácil de entender.

Usos con reduce

El método reduce es muy versátil y se puede utilizar para una variedad de tareas. Algunos ejemplos comunes incluyen:

🔸 Concatenar Strings:

Puedes usar reduce para concatenar un array de strings en una sola cadena.

const fruits = ["apple", "banana", "orange"];
  
const sentence = fruits.reduce((acc, word, index) => {
if(index === 0) {
  return `${acc} ${word}`
}
if (index === (fruits.length - 1)) {
  return `${acc} and ${word}.`
}
   return `${acc}, ${word}`
}, 'I need to buy some fruits like');

console.log(sentence); // "I need to buy some fruits like apple, banana and orange."

🔸 Contar Elementos:

Si necesitas contar la cantidad de veces que aparece cada elemento en un array, reduce es muy útil.

const fruits = ['apple', 'banana', 'apple', 'orange', 'banana', 'apple'];

const fruitCount = fruits.reduce((accumulator, currentValue) => {
  if (accumulator[currentValue]) {
    accumulator[currentValue]++;
  } else {
    accumulator[currentValue] = 1;
  }
  return accumulator;
}, {});

console.log(fruitCount); // { apple: 3, banana: 2, orange: 1 }

🔸 Aplanar un Array de Arrays:

Puedes usar reduce para convertir un array de arrays en un solo array.

const nestedArray = [[1, 2], [3, 4], [5, 6]];
const flatArray = nestedArray.reduce((acc, arr) => acc.concat(arr), []);
console.log(flatArray); // [1, 2, 3, 4, 5, 6]

Esto es otra forma de hacer flatMap:

function flattenArray(arr) {
  return arr.flatMap(item => Array.isArray(item) ? flattenArray(item) : item);
}

const nestedArray = [[[1, 2], [3, 4]], [[5, 6], [7, 8]], [9, [10, 11]], 12];
const flatArray = flattenArray(nestedArray);

console.log(flatArray); // Output: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]

🔸 Agrupar Objetos por una Propiedad:

Si tienes un array de objetos y quieres agruparlos por una propiedad específica, reduce puede ayudarte.

const people = [
  { name: "Alice", age: 21 },
  { name: "Bob", age: 25 },
  { name: "Alice", age: 30 },
];
const groupedByName = people.reduce((acc, person) => {
  const key = person.name;
  if (!acc[key]) {
    acc[key] = [];
  }
  acc[key].push(person);
  return acc;
}, {});

console.log(groupedByName);
// {
//   Alice: [{ name: "Alice", age: 21 }, { name: "Alice", age: 30 }],
//   Bob: [{ name: "Bob", age: 25 }]
// }

Aunque ahora la agrupación por propiedad puede hacerse de manera más sencilla con groupBy:

const groupedByName = Object.groupBy(people, ({ name }) => name);

🔸 Calcular la Suma de una Propiedad en Objetos:

Si tienes un array de objetos y quieres sumar los valores de una propiedad específica, reduce es útil.

const products = [
  { name: "apple", price: 50 },
  { name: "banana", price: 100 },
  { name: "orange", price: 150 },
];
const totalPrice = products.reduce((acc, product) => acc + product.price, 0);
console.log(totalPrice); // 300

Conclusión

El método reduce en JavaScript es extremadamente útil para transformar y acumular datos de arrays. Entender cómo funciona, cómo usar el valor inicial y cómo manejar arrays vacíos te permitirá utilizar reduce de manera más efectiva en tus proyectos. Con la práctica, encontrarás que reduce puede simplificar muchas operaciones complejas de manipulación de datos.