Pretty clickbait-y title, I know, but hear me out! I posed a shower thinking question to some of our junior developers. If you had to choose one of map
, filter
, or reduce
to use for the rest of your life, which one would you pick? While I use map
and filter
quite regularly in programs - pretty much independent of language - and I prefer to use them... they're basically derivatives or optimizations of reduce
.
How?!
So, let's look at some examples of Array.prototype.reduce()
in JavaScript. It takes a callback
function and an optional initial value
. The callback
function takes an accumulator
and the currentValue
in the array that we're reducing. Reduce is often used to sum the terms of a collection:
const sum = (accumulator, currentValue) => currentValue + accumulator
let val = [1,2,3,4,5].reduce(sum,0)
console.log(val) // => prints 15 to the console
Let's walk through the individual steps of what happens. In the first step, we have an accumulated value of 0 (we pass that as the initial value), and the current value is 1. We repeat this for each element in the array, and we return the final accumulated value.
sum(0,1) = 0 + 1 = 1 // remaining values to accumulate: [2,3,4,5]
sum(1,2) = 1 + 2 = 3 // remaining values to accumulate: [3,4,5]
sum(3,3) = 3 + 3 = 6 // remaining values to accumulate: [4,5]
sum(6,4) = 6 + 4 = 10 // remaining value to accumulate: [5]
sum(10, 5) = 10 + 5 = 15 // remaining values to accumulate: []
// return accumulator of 15
This is a pretty straightforward use case. Reduce seems to be most often used for sums and products.
You sure we don't need a map?
Photo from Julian Peters Photography
Array.prototype.map()
takes a function to apply to each element of the array, and returns the resulting array. The classic example of map
ping is doubling integers:
const doubler = x => x * 2
let val = [1,2,3,4,5].map(doubler)
console.log(val) // => prints [2,4,6,8,10] to the console
Pretty straightforward, right? So how in the world can we build map
using reduce
? Instead of our accumulator being a single value now, our accumulator will be an array. We'll apply the function to each currentValue
and append that to the end of the accumulator array:
const pushAndReturn = (arr, item) => { arr.push(item); return arr }
const map = (f, arr) => arr.reduce( (acc, x) => pushAndReturn(acc, f(x)), [])
// Let's try it!
console.log( map(doubler, [1,2,3,4,5]) ) // => prints [2,4,6,8,10]
Excellent! Works exactly as we expected. But what were all the steps taken to get that answer?
[].pushAndReturn(doubler(1)) = [2]
// remaining values to accumulate: [2,3,4,5]
[2].pushAndReturn(doubler(2)) = [2,4]
// remaining values to accumulate: [3,4,5]
[2,4].pushAndReturn(doubler(3)) = [2,4,6]
// remaining values to accumulate: [4,5]
[2,4,6].pushAndReturn(doubler(4)) = [2,4,6,8]
// remaining value to accumulate: [5]
[2,4,6,8].pushAndReturn(doubler(5)) = [2,4,6,8,10]
// remaining values to accumulate: []
// return accumulator of [2,4,6,8,10]
It's important to keep in mind that the accumulator can be any type we want. It doesn't just have to be number for summing a list of numbers. It can be literally anything.
Let's filter our $#!+
Image from Outside Magazine
Array.prototype.filter()
takes a predicate function and returns an array of values that return a truthy value when the predicate is applied. For example, if we want to get only odd numbers out of an array, we can use:
const isOdd = x => x % 2 === 1
let val = [1,2,3,4,5].filter(isOdd)
console.log(val) // => prints [1,3,5]
Let's implement filter with just reduce! It's going to seem awfully similar to our map implementation above.
const filter = (pred, arr) => arr.reduce( (acc, x) => pred(x) ? pushAndReturn(acc, x) : acc, [])
// Let's try this one now!
console.log( filter(isOdd, [1,2,3,4,5]) ) // => prints [1,3,5]
Again, let's walk through the steps to see what happens:
isOdd(1) ? [].pushAndReturn(1) : [] = [1]
// remaining values to accumulate: [2,3,4,5]
isOdd(2) ? [1].pushAndReturn(2) : [1] = [1]
// remaining values to accumulate: [3,4,5]
isOdd(3) ? [1].pushAndReturn(3) : [1] = [1,3]
// remaining values to accumulate: [4,5]
isOdd(4) ? [1,3].pushAndReturn(4) : [1,3] = [1,3]
// remaining value to accumulate: [5]
isOdd(5) ? [1,3].pushAndReturn(5) : [1,3] = [1,3,5]
// remaining values to accumulate: []
// return accumulator of [1,3,5]
So... why?
While this was mostly a thought exercise (I wouldn't necessarily use reduce()
to replace map()
in production code), it's important to remember that reduce()
can return any sort of value. Sure you can do sums, products, and concatenation with reduce... but you can also do mapping, filtering, taking elements while they match a predicate, build tree structures, create dictionaries/maps from lists/arrays... all by using reduce.
Thanks for reading!
Top comments (19)
Great article!
And I could show you a real use case for this. I have created MojiScript and implemented map, filter and reduce. Both map and filter internally call reduce. Here's some examples:
github.com/joelnet/MojiScript/blob...
github.com/joelnet/MojiScript/blob...
Well technically they (and also
reduce
) callreduceWhile
.Glad you enjoyed it! And it looks like I'm going to have to invest some time in checking out MojiScript. It looks like it could have some legs!
lol I would agree with you on MojiScript, but I am obviously biased ;)
I learned this one time when digging into the source code for the Elixir language. The Enum module there has map(), filter(), and reduce() -- but both map and filter are defined as reduce functions.
You can see it over here:
github.com/elixir-lang/elixir/blob...
I wouldn't be surprised if every other language does the same, now that I think about it.
So, yeah, write the code that reads the best for the sake of future coders, and the language will take care of simplifying the rest for you. ;-)
Perl 6 doesn't do it this way, because it can't do that easily.
If you tried to implement
map
withreduce
it would hang before producing a single value when called on an infinite sequence.You could maybe find a way to pass upwards the number of values to produce:
The thing is that iteration is done using an object based protocol, so
map
andgrep
just return an object with the appropriate functionality.(Most of the time this is abstracted away so you don't need to know how it works.)
Perl 6 is a functional language while also being a procedural language.
So it can't always make the same sort of guesses about what you mean that pure functional languages can make.
I'm just now digging into Elixir/OTP, and I'm actually kind of amused to see that 😀 thanks for pointing that out!
While reduce can pretty much do anything, I would recommend that you also mention that not to use the same hammer for every kind of nail. We developers like to stay in our familiar territory and that’s why we avoid trying out new things, it would really suck if a fellow developer uses reduce to do everything, when they could have used other more optimised things.
You are absolutely correct. I eluded to the fact that map and filter were more optimized than their
reduce
implementations, but I need to reiterate that at the end. Thanks for the feedback!Nice article. I was recently trying out some coding problems using javascript.
Array.reduce
was very useful in solving them in a functional way. It is similar tofold
in Haskell. This is a great article on the power of folds in Haskell.I hadn't read that particular paper yet, but now it's on my list 😊 Thanks for the recommendation!
I used
filter
,map
andreduce
almost every day at work and never thought of that! Great article!Maybe use
reduce
instead when you both want to filter and map at the same time? Or maybe you want to do some other operations as well.reduce
is like the swiss army knife of JS.Before anyone would be inclinded to use
reduce
for everything, since it indeed can be used to do all the things thatmap
andfilter
(as well assome
andany
), keep in mind that the same could be said (and then some) about a traditionalfor
loop.As to using reduce when you want to combine different operations, again note that the same would be true for a
for
loop. Neither afor
loop norreduce
should be used in those cases, for the very same reason: you sacrifice legilibity (and the next developer that has to modify your code won't be thanking you for your cleverness).Glad to know that I have an idea in common with such an experienced developer. I had also written an article on LinkedIn regarding this approach.
Nice! I had a few other functions I thought about implementing (
takeWhile
andevery
were on my list), but I opted not to in order to keep the article brief. I'm glad that you took the time to show those implementations in your article!I remember doing the implementation of map and fikter if I remember correctly, it was in scala. Whatever, map and filter are good because they are cornerstones of the bridge between high order abstraction and intuition
Using reduce instead of map won't be returning a new array on each iteration? Therefore lesser performance?
In JavaScript, there would be a slight performance hit if you used
reduce
to perform amap
operation because of returning an array each time. However, immutable data structures in other languages (like Clojure'svector
) would not really see a performance hit because of how they are stored. You've given me an idea on a follow up post to discuss immutability and lazy vs. eager evaluation. Thanks for the feedback!Thank you!
For the lulz you could write
pushAndReturn
as: