Check out a free preview of the full The Hard Parts of Functional JavaScript course

The "Reduce Introduction" Lesson is part of the full, The Hard Parts of Functional JavaScript course featured in this preview video. Here's what you'd learn in this lesson:

Will introduces the built-in reduce method to the audience, explains what a reducer is, what an accumulator is, and presents the concept of reducing, i.e. going from two elements to one with the help of a reducer.

Preview
Close

Transcript from the "Reduce Introduction" Lesson

[00:00:00]
>> Will Sentance: Let's keep moving to what I consider the most important function in all of functional programming, by a long way. And that is reduce, we're gonna come back to this in a moment, but let's go now to the most powerful function In functional programming. Possibly, the most versatile function in all of programming.

[00:00:25]
For me, the most significant JavaScript function is probably fetch in terms of its usefulness and how important it is, how complex it is. If you've watched asynchronous hard parts,
>> Will Sentance: Watch now. Number one most significant function in functional programming, and in JavaScript, and in all, is reduce. The most versatile higher order function of all.

[00:00:48]
People,
>> Will Sentance: It is profound what reduce lets us work with, and we are gonna use it to achieve the most important thing you can do in functional programming. Under the hood, I gotta tell you now, the composed function, it all depends on this. Then it takes a mental shift to look at promise through the reduce lens.

[00:01:11]
It can even enable function composition to come. Well, we've already seen reduction, reduce in action, we just didn't realize it. Here's our map function takes them 1, 2, 3, multiplies each element, takes you to the first element multiplyBy2 put the 2 into output, onto the array. Takes the next element, runs the multiplyBy2 function on it get four put it in the output, okay?

[00:01:34]
We made some assumptions here people. And I'm gonna go down to this bit here I think to show you this. We made some assumptions. Well, maybe I can do it here, yeah, I want to do it, whatever. All right, we made some assumptions.
>> Will Sentance: (1, 2, 3) was our input, I'll do it here.

[00:01:57]
>> Will Sentance: We assumed with map that we were going to take the first element and the second element of that one, and combine it with what, Seth? Combined the elements with each of the individual elements with what?
>> Seth: The callback?
>> Will Sentance: Using a callback using to combine them into?

[00:02:14]
>> Seth: A new array.
>> Will Sentance: A new array. Why do we see an array? That's not inherent. But let's be really explicit and actually recognize that that's exactly what we did. We took the first element of (1, 2, 3), and it's gonna require a mental shift. If anybody thought about math actually like this under the hood in their head, their mathematical wizards or a genie, or whatever.

[00:02:37]
We actually took the 1, and combined it with,
>> Will Sentance: An empty array. We multiply it by 2 in the process, and combined it with an empty array to get an array with the 1 multiplied by 2 in it. That's actually what we did. We assumed here we had an array.

[00:03:01]
Let's flip our way of thinking about it, and acknowledge that actually what we did is we took our first element, multiplied it by 2, and then combined it with a empty array. Jasmine, how to combine those two? How do we combine them? How do I combine a number with an array?

[00:03:19]
>> Jasmine: You insert it in?
>> Will Sentance: Using what method?
>> Jasmine: Push.
>> Will Sentance: Push, I can bind it using multiplying element and push. I then took that combination as the input to combining with the next element, also doubled. The doubled next element, how do I combine, 2 multiplied by 2, for with an array with the element 2?

[00:03:46]
And now I combine those from two things down to one thing?
>> Seth: Pushing.
>> Will Sentance: Pushing, pushing, exactly right.
>> Will Sentance: There it is.
>> Will Sentance: And then I took that 2 and 4, which is a single thing, that's a really important to know, right? That's a single entity. That's a single value.

[00:04:05]
That's not two separate things, it's one thing. Just like a number is one thing. Just like a string is one thing. Just like an object is one thing. They may have lots of things inside of them, but they're one thing. And I took that and I combined it with the last element by doubling the last element.

[00:04:21]
And again, help me out.
>> Seth: Pushing.
>> Will Sentance: Pushing it exactly, and look at that, my 1, 2, 3 became 2, 4, 6. But not by this mental model, but by this one. What I'm really doing in my mapping, taking each element, multiplying by 2, pushing it to an array, what I am really doing in a more general sense, is taking the first element, doubling it, sure.

[00:04:51]
And then combining it by pushing into an empty array, reducing it from two things, my first element and my array, reducing them from two into a one thing. And then taking the output of that reduction from two, you reduce the price, you take it down. Reduction of two things to one, taking the output of that reduction of two things to one, and combining with the next element and reducing, this is one thing, one thing.

[00:05:23]
Combining it with an element, how many things, David, is a number and an array with two in, how many things is that?
>> David: Two.
>> Will Sentance: That's two things. And I wanna get it down to?
>> David: One-
>> Will Sentance: One thing, there it is. And I did it by doubling and pushing the element.

