The Javascript reduce method

The javascript reduce method is one of the most powerful javascript higher-order functions. In this article, we are going to see how it works, when to use it and some examples of cool pieces of stuff that the method can perform

Things to know when using reduce

• It is used on arrays, but cant be used in an object or a string unless converted to an array

• returns a single value, imagine you have a basket of different items, each of them has a price and you want to calculate the total price of the items, you can use a for loop but reduce is the ideal method to use, it would combine the items in the basket according to what we want in this case the price, combine it and convert the array to a single value

• does not change the original array

• does not execute a function for empty array elements

Here is the reduce syntax

array.reduce(function(total,currentValue,currentIndex,arr),initialValue)

The reduce function takes in a callback function to execute each element in the array. The function is called with four parameters and the last two are optional.

1. total or accumulator

   This is the value that results from the previous call of the callback function. If the initial value is not specified the value of the array is equal to zero

2. current value

   This is the value of the current element.

3. current index

   The index position of the current element

4. array

   The array to be called by the reduce method

use case examples of the reduce method

Remember you don't have to return a single value, You can also reduce an array to a new array or an object

1. Sum up values in an array

    let array = [10, 10, 40];
   
    let isReduced = array.reduce((total, currentIndex) => {
      return total += currentIndex ;
    }, 0);
   
    console.log(isReduced); //60
   

2. Sum up values in an array containing objects

    const prices = [{ price: 10 }, { price: 20 }, { price: 30 }];
   
    const totalPrice = prices.reduce(
      (accumulator, currentValue) => accumulator + currentValue.price,
      0
    );
   
    console.log(totalPrice); //60
   

3. Flatten an array

   Here, The initial value is an empty array, we use the concat() method to add the values to the initial array

   
    const isFlattened = [
      [1, 2, 3, 4],
      [5, 6, 7],
      [8, 9],
    ].reduce((accumulator, currentValue) => accumulator.concat(currentValue), []);
   
    console.log(isFlattened);  //[1,2,3,4,5,6,7,8,9]
   

4. Counting instances of values in an object

   Get the number of each item in a collection

    const drinks = ["coke", "fanta", "pepsi", "coke", "pepsi"];
   
    let reduced = drinks.reduce((allDrinks, currentDrink) => {
      if (!allDrinks[currentDrink]) {
        allDrinks[currentDrink] = 1;
      } else {
        allDrinks[currentDrink] = allDrinks[currentDrink] + 1;
      }
   
      return allDrinks;
    }, {});
   
    console.log(reduced);  //{ coke: 2, fanta: 1, pepsi: 2 }
   

5. Remove duplicate elements from an array

   There are convenient ways to do this using sets and array.from

   
    const drinks = ["coke", "fanta", "pepsi", "coke", "pepsi"];
   
    let reduced = drinks.reduce((allDrinks, drink) => {
      if (!allDrinks.includes(drink)) {
        allDrinks.push(drink);
      }
      return allDrinks;
    }, []);
   
    console.log(reduced); //[ 'coke', 'fanta', 'pepsi' ]
   

6. Replace .filter().map()

   Instead of using .filter().map() you can use reduce to enhance the readability of your code

    const nums = [-50, 10, 20, 0];
   
    const doubledPositive = nums.reduce((accumulator, currentValue) => {
      if (currentValue > 0) {
        const doubled = currentValue * 2;
        return [...accumulator, doubled];
      }
      return accumulator;
    }, []);
   
    console.log(doubledPositive); // [20,40]
   

Conclusion

You can see how reduced is a powerful method, It can be used many cool stuffs. Also, there are instances where you will be required to provide an initialValue and instances in which you are not required.