Powerful JS Reduce Function

You can use it to solve any data related problem

With ES6 Javascript and beyond, now you can map, filter, reduce, sort, flatten and much more over an array. It’s really pretty straight forward to think, succinct an elegant.

But sometimes, the big unknown of this list is reduce.

You may not be aware yet of the power of this method, let’s take a look.

Maybe you imagine that the only way to “reduce” an array is turning it into something “smaller”, like a number, or a string. For example:

If I have the array [ 1, 2, 3 ] I can reduce it by summing its terms, so 1 + 2 + 3 = 6, or by multiplying them, so 1 * 2 * 3 = 6, or by simply concatenate the numbers as characters, so the string “123”.

But, in reality reduce is very powerful and can accomplish any data transformation. You can go from Array to Array, Array to Number, Array to Object, Object to Array, or really anything you can imagine.

So, I am going to argue that the name “reduce” is not making it justice. The name should be “transform” and then, in your mind, you are always sure that this function can be used in a lot of more contexts.

So, we are going to be looking some code examples now, let’s get into them!

Example Set 1: Sum, Sum-Product and Max

The “traditional way” of thinking about reduce is represented by this examples. You are actually reducing an array into a number in each of this examples:

Sum, SumProduct and Max Number implemented with REDUCE

And the console says:

So, just a brief explanation of each example:

Sum : Start with 0, take each element and sum it to the accumulated value.

: Start with 0, take each element and sum it to the accumulated value. SumProduct : Start with 0, take each pair (number and factor) and sum number * factor into the accumulated value.

: Start with 0, take each pair (number and factor) and sum number * factor into the accumulated value. MaxNumber: Start with nothing and return the first element, if nothing is accumulated, otherwise return the number if it’s bigger that the accumulated or the accumulated value if not.

Example Set 2: Map, Filter, Filter & Map and FlatMap

Now, we are going one step further and actually implementing the classic map, filter, filter and then map (the other order is also possible) and flatMap functions. All of the are really a subset of reduce (“aka transform”).

Map, Filter, Filter & Map and FlatMap implemented with REDUCE

And the console says:

A brief explanation of each example:

Map : Start with an empty array, take an array and a function and return the value accumulated plus the current element with the function applied to it.

: Start with an empty array, take an array and a function and return the value accumulated plus the current element with the function applied to it. Filter : Start with an empty array, evaluate the function on the current element and if false , just return the accumulated value (so, skip this element) and otherwise return the value accumulated plus the current element.

: Start with an empty array, evaluate the function on the current element and if , just return the accumulated value (so, skip this element) and otherwise return the value accumulated plus the current element. FilterMap : Take an array, a function to use as filter and a function to map, and combine the two former processes.

: Take an array, a function to use as filter and a function to map, and combine the two former processes. FlatMap: Start with an empty array, take an array and a function and if the element itself is an array, spread the result over the accumulated value, otherwise, just return the value accumulated plus the current element with the function applied to it.

Example Set 3: Unique, Sort and Reverse

This are also very useful functions that can be implemented with reduce. The big advantage over native functions provided by the Array.Prototype, is that you can combine more than one transformation in one step, if you wish… But really, the purpose of this examples is just show to you more power of the reduce function:

Unique, Sort and Reverse implemented with REDUCE

And the console says:

A brief explanation of each example:

Unique : Start with an empty array, take an element and check if it’s already in the accumulated value. If present, just return the accumulated value (so skip it) otherwise return the accumulated value plus the element.

: Start with an empty array, take an element and check if it’s already in the accumulated value. If present, just return the accumulated value (so skip it) otherwise return the accumulated value plus the element. Sort : Start with an empty array and separate the accumulated value into 2 sets: The set of element “less or equal than the current value” and the set of elements “greater than the current value”. So, after that, just return both sets with the current element “in the middle”.

: Start with an empty array and separate the accumulated value into 2 sets: The set of element “less or equal than the current value” and the set of elements “greater than the current value”. So, after that, just return both sets with the current element “in the middle”. Reverse: With ES6 it’s pretty straight forward. Just return the value and append the accumulated value, so the last element of each iteration will be always at first position of the array.

Example Set 4: Object into Array and Array into Object

If the synonym of reduce “transform” was not clear, from this point is really obvious. Sometimes you need to convert an Array into an Object or viceversa. What function can you use? Yes! Reduce!

Object To Array and Array To Object implemented with REDUCE

And the console says:

A brief explanation of each example: