Introducción

Mientras toma un curso de introducción a Javascript y aprende sobre los diferentes métodos de los Arrays. No entendí del todo el poder real del método de reducción y solo después de volver a él por segunda vez me doy cuenta de lo verdaderamente útil que es este método. Espero que el artículo pueda aclarar a algunos cómo funciona este método y cuándo usarlo.

El método

Array.prototype.reduce (función de devolución de llamada)
Array.prototype.reduce (función de devolución de llamada, valor inicial)

¿Qué hace exactamente este método?

El método reduce() procesa cada elemento de una matriz usando una función de devolución de llamada, acumulando el resultado en un solo valor. Si se proporciona un valor inicial, se utiliza como punto de partida; de lo contrario, se utiliza el primer elemento de la matriz y la iteración comienza desde el segundo elemento.

Parámetros de la función de devolución de llamada

función de devolución de llamada (acumulador, valor actual, índice actual, matriz){}

acumulador

El resultado acumulado de la iteración anterior o el valor inicial si se proporciona.

valor actual

El valor del elemento de matriz actual que se está procesando.

índice actual

El índice del elemento actual, comenzando en 0 si se proporciona un valor inicial; de lo contrario, 1.

formación

La matriz en la que se ejecuta el método reduce().

Valor inicial

Cuando se utiliza el método de reducción sin un valor inicial, la función de devolución de llamada tomará el primer elemento de la matriz y lo inicializará como acumulador y luego iterará por el resto de la matriz.

Casos de uso

El ejemplo más común que encontrará al utilizar el método de reducción es la suma de una matriz.

const ages = [23, 15, 45, 13, 66, 54, 38];
let sumOfAges = ages.reduce(function(sumOfAges, currentAge){
    sumOfAges = sumOfAges   currentAge;
    return sumOfAges;
}); // 254

Aunque sí, esto es exactamente para lo que el método reduce es bueno y bueno, hay mucho más que puede hacer.

Obtener la edad máxima de un grupo

const ages = [23, 15, 45, 13, 66, 54, 38];
let oldestPerson = ages.reduce(function(maxAge, currentAge){
    if(currentAge>maxAge){
        maxAge = currentAge;
    }
    return maxAge;
}); // 66

Aquí estamos usando el método de reducción para guardar la edad más alta que encontramos en la matriz y devolver ese valor una vez iterado a través de toda la matriz.

Eliminar duplicados en una matriz

const store = ['apple', 'pear', 'apple', 'orange', 'apple', 'pear'];
let itemCatalogue = store.reduce(function(uniqueStoreItems, currentItem){
    if(!uniqueStoreItems.includes(currentItem)){
        uniqueStoreItems.push(currentItem);
    }
    return uniqueStoreItems;
}, []); // ['apple', 'pear', 'orange']

Importante tener en cuenta aquí que para el valor inicial en el método de reducción estamos proporcionando una matriz vacía, []. Esto significa que el acumulador ahora es una matriz y nuestra función de devolución de llamada envía solo elementos que aún no están en esa matriz. Como resultado, hemos eliminado los duplicados.

Obtener un recuento de elementos en una matriz

const store = ['apple', 'pear', 'apple', 'orange', 'apple', 'pear'];
let itemCount = store.reduce(function(count, currentItem){
    count[currentItem] = (count[currentItem] || 0)   1;
    return count;
}, {}); // { apple: 3, pear: 2, orange: 1 }

Importante a tener en cuenta aquí es que el valor inicial es un objeto vacío. A medida que revisamos los artículos en la tienda, completamos el artículo con el recuento.

Conclusión

En primer lugar, si has llegado hasta aquí, ¡gracias por leer! Mi objetivo principal al escribir este artículo fue solidificar mi comprensión del método de reducción y espero que tal vez hayas aprendido algo nuevo aquí también. El método de reducción tiene muchas aplicaciones realmente interesantes y es realmente interesante de usar. ¿Tiene otros casos de uso o trucos divertidos con el método? ¡Me encantaría saberlo!