Beyond the Usual, Passive DEI Efforts in Tech

Blog:JavaScript Array Reduce: Say What?!

Loading...
Manny Becerra as a child

April 2018

I enjoy wrangling code; I especially enjoy working with data—lots of it!—for conveying helpful trends, creating meaningful user experiences, and uplifting impactful stories. When working with data either for the purposes of analyzing or presenting it in some form, however, you'll likely have to transform it in some sort of way so you can better work with it for piecing the final "picture" together.

Say hello to Array's reduce method

Reduce method signature: someArray.reduce(callback, initialValue)

This is where I've found an array's reduce method (in JavaScript) handy-dandy. I won't go too deep into all the use cases reduce can be helpful with, but I'll highlight an example or two that can hopefully paint a decent picture of its helpfulness.

To start, let's look at the reduce method signature, which is as follows: someArray.reduce(callback, initialValue). By definition, the reduce() method reduces an array to a single value, which can be a number, another array or an object for instance. Given this, the reduce method signature translates into the following, high-level process:

  • For the corresponding array, and for each-and-every item in the array, invoke the callback (function) parameter, then
  • Do something in the callback—it's up to you—and return the new value (required), which is then passed along to the next item in the array to do something with (e.g. add up a total)
  • Rinse-and-repeat this process until there are no more items in the array
  • Once the last item in the array is invoked and a value is returned, this is the reduced value returned
  • Also, and for the first invocation only, start with the optional value, initialValue.

Example

Let's take a look at an example:

'use strict';

const myArrayOfNumbers = [1, 2, 1, 1, 3, 4, 5, 5, 6, 10, 21, 23, 11, 10]

// Remove repeated values from myArray so we only have unique values
const myDeDoupedArray = myArrayOfNumbers.reduce(function (accumulator, currentValue) {
  return accumulator.indexOf(currentValue) === -1
    ? [...accumulator, currentValue]
    : [...accumulator]
}, [])

Let's unpack this.

  • We have an array of numbers in a variable "cleverly" called myArrayOfNumbers. Some are already unique to begin with, others are not (we have multiple instances of a number, e.g. 5)
  • Working backwards, we reduce myArrayOfNumbers to a new, single value (also an array) and assign it to a new variable called myDeDoupedArray
  • Within the reduce, we essentially return 1 of 2 possible array values depending on 1 condition: is the current number being iterated on already in our accumulated array? if not, include it in the accumulator array. If it is already in the accumulated array, skip it and return the current accumulation of values
  • We initialize our reducer with an empty array, [].

That's it. Once the reducer is complete, we should end-up with a new array as follows: [1, 2, 3, 4, 5, 6, 10, 21, 23, 11].

Note: within our reducers callback, we leverage the spread operator to create and return our accumulated array. I'll cover this operation in a future post if folks fancy but it's likely well documented that you should have no trouble finding great resources with a 1 or 2 online searches.

Same example, different type

Now, let's do the same thing we did previously, but instead of working with number values for each item in our array, we'll work with objects:

'use strict';

const myArrayOfNumbers = [{ value: 1 }, { value: 2 }, { value: 1 }, { value: 1 }, { value: 3 }, { value: 4 }, { value: 5 }, { value: 5 }, { value: 6 }, { value: 10 }, { value: 21 }, { value: 23 }, { value: 11 }, { value: 10 }]

// Remove repeated values from myArray so we only have unique values
const myDeDoupedArray = myArrayOfNumbers.reduce(function (accumulator, currentItem) {
  return !accumulator.find(item => item.value === currentItem.value)
    ? [...accumulator, currentItem]
    : [...accumulator]
}, [])

We're effectively doing the same thing as the first example, except his time, we leverage another array method by the name of find to search through our accumulator array to determine if an object item already exist or not.

Pro tip: You can transform an array of items into an array using the reduce method. Hint: initialize with an empty object literal, {}.



Alright, your turn to give reduce a try—have at it and don't hesitate to reach out if you have any questions along the way!

Related:


Loading...
Manny Becerra as a child

I operate from a place of compassion, possibility and imagination. My work and efforts share a common goal: create a better, sustainable and equitable world by building inclusive communities, products & experiences.