[00:05:40]
Take that one with the next one, double the element, and combine it to get one thing, which is exactly the same. Raise your hand if when you think about what we did in copyright manipulate, you thought about it in this process of take the element, and something with which you're gonna combine with, something we're gonna build up of, you know what they call it?

[00:06:03]
They call it the accumulator that you thought of taking each element and reducing it with the accumulator. The thing with which we're combining to get an array with a 2 in. And then taking that with the next element doubled in reducing those two from two things, reducing these, taking from two to one, two things to one.

[00:06:29]
And then reducing those two things a little bit, that output of that reduction from two to one with the next element and reducing those two things into one thing, one thing, one thing, one thing. I know this isn't all one thing, but this is one thing, right? An array is a single thing, anything that we return from a function as a single thing, I can return a raise.

[00:06:46]
And if you will be saved to a variable as a single thing, and I can save an array too. Raise your hand if you truly in your heart thought of mapping as actually being taking two to one, taking the output of that reduction and combining the next element to one, taking that one to one?

[00:07:05]
Raise your hand return if you actually, Sam, you- [LAUGH]
>> Sam: The shorthand, the name map, is a shorthand for MapReduce.
>> Will Sentance: See, I told you there will be somebody who is a gifted person, who's a gifted. But really, this is what we're doing when we map, we reduce from two to one from two to one, from two to one.

[00:07:29]
And what's so powerful about this folk, is here, here, we assumed that we were reducing each element with the accumulated being an array. But you know what folk?
>> Will Sentance: We could reduce it with say a number. How could I reduce from 2 to 1, the number 1 and the number 0?

[00:07:56]
How could I, you can think of this many ways, but how would I reduce from two things to one, Seth?
>> Seth: Adding.
>> Will Sentance: Adding, subtracting maybe. Multiplying, be a very boring. [LAUGH] What an amazing reduction it would be. But yeah, 0 and 1 we would reduce by exactly adding, so 0 and 1 would reduce therefore to what, Seth?

[00:08:18]
>> Seth: 1.
>> Will Sentance: 1, 1 and 2 would reduce to?
>> Seth: 3.
>> Will Sentance: 3 by adding, 3 and 3 would reduce, so by the way, to stress, the output of the previous reduction becomes the input plus the next element is reduce into the next reduction from 2 to 1.

[00:08:38]
3 and 3 added gives us out, Seth?
>> Seth: 6.
>> Will Sentance: 6, excellent, there it is.
>> Will Sentance: Even now, people, I wanna stress to all of you reduction is not 1, 2, 3, to 6. [SOUND] Our reduction is from two things, always to one thing, repeatedly through each element of the input array.

[00:09:04]
Reduction from 2 to 1, take that array with 2 in, reduce it with the next element to 2 and 4, reduce that to 2 or 4 with the next element, these are two things, reduce it to 1. And we've barely even seen what this paradigm, this model of thinking of data being reduced element by element with an accumulator.

[00:09:25]
Okay, actually, let's call this the rule by which we combine from 2 to 1, reduce from 2 to 1, is known as, Jasmine?
>> Jasmine: [INAUDIBLE]
>> Will Sentance: Sure, but it's gonna, it's not actually was you know I hate the names they call these things, this is not the worst name.

[00:09:46]
They call the function, the code, the instructions, of how we're gonna combine from 2 to 1. We add over multiply by 2, and then push the element, that's how we combine these two, right? We multiply them by 2 and combine it with the array by pushing, they call this the reducer, reduces from 2 to 1.

[00:10:07]
It's the rule by which we combine two things to become one, when two become one, when two become one, when two become one, when two become one, when two become one. This paradigm people for taking data, is profound what it can do. In fact, all of our, I didn't wanna give it away yet.

[00:10:31]
But the most important tool we use in functional programming, the thing that allows us to recombine functions backup. Because we put everything into single lines and saving words in different functions, you got to combine them back up again. I think that's do that in a super readable manner, is gonna use this under the hood.

[00:10:49]
We're gonna come to all of that for now, here we can bite, we saw this already. Well, actually, by the way, we can work with a number zero here, we could always combine with a string. Anyone kind of be able to see so if I combine one with a string, Charles, I get?

[00:11:03]
>> Charles: String.
>> Will Sentance: String of one, right? Combine the string of one with a two I get? String of- String of what?
>> Charles: One, two.
>> Will Sentance: One, two, [LAUGH] great language this is, combine the string of one, two, with the three, and get?
>> Charles: One, two, three.
>> Will Sentance: One two three, tight coercion where you can combine things up, even if they don't have the same data types.

[00:11:21]
Therefore, if we want to build the function that achieves this, we need to write our function, so they can handle any accumulative thing with which we are combining element by element. And then the output of that combination is used with the next element to combine those two into one, and then the output of that one is combined,.

[00:11:45]
And any logic code functionality to do the combining of elements from two to one, from two to one, from two to one, they call that the reducer.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now