Tutorial JavaScript: Reducción con reduce()

El método reduce() en JavaScript es una función de los arrays que permite ejecutar una función reductora para cada elemento del array, acumulando el resultado en un único valor. Esta función se utiliza principalmente para realizar operaciones de acumulación y transformación de datos en arrays de manera eficiente y elegante.

La función reductora es una función que se proporciona como argumento al método reduce() y se ejecuta para cada elemento del array, recibiendo cuatro argumentos:

1. Acumulador: es la variable donde se almacenará el valor acumulado a lo largo de la ejecución de la función reductora.

2. Elemento actual: es el elemento actual del array que está siendo procesado.

3. Índice actual: es el índice del elemento actual en el array.

4. Array: es el array sobre el cual se ejecuta el método reduce().

La función reduce() acepta dos argumentos: la función reductora mencionada anteriormente y un valor inicial para el acumulador. Si no se proporciona el valor inicial, el método reduce() toma como valor inicial el primer elemento del array y empieza a procesar desde el segundo elemento.

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

// Calcular la suma de los elementos del array
const suma = numeros.reduce((acumulador, elementoActual) => {
  return acumulador + elementoActual;
}, 0);

console.log(suma); // 15

En este ejemplo, la función reductora es una función anónima de flecha (arrow function) que recibe el acumulador y el elemento actual del array, y devuelve la suma de ambos. El valor inicial para el acumulador es 0. Al final de la ejecución, el método reduce() devuelve la suma total de los elementos del array.

Algunos otros ejemplos de uso comunes del método reduce():

• Calcular el producto de los elementos de un array:

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

const producto = numeros.reduce((acumulador, elementoActual) => {
  return acumulador * elementoActual;
}, 1);

console.log(producto); // 120

• Calcular el promedio de los elementos de un array:

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

const promedio = numeros.reduce((acumulador, elementoActual, indiceActual, array) => {
  acumulador += elementoActual;
  // Al alcanzar el último elemento, dividir por el número de elementos
  return indiceActual === array.length - 1 ? acumulador / array.length : acumulador;
}, 0);

console.log(promedio); // 3

• Crear un objeto que cuente la cantidad de elementos repetidos en un array:

const frutas = ['manzana', 'banana', 'manzana', 'naranja', 'banana', 'naranja', 'manzana'];

const conteoFrutas = frutas.reduce((acumulador, elementoActual) => {
  // Si el objeto ya contiene este elemento aumentar su valor en 1, si no, inicializar a 0 y aumentar su valor en 1
  acumulador[elementoActual] = (acumulador[elementoActual] || 0) + 1;
  return acumulador;
}, {});

console.log(conteoFrutas); // {manzana: 3, banana: 2, naranja: 2}

En conclusión, el método reduce() en JavaScript es una herramienta poderosa y versátil que simplifica y optimiza el proceso de realizar operaciones acumulativas y transformaciones en arrays. A través de una función reductora personalizada y un valor inicial, es posible ejecutar este método adaptándolo a diferentes casos de uso y aprovechar sus ventajas para mantener un código limpio y eficiente.