Apuntes JavaScript

Reduce

reduce() es uno de los métodos más poderosos en JavaScript para trabajar con arrays. Se usa para reducir un array a un solo valor, acumulando cada elemento con una función.

Sintaxis

CÓDIGO COPIADO !
COPIAR
array.reduce((acumulador, elementoActual, índice, arrayOriginal) => {
    // Lógica de acumulación
}, valorInicial);

Parámetros:

  • acumulador: Guarda el resultado acumulado en cada iteración.
  • elementoActual: El elemento actual del array en la iteración.
  • índice (opcional): Índice del elemento actual.
  • arrayOriginal (opcional): El array sobre el que se ejecuta reduce().
  • valorInicial (opcional): Valor inicial del acumulador (si no se proporciona, es el primer elemento del array).

Ejemplo: Sumar un array

El acumulador inicia en 0 (porque lo pasamos como valorInicial) y en cada iteración, el numero se suma al acumulador.
CÓDIGO COPIADO !
COPIAR
const numeros = [1, 2, 3, 4, 5];

const suma = numeros.reduce((acumulador, numero) => {
    return acumulador + numero;
}, 0);

console.log(suma); // 15

Ejemplo: Encontrar el número mayor

Comenzamos con el primer número del array como valorInicial y en cada iteración, verificamos si el número actual es mayor que el acumulador y lo reemplazamos si lo es.
CÓDIGO COPIADO !
COPIAR
const numeros = [10, 25, 8, 99, 32];

const maximo = numeros.reduce((acumulador, numero) => {
    return numero > acumulador ? numero : acumulador;
}, numeros[0]);

console.log(maximo); // 99

Ejemplo: Contar ocurrencias de elementos en un array

Iniciamos acumulador como un objeto vacío {} y en cada iteración, sumamos 1 al contador de la fruta actual.
CÓDIGO COPIADO !
COPIAR
const frutas = ["manzana", "banana", "naranja", "manzana", "banana", "manzana"];

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

console.log(conteo);
/* Salida:
{
    manzana: 3,
    banana: 2,
    naranja: 1
}
*/

Ejemplo: Convertir un array en un solo string

Aquí no pasamos valorInicial, por lo que reduce() usa "Hola" como inicial y empieza desde "mundo".
CÓDIGO COPIADO !
COPIAR
const palabras = ["Hola", "mundo", "desde", "JavaScript"];

const frase = palabras.reduce((acumulador, palabra) => {
    return acumulador + " " + palabra;
});

console.log(frase); // "Hola mundo desde JavaScript"

Ejemplo: Agrupar objetos por propiedad

Agrupamos a las personas según su edad dentro de un objeto.
CÓDIGO COPIADO !
COPIAR
const personas = [
    { nombre: "Pedro", edad: 30 },
    { nombre: "Ana", edad: 25 },
    { nombre: "Luis", edad: 30 },
    { nombre: "Sofía", edad: 25 }
];

const agrupado = personas.reduce((acumulador, persona) => {
    if (!acumulador[persona.edad]) {
        acumulador[persona.edad] = [];
    }
    acumulador[persona.edad].push(persona);
    return acumulador;
}, {});

console.log(agrupado);
/*
Salida:
{
    30: [{ nombre: "Pedro", edad: 30 }, { nombre: "Luis", edad: 30 }],
    25: [{ nombre: "Ana", edad: 25 }, { nombre: "Sofía", edad: 25 }]
}
*/

¿Cuándo usar reduce()?

Para sumar, contar, agrupar, transformar o reducir un array a un solo valor.
Evitarlo si hay formas más simples (map(), filter(), find(), etc.).