Reduce: Thinking outside the box

.reduce()

Reduce as seen above is an iterator, used to iterate through arrays. As I’ve typically seen ‘.reduce()’ it’s been used to reduce the elements of arrays to a single value. However, in my example, I will not be doing that, I will be using ‘.reduce()’ for a different purpose and in doing so hopefully helping understand how ‘.reduce()’ works and how it can be used in various ways.

In this example I will be explaining using real life scenarios, as thats always been the easiest way for myself to grasp a concept and will hopefully help others understand this as well. For this example we are going to use the real life scenario of a grocery store.

groceries = [{
    'name': 'apple',
    'inCart': true,
    'quantity': 2
}, {
    'name': 'banana',
    'inCart': false, 
    'quantity': 0
}, {
    'name': 'soda',
    'inCart': false,
    'quantity': 0
}, {
    'name': 'toilet paper',
    'inCart': true,
    'quantity': 5
}, {
    'name': 'coffee',
    'inCart': true,
    'quantity': 1
}]

Here we have an array of objects, each object represents a grocery item, it displays whether it is already in the cart using. boolean and the quantity of the item in the cart. Now that we have our list for this example lets say that we want to add everything thats in our array to our cart and if it is already added to our cart we want to add one more to the quantity. We can do this using our built in reduce method, to iterate through our array.

const newGroceryList = groceries.reduce((acc, grocery) => {
})

First, we will define our new list where we can name it whatever we want like always. We can then use a callback function inside of reduce, however here we are merely defining it directly inside using an arrow function. We are then giving this function two parameters, one will be ‘acc’ short for ‘accumulator’, the accumulator we can view as a basket, it will be the final product that will come out of this and we will dictate what’s allowed in our basket and how we can alter things before entering basket. Next parameter is our grocery, you can think of this as each individual element in our array which for our example is an object representing a grocery item. Now what should we do next? we said that we wanted to add a quantity of 1 if an item is not inside of a cart already so lets do that.

const newGroceryList = groceries.reduce((acc, grocery) => {
    if (grocery.inCart === false) {
        grocery.quantity += 1
        grocery.inCart = true
        acc.push(grocery) 
    } 
})

So we are placing a conditional if statement inside of our reduce, we are saying if our ‘inCart’ status is set to false meaning it is not in the cart, change the ‘quantity’ to add one, and change our ‘inCart’ to true. Then we want to go ahead and add this to our basket the accumulator ‘acc’ once we’ve made our changes to the grocery item. So that takes care of all of our items that are already in the cart.

const newGroceryList = groceries.reduce((acc, grocery) => {
    if (grocery.inCart === false) {
        grocery.quantity += 1
        grocery.inCart = true
        acc.push(grocery) 
    } else {
        grocery.quantity += 1
        acc.push(grocery)
})

Since we are working with a boolean value, we know that everything else in the array will already have a ‘inCart’ status of true. So all we have to do is make an else with the change of quantity and then push to our basket. Now we’ve made all these changes but we still need our return value. what new array are we taking out of this? if you guessed our accumulator then you are correct.

const newGroceryList = groceries.reduce((acc, grocery) => {
    if (grocery.inCart === false) {
        grocery.quantity += 1
        grocery.inCart = true
        acc.push(grocery) 
    } else {
        grocery.quantity += 1
        acc.push(grocery)
    } 
    return acc
}, [])

Finally, we place our return outside of our conditional and as our next parameter to our arrow function we place an empty array. This we can think of as where we want our accumulator, hence our return value to be stored, in this case it makes sense to have it in an array, so we will place an empty array there. Now lets take a look at our return value when we console log ‘newGroceryList’

[
  { name: 'apple', inCart: true, quantity: 3 },
  { name: 'banana', inCart: true, quantity: 1 },
  { name: 'soda', inCart: true, quantity: 1 },
  { name: 'toilet paper', inCart: true, quantity: 6 },
  { name: 'coffee', inCart: true, quantity: 2 }
]

Now we can see our new array of grocery objects. all having a status of ‘inCart’ and having the quantity increased by one. So instead of using reduce to reduce everything in our array to a single value we just used it to create a new array with altered values.

Hopefully this example has helped you further understand ‘.reduce()’ and allows you to brainstorm for different ways that many other built in functions can be used. Happy Coding and thank you!