The Many Ways to Reduce!

When I first learned about the reduce function in Javascript, I used it to get the sum of numbers in an array. It seemed like a complicated function, but I understood what it was doing and how to use it in that way. However, now that I have been diving into solving algorithms on a daily basis, I began seeing new ways to use the same method that I didn’t even know were possible. Today, I want to talk about some of those use cases!

The reduce function executes a reducer function that you give it on each element in an array. It has two arguments. The first one is a callback function and the second is the initial value you want to start with. In the case of getting the sum of an array, the callback function (accum, val) => accum + valis adding each element to the previous total as the code below shows. The second argument dictates what number the sum starts at (0 in the first example and 5 in the second).

let array = [1, 5, 10, 4]
let sum = array.reduce((accum, val) => accum + val, 0)
let sumTwo = array.reduce((accum, val) => accum + val, 5)
console.log(sum)
// 20
console.log(sumTwo)
// 25

That alone is pretty cool, but there are other ways to use reduce that make it even more functional! One very similar use is to sum values in an array of objects. This makes it easy to traverse an array of objects to find the total of a certain attribute. In the example below, let’s say we needed to add up all the ages for each person in our object array.

let objects = [
  {name: "Andrew", age: 35},
  {name: "Susan", age: 60},
  {name: "Allen", age: 62}
]
let ageTotal = objects.reduce((accum, val) => accum + val.age, 0)
console.log(ageTotal)
// 157

Now is where the really fun part comes into play. Let’s say now we wanted to sort our objects array into two arrays based on age: below 55 in one and 55 and above in another. We can still use the reduce function! To start we would change our initial value to be the object we’d like it to return but without the values added. Next we would use our callback function to determine which category we add the current object to and finally just return the accumulator (which is our now completed object). Take a minute to look through the code below.

let objects = [
  {name: "Andrew", age: 35},
  {name: "Susan", age: 60},
  {name: "Allen", age: 62}
]
// set up our returned object the way we want it returned
let initialValue = {
  young: [],
  old: []
}
// call reduce on our objects, use the callback function to sort the objects and use our initialValue object to start
let sortedByAge = objects.reduce((accum, val) => {
  val.age >= 55 ? accum.old.push(val) : accum.young.push(val)
  return accum
}, initialValue)
// If we look at our sortedByAge object we see two objects in our old array (Susan and Allen) and one object in our young array (Andrew)
// We quickly sorted through our objects and classified them based on their attributes which is extremely helpful 
// sortedByAge =
// {
 young: [
  { name: "Andrew", age: 35}
 ],
 old: [
  {name: "Susan", age: 60},
  {name: "Allen", age: 62}
 ]
}

We can also pass a third argument to our callback function for the index if we need to keep track of the current index.

I hope you found this helpful! For me it was so interesting and extremely helpful to learn more ways I could use a built in function I already knew. I definitely want to continue researching even more ways this method comes in handy!