Como usar el método reduce() en JavaScript

Damián De Luca

2 semanas ago

En JavaScript, el método reduce() es una de las herramientas más poderosas que podemos utilizar para trabajar con arrays. A diferencia de los métodos map() y filter(), el método reduce() ofrece una capacidad única: permite transformar un array en un único valor, ya sea un número, un objeto, o incluso un string.

A lo largo de este artículo, profundizaremos en cómo y cuándo se debe usar reduce(). Analizaremos en detalle las diferencias con los mencionados métodos filter() y map(). Y para comprende reduce() en mayor profundidad, veremos casos de uso práctico, utilizando las últimas características de JavaScript.

¿Qué es el método reduce()?

Para comenzar a comprender el tema, debemos tener en claro que el método reduce() ya lleva varios años dentro del core del lenguaje. Por su potencia y versatilidad es, hoy en día, una herramienta clave para simplificar operaciones complejas sobre arrays. A diferencia de map() y filter(), que devuelven nuevos arrays basados en el array original, reduce() toma un array y lo reduce a un único valor según la lógica que definamos.

Para comprenderlo mejor veamos la sintaxis básica aplicada a un ejemplo de código estructural:

array.reduce((acumulador, elementoActual, indice, array) => {
  // lógica de reducción
}, valorInicial);

A continuación analizaremos las partes:

acumulador: es el valor que se va acumulando a lo largo de la iteración.
elementoActual: es el valor del elemento que se está iterando en ese momento.
índice: es el índice actual del elemento que se está iterando (opcional).
array: es el array sobre el cual se llama a reduce() (opcional).
valorInicial: es el valor inicial del acumulador (opcional).

Ejemplo básico: sumar los valores de un array

Para poder visualizar mejor la versatilidad y casos de uso de este método, nada mejor que verlo en un ejemplo práctico. Uno de los casos más simples es sumar todos los valores de un array:

const numeros = [1, 2, 3, 4, 5];
const suma = numeros.reduce((acumulador, valorActual) => acumulador + valorActual, 0);
console.log(suma); // 15

En este ejemplo, comenzamos con un valor inicial de 0, y en cada iteración sumamos el valorActual al acumulador.

¿Por qué usar reduce()?

Como hemos podido apreciar hasta aquí, reduce() es una opción muy útil para nuestro día a día como programadores. Podremos aprovecharlo especialmente cuando necesitemos:

Transformar un array en un valor único. Como una suma, multiplicación, concatenación de strings o incluso la construcción de un objeto.
Realizar operaciones complejas. Aquellas que involucran múltiples pasos o cálculos sobre los datos del array.
Evitar mutaciones. Al trabajar con datos inmutables, reduce() es perfecto para aplicar transformaciones sin cambiar el estado original del array.

Ventajas de reduce() frente a otros métodos

A continuación veremos tres ventajas clave del método reduce():

Versatilidad. A diferencia de map() o filter(), que siempre devuelven un nuevo array, reduce() puede devolver cualquier tipo de valor: un número, un string, un objeto, o incluso un nuevo array.
Control total. Este método nos ofrece un control completo sobre la acumulación de datos, ya que tendremos la posibilidad de definir la lógica en cada paso de la iteración.
Minimización de código. Al reducir un array en un único valor, podremos evitar múltiples pasos innecesarios en el código.

Diferencias entre reduce(), map() y filter()

Aunque map(), filter() y reduce() son métodos de orden superior que se usan para trabajar con array, cada una tiene un propósito diferente:

map() toma un array y devuelve un nuevo array donde cada elemento ha sido transformado según una función.

  const numeros = [1, 2, 3];
  const dobles = numeros.map(num => num * 2);
  console.log(dobles); // [2, 4, 6]

filter() permite crear un nuevo array que contiene solo los elementos que «pasan» una condición específica.

  const numeros = [1, 2, 3, 4, 5];
  const pares = numeros.filter(num => num % 2 === 0);
  console.log(pares); // [2, 4]

reduce() es una opción que, a diferencia de map() y filter(), no devuelve un nuevo array, sino que «reduce» los elementos de un array en un solo valor.

  const numeros = [1, 2, 3, 4, 5];
  const suma = numeros.reduce((acumulador, valorActual) => acumulador + valorActual, 0);
  console.log(suma); // 15

En resumen, mientras map() transforma un array, y filter() lo filtra, reduce() lo reduce a un valor único. Estas funciones pueden incluso combinarse para crear soluciones más complejas.

Casos de uso comunes para reduce()

En esta sección analizaremos casos de uso práctico en los que podremos utilizar reduce() para nuestros proyectos.

1. Sumar elementos en un Array

Este es uno de los usos más comunes y simples de reduce(), como ya vimos:

const numeros = [10, 20, 30];
const suma = numeros.reduce((acc, val) => acc + val, 0);
console.log(suma); // 60

2. Convertir un Array en un Objeto

Imaginemos que tenemos un array de objetos y necesitamos convertirlo en un solo objeto donde las claves sean identificadores únicos:

const productos = [
  { id: 1, nombre: 'Camisa', precio: 200 },
  { id: 2, nombre: 'Pantalón', precio: 300 },
  { id: 3, nombre: 'Zapatos', precio: 400 },
];

const productosPorId = productos.reduce((acc, producto) => {
  acc[producto.id] = producto;
  return acc;
}, {});

console.log(productosPorId);
/* 
{
  1: { id: 1, nombre: 'Camisa', precio: 200 },
  2: { id: 2, nombre: 'Pantalón', precio: 300 },
  3: { id: 3, nombre: 'Zapatos', precio: 400 }
}
*/

3. Contar la frecuencia de elementos

Otro uso popular es contar cuántas veces aparece cada valor en un array:

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

const contador = frutas.reduce((acc, fruta) => {
  acc[fruta] = (acc[fruta] || 0) + 1;
  return acc;
}, {});

console.log(contador); // { manzana: 2, naranja: 1, pera: 2 }

4. Aplanar Arrays (Flatten Arrays)

Si contamos con arrays dentro de otro array, el método reduce() puede «aplanarlo» todo en uno solo:

const datos = [[1, 2], [3, 4], [5, 6]];

const plano = datos.reduce((acc, val) => acc.concat(val), []);
console.log(plano); // [1, 2, 3, 4, 5, 6]

Usar el método reduce() con las nuevas características de JavaScript

JavaScript ha evolucionado con nuevas características que pueden hacer que el uso del método reduce() sea aún más expresivo y eficiente. Veamos un ejemplo que utiliza las destructuraciones y las funciones flecha para mayor claridad:

const usuarios = [
  { nombre: 'Pedro', edad: 30 },
  { nombre: 'Luisa', edad: 25 },
  { nombre: 'Carlos', edad: 35 }
];

const edadesTotales = usuarios.reduce((total, { edad }) => total + edad, 0);
console.log(edadesTotales); // 90

En conclusión

El método reduce() de JavaScript es una herramienta increíblemente flexible que, cuando se comprende bien, puede reducir la complejidad del código al operar sobre arrays. Al combinarlo con técnicas modernas del lenguaje, como la desestructuración y las funciones flecha, podemos escribir código más limpio y mantenible.

Es fundamental conocer cuándo y cómo utilizar el método reduce() para aprovechar al máximo su potencial y resolver problemas de manera eficiente.

Podremos leer más sobre el método reduce en la documentación de MD N.