Transform an Array into a Single Value using Reduce

Reduce an Array into a Single Object

Use Reduce to Filter and Map over Large Datasets

Use the Optional Reduce Arguments

Avoid Common Mistakes when Working with Reduce

Learn to Flatten and Flatmap Arrays with Reduce

Compose Functions with Reduce

Safely inspect nested objects with Reduce

Reduce Data with Javascript Array#reduce

Javascript has first-class functions which means that any function can stored, passed around, and returned just like an Object can. This allows for a lot of flexibility with how you call functions. This allows us to use array reduction to create functional pipelines by composing arrays of functions.

[00:00] When you think about reducing or raising programming, you know that it means to take some list of data and programmatically transform that data into some other value. When you learn about functional programming, one of the core concepts that jump out at you is, "Well, hey, if I have first-class functions in my programming language, like JavaScript does, then really functions are just data."

[00:27] If you put these two ideas together, something interesting happens. Before we dig too deeply into that, I'd like to set the stage here. I'd like to talk about the kind of operation we're going to be doing and what would be a naïve way to do that.

[00:40] Let's say we have a bunch of simple mathematical functions. We're going to be able to increment and decrement a value, and we're going to be able to double and halve a value.

[01:14] Now, let's say that, for whatever reason, we have this requirement that we're going to get some input value and we need to increment that value, then we need to double that value, and then we need to decrement that value.

[01:31] One way that we could do that would be to say our initial value = 1. Our incremented value = increment initial value. Our doubled value = double incremented value. Our final value = decrement doubled value.

[01:57] If we say cancel.log final value, we see that the final outcome here is 3. I hope that this is setting off a whole bunch of alarm bells for you. You wouldn't actually want to do it this way.

[02:17] You're initializing all these different variables. You're making your code much more complex to read, and you're introducing mistakes. What if I accidentally decremented my initial value because I totally just boneheadedly forgot that I'm changing my variables or whatever?

[02:34] This is not the way to do this. You think, "OK, I'm a good programmer. I'm going to write a single function which captures this behavior and doesn't pollute my code space and my scope with all these other variables."

[02:52] Instead of doing it this way, I'm too smart to use all of these small functions up there. I'm going to write a function called transform. It takes an input, and it returns (input + 1) * 2 - 1. I'm going to say our final value = transform initial value. Same answer.

[03:24] This is a little bit better, but I would encourage you to consider, in this highly contrived example but also in real examples that you will encounter in your real day-to-day lives, another approach, which is don't take all of this complex behavior and stick it all in one line that just has to work and don't think too hard about it later if it's not working. Just cross your fingers and hope for the best.

[03:53] Let's be good functional programmers here, and let's use functional composition, which means that, instead of writing a function like this, we're going to create what's known as a pipeline.

[04:06] You might hear this term thrown around, because pipelines are really popular right now. They're useful in things like stream computing. They're useful when you're doing big data analysis. All the Reactive stuff just loves this.

[04:20] A pipeline is a term for a series of functions that get applied to some initial value in order to return some final value. This pipeline can be invoked as just one single function, so you don't have all these intermediary values littering up your code base.

[04:36] Pipelines work great at large scale, Hadoop, Big Data, whatever, but they work just as well in simple little JavaScript stuff. In our little example here, you're going to see exactly what that means.

[04:49] The behavior we want to capture is we want to increment a value. Then we want to double that. Then we want to decrement that.

[05:00] Our pipeline is just defined by listing the three functions in the order that we want to use them. Now, we can say our final value = pipeline.reduce -- we're going to get to reduce eventually, right -- which takes the accumulator and the function and takes the initial value.

[05:24] Remember how reduce works. The accumulator is whatever got returned the last time this function ran and FN in this case. This is the value in our array. When we call this, FN, the first time, is going to be increment, and the accumulator is going to be the initial value.

[05:39] We're going to increment the initial value, which is 1. That should give us 2. Then the next time this is called, the accumulator is going to be = to 2. The function, we want to apply the double function, so that's going to return 4. Then we're going to pass 4 in as the accumulator and decrement as the function. In order to make this work, this is super simple. Watch.

[06:00] We just want to say return an application of the function to the accumulator. Now, when we run this, we see that it gives us exactly what we want. Now this is way cool. This is so much cooler than you might think, because this is totally composed. We can look at this pipeline right here, and what do we notice about it? This is an array.

[06:23] That means that this array can be programmatically generated. We can have some other piece of our code base somewhere. Maybe for this particular use case, because it did a bunch of look-ups, the pipeline is increment, then double, then decrement. Maybe if some flag somewhere else in our system is set, we want to increment it three times, then double it, then increment it, increment it, and halve it.

[06:51] Imagine if we were doing this the other way where we had all of this custom logic and this big, complex listed mathematical expression. You couldn't just easily mutate that. Further, you couldn't look at it and see it as just this set of very simple functions.

[07:05] You can read this. You know you're going to increment something three times. You're going to double it, increment it two more times, and then halve it. When we run this, we see the answer is five instead of three. This should be reminiscent if you're familiar with Unix pipes. It's almost like we just did this.

[07:40] That's pretty awesome. The outcome...We don't care about anything that happens in the middle. What we care about is the final output of that process. Some people like to think about this in the opposite direction.

[07:54] I just would like to take one last second here and remind you that reduceRight is also a function, in which case you're going to halve the value first, then increment, increment, double, increment, increment, increment. ReduceRight means, rather than starting at the first value, start at the last value and work backwards. If we reduce this to the right, then we get that.

Course

Reduce Data with Javascript Array#reduce

Compose Functions with Reduce

Share this video with your friends