¿Cómo se usa reduce en Javascript?

El nombre de la función reduce() me confundía, debido a su nombre, me hacía pensar que restaba elementos de un arreglo (también llamado matriz o, en inglés, array). ¿Te sucede lo mismo? Ahora que entiendo cómo funciona, me he dado cuenta que es una función muy útil.

En este post te explicaré cómo usar la función reduce de los arrays en Javascript y maneras prácticas de utilizarlo.

¿Cómo funciona reduce en Javascript?

Sintaxis de reduce
Cómo usar reduce para

¿Cómo funciona reduce en Javascript?

El método reduce efectúa una acción acumulativa en un arreglo. Esto lo logra al ejecutar una función sobre cada elemento del arreglo, y te devuelve como resultado un solo valor.

La función reduce puede recibir 2 argumentos:

función callback: esta función callback, a su vez, puede recibir 4 argumentos
- valor anterior, también llamado acumulador
- valor actual
- indice actual
- arreglo (array)
valor inicial

Sintaxis de `reduce`

Como lo que quiero lograr ahora es que entiendas la función reduce, a continuación te presento una sintaxis simplificada, que muestra solo los argumentos más comunes.

array.reduce(callback(valorAnterior, valorActual), valorInicial)

función callback: función a ejecutar en cada elemento del array. El valor que retorna, se convierte en valorAnterior en la siguiente invocación del callback.

valorAnterior: el valor que retornó el callback en la invocación anterior. La primera vez que se invoca el callback, equivale a valorInicial.

valorActual: el valor del elemento actual

valorInicial: es el valor a usar como valorAnterior en la primera llamada a la función callback.

Ejemplo sencillo para aprender a usar reduce

Una de las maneras más fáciles de entender cómo funciona reduce es usarlo para sumar una lista de números.

const array = [2, 8, 4, 1];

const suma = array.reduce((valorAnterior, valorActual) => {
  return valorAnterior + valorActual;
}, 0);

console.log(suma); // ➡️ 15

La función callback se ejecuta 4 veces:

valorAnterior: 0, valorActual: 2, retorna 2
valorAnterior: 2, valorActual: 8, retorna 10

valorAnterior: 10, valorActual: 4, retorna 14
valorAnterior: 14, valorActual: 1, retorna 15

¿Puedes visualizar la secuencia de cálculos en cada llamada del callback?

0 + 2 = 2
2 + 8 = 10
10 + 4 = 14
14 + 1 = 15

Aparte de usar reduce para calcular la suma de un arreglo de números, hay numerosas maneras prácticas de utilizarlo.

¿Cómo usar reduce con un array de objetos?

¿Cómo utilizar reduce para calcular el total de una factura?

Puedes usar reduce para, por ejemplo, calcular el total de una factura.

const factura = {
  cliente: 'Empresa ABC',
  fechaDeExpedicion: '2023-09-08',
  productos: [
    { nombre: 'Bolsa de cafe', cantidad: 2, precio: 250, },
    { nombre: 'Teclado mecánico', cantidad: 1, precio: 100, },
    { nombre: 'Taza de vidrio', cantidad: 1, precio: 100, },
  ],
};

Nota que también hay que calcular el total teniendo en cuenta la cantidad de artículos.

const total = factura.productos.reduce((anterior, actual) => {
  return anterior + (actual.cantidad * actual.precio)
}, 0);

// total es 700

Puedes acceder al código en acción en StackBlitz: calcular el total de una factura.

¿Cómo deshacerse de valores duplicados en un array con `reduce`?

Supongamos que tienes este arreglo

const array = [
  'A', 'B', 'C', 'A', 
  'B', 'B', 'D', 'C',
];

¿Cómo podrías deshacerte de los valores que aparecen más de una vez y solo quedarte con los valores únicos? Además de usar reduce, estaremos utilizando otro método de Array, este es includes. Básicamente, éste último método determina si un array incluye cierto valor o no, y retorna true o false.

const unicos = array.reduce((unico, letra) => {
  if (unico.includes(letra)) {
    return unico;
  }
  
  return [...unico, letra];
}, []);

He aquí una versión concisa.

const unicos = array.reduce((unico, letra) =>
  (unico.includes(letra) ? unico : [...unico, letra]),
[]);

Usa reduce para contar el numero de veces que aparece un valor en un array

Para contar las ocurrencias de valores en un array usando reduce() podemos hacer algo como lo siguiente:

const frutas = [
  'Banana', 
  'Manzana', 
  'Naranja', 
  'Manzana', 
  'Fresa', 
  'Banana'
];

const ocurrencias = frutas.reduce((acumulador, frutaActual) => {
    return {
      ...acumulador, [frutaActual]: (acumulador[frutaActual] || 0) + 1,
    };
}, {});

// El resultado es el siguiente objeto:
// { "Banana": 2, "Manzana": 2, "Naranja": 1, "Fresa": 1 }

Nota que estamos utilizando el spread syntax o sintaxis extendida y el operador OR ||. Puedes ver este mismo ejemplo en StackBlitz: contar el número de veces que aparece un valor en un array.

Usa reduce para encontrar el valor máximo o mínimo en un array

Con reduce fácilmente puedes obtener los valores máximo y mínimo de un array con tan solo unas pocas líneas de código.

Para ilustrar, digamos que tienes un array de equipos con su respectivo puntaje.

const equipos = [
  { nombre: 'Tigres', puntos: 74 },
  { nombre: 'Los Bots', puntos: 55 },
  { nombre: 'Rockets', puntos: 80 },
  { nombre: 'Grupo Wifi', puntos: 91 },
  { nombre: 'Cafeteros', puntos: 63 },
];

¿Cómo encontrarías el valor máximo de puntos?

const max = equipos.reduce((acumulador, equipo) => {
    if (acumulador === null || equipo.puntos > acumulador) {
      return equipo.puntos;
    }

    return acumulador;
}, null);

La variable max tendría el valor 91.

En cada iteración revisamos si el número de puntos es mayor que el valor previo, o si el valor previo es null. Si así es, actualizamos el acumulador con el puntaje mayor.

En otras palabras, simplemente retornamos el puntaje mayor en cada iteración.

Ahora, ¿cómo encontrarías el valor mínimo de puntos? Solo hay que hacer un pequeño cambio, intenta identificarlo.

const min = equipos.reduce((acumulador, equipo) => {
  if (acumulador === null || equipo.puntos < acumulador) {
    return equipo.puntos;
  }

  return acumulador;
}, null);