# 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

```javascript
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
    
    ```javascript
    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
    
    ```javascript
    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
    
    ```javascript
    
    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
    
    ```javascript
    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
    
    ```javascript
    
    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
    
    ```javascript
    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.