Check out a free preview of the full The Hard Parts of Functional JavaScript course
The "Reduce Example" 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 covers an example of the reduce function by explaining step by step how the function reduces two elements to one repeatedly inside its execution context. Understanding reduce, is understanding how elements are combined to get to the final results.
Transcript from the "Reduce Example" Lesson
[00:00:00]
>> Will Sentance: We need our function to be able to handle both. And here it is, it's known as reduce, it can handle a remarkable range of tasks. We're gonna go through it. I, because you know me, I like to hold off on giving them their fancy names until later.
[00:00:16]
I'm using how to combine to refer to our rule by which we combine our element, by element, by element. Here we're going to reduce 1, 2, 3 with our accumulate, I'm gonna call it buildingUp, our value of buildingUp which is gonna be 0. So, we're gonna combine 0 and 1 how?
[00:00:38]
Virginia, can you spot how we're gonna combine 0 and 1?
>> Virginia: Sorry what?
>> Will Sentance: How we're gonna combine 0 and 1? Can you spot Jasmine?
>> Jasmine: By adding.
>> Will Sentance: By adding. That's gonna be our rule by which we combine. And then we're gonna use the outputs, actually let's have a look at it, I think we can sort of see it here right?
[00:00:55]
We're gonna take in buildingUp which is 0, we're then gonna have our how to combine rule which is add and it's gonna combine 0 with array position 0. Which will be the number what Jasmine?
>> Jasmine: 1.
>> Will Sentance: 1. So going 0, 1, and if you look at how add works, it takes in (a and b) and returns out a + b.
[00:01:14]
So you're going to take in 0 and 1 return out 1 and store that in buildingUp. In other words we gonna take 0 and 1, return out 1, and store that in buildingUp. And then you use that as the input, there it is 1, is gonna go into add with the next value of the array which is a 2, combine them to get 3, store that in buildingUp.
[00:01:41]
Okay, all right. Here we go people and you're all ready to go. Anna line one what are we doing?
>> Anna: Declaring the function reduce.
>> Will Sentance: Declaring the function reduce. There it is beautiful into memory, into memory, there it is. Thank you Anna. Next line, let's not get confused by its interesting syntax, what are we doing Sam?
[00:02:09]
>> Sam: Declaring add.
>> Will Sentance: Declaring the function add. And it's a very simple function. It takes in an a and a b and returns out a + b. By the way, we always talk about wanting to have semantic parameter names meaningful to the reader. There's an argument in functional program to leave them a little bit more general like this, so in order we can use this function anywhere in our code, doesn't have to be specific to what data we're adding.
[00:02:36]
So, and it's very readable, because it's a short you need meaningful parameter names when you got like 30 parameters and 15 lines of code in the function. Also necessary when it's as simple and short as this. Okay, excellent, there it is saved, hopefully not too small, everyone can see it.
[00:02:51]
Charles, left-hand side here, what are we doing?
>> Charles: You're declaring a variable called sum.
>> Will Sentance: Yeah, excellent, and you know what people I'm gonna use this moment to do my other type of diagram over here to help ourselves out. So we're gonna call reduce on 1, 2, 3, add and 0.
[00:03:08]
What's it gonna do? It's gonna take in 1, 2, 3,
>> Will Sentance: Okay, it's gonna take in 1, 2, 3, it's going to take in our buildingUp, our thing with which we're going to combine. We did it with an array, which honestly, except for Sam, and real credit to Sam I don't say this ironically, literally it is remarkable if your mind is able to go, when I'm doing map what I'm really doing is reducing a list of data.
[00:03:34]
Well, not a list, a first element with an array to get an array with that element in, one array with that element doubled, and then taking that and taking the two and combining it to get 2 and 4. And then taking the 2 and 4 and combining it with a 3 to get 2, 4, 6, that's a really big shift.
[00:03:50]
So there it is our 1 and 0, how are we combining these? Michael, can you spot how we're combining them?
>> Michael: We're adding them.
>> Will Sentance: We're adding, we're running an add function on them. So we're gonna take in the first one and it's gonna give us out 1 plus 0 which is 1.
[00:04:07]
And then that's going to go into our next adding, or our next combining, and it's gonna return out 1 plus 2 which is what everybody?
>> Michael: 3.
>> Will Sentance: Geez. And then we're taking that one and taking in the building all the way our buildingUp's being updated, this is gonna be our buildingUp, buildingUp.
[00:04:34]
And we're taking it in again, and this time with a final element of the, final element of the [INAUDIBLE] which is 3, inserting into how to combine which is everybody? What is our how to combine rule? It is?
>> Michael: Add.
>> Will Sentance: Add, and it's gonna give us out 6, there it is.
[00:04:52]
This,
>> Will Sentance: People, is our accumulator which I'm calling buildingUp, what we're building up as we go.
>> Will Sentance: And this here people is our rule for how to combine, they call it the rule for a reducing, how to combine reducing from 2 to 1. All right people now let's get running our function.
[00:05:18]
There it is summed, we don't know where to store it yet because we've got to go off and run reduce. Our beautiful reduce function the most powerful versatile of all. I wanna tell you now but I can't. I gotta do the big reveal. I wanna tell you now about just imagine if what you could store in this list here that you could then combine with here, element and then use the output from 2 becomes 1, combine the next from 2 becomes 1, just imagine what you could store in here.
[00:05:52]
Don't anyone shout out. All right, good summed uninitialized for now while we go and run,
>> Will Sentance: Reduce with the input of what? Who I'm gonna call on? Eric?
>> Eric: So we have an array with 1, 2, 3 in it.
>> Will Sentance: Yep.
>> Eric: We had the function add-
>> Will Sentance: Perfect.
[00:06:14]
>> Eric: And then we have the number 0.
>> Will Sentance: Fantastic, I don't know why I'm doing the full function adds code there, but whatever. There it is, that's pretty unhelpful. Why did I do that? And then 0, okay. And we're gonna create, everybody together, a new?
>> Virginia: Execution context.
[00:06:30]
>> Will Sentance: Welcome. Good.
>> Virginia: [LAUGH].
>> Will Sentance: Seth! Seth got to cut short because he's been to hard parts before. You're so confident.
>> Virginia: [LAUGH].
>> Will Sentance: And its output when it does eventually give us a return value will be stored in summed. Let's create the execution context, I'm gonna do a big old execution context here people, there it is.
[00:06:57]
>> Will Sentance: Look at that how careful, I do see it's always at this angle, I have clearly very bad spatial awareness. There it is, and into the local memory or into the local execution context we go and what is in our local memory first? What is the first thing in our local memory Babanesh?
[00:07:16]
>> Babanesh: 1, 2, 3.
>> Will Sentance: Array is set to 1, 2, 3. Next thing Babanesh is our label how to combine is assigned what functionality? Babanesh?
>> Babanesh: Add.
>> Will Sentance: The add functionality. Meaning anywhere people that you now see how to combine inside of reduce it's actually saying add. And therefore, we're gonna pass into a and b buildingUp, which looks like it's gonna be 0, that's good.
[00:07:45]
And the first position of the array, which is 1, and combine them up by adding to get the number 1. I'm happy with that. All right, in goes a and b and our function is gonna return out a + b. Final thing, the thing with which we're going to combine, by the way, I'm going to tell you right now, I wish this function were not called reduced but called reduce from two things to one repeatedly inside itself.
[00:08:13]
Another catchy name!
>> Babanesh: Rolls off the tongue.
>> Will Sentance: Rolls off the tongue. But otherwise, you're so tempted to think the reduction is from here to here. The reduction is from that first element with the 0 combined to produce 1 through our rule of combining which is adding the two.
[00:08:30]
And then taking the output of that, have I said this enough times now? [LAUGH] Good. I would always rather say it too many times, and you're all feeling uh-huh, yeah, yeah, yeah too simple than the other way around. All right, and then the final parameter Babanesh is?
>> Babanesh: BuildingUp.
[00:08:48]
>> Will Sentance: BuildingUp which is given what value? Given what value Babanesh?
>> Babanesh: 1 plus-
>> Will Sentance: No, no, the buildingUp is?
>> Babanesh: 0.
>> Will Sentance: Is given in 0, exactly. Okay, there it is, folk. We land in reduce and the first thing we do is a for loop. David i's value at the start of the for loop is what?
[00:09:08]
>> David: 0.
>> Will Sentance: 0. Okay, array positions 0 is what, David?
>> David: 1.
>> Will Sentance: 1, redemption. BuildingUp David so we got our 1, buildingUp we're gonna combined our 1 with what David?
>> David: With buildingUp to 0-
>> Will Sentance: Which is 0, excellent. And we are gonna combine them using what rule, our how to combine which is what David?
[00:09:35]
>> David: The add function.
>> Will Sentance: It's add function, exactly. We take 0 and 1 in and we return out 1. And we store it where, David?
>> David: In buildingUp.
>> Will Sentance: Into buildingUp, exactly. We update our value of buildingUp to 1. That is to say it gets stored into buildingUp which is now 1.
[00:10:00]
There it is 1, we've reduced from 2 to become 1. And now we're gonna use that output of the first reducing 2 to become 1 to combine could reduce with the next element of the array to hopefully get one thing out. And so we're going to say now i's value Anna is?
[00:10:16]
>> Anna: 1.
>> Will Sentance: Not 0 is 1, excellent Anna. Is 1, Anna's spot on. I's value is 1 therefore array position 1 is our next element which is what Anna?
>> Anna: 2.
>> Will Sentance: 2, excellent. And our 2 is combined with buildingUp which now is no longer 0, it's been updated by our combining with the first element to be what Anna?
[00:10:46]
>> Anna: 1.
>> Will Sentance: 1, well done from Anna. 1 and 2 are gonna be combined by what rule Anna?
>> Anna: Add.
>> Will Sentance: Add is our how to combine. Outcomes 3, and we're gonna do what with that, Anna?
>> Anna: Store it in buildingUp.
>> Will Sentance: Into buildingUp, she's spot on, into buildingUp which is now gonna be 3, there it is.
[00:11:09]
Whew, and now i's final value is 2. Therefore, array position 2 Alex, is?
>> Alex: 3.
>> Will Sentance: 3, and we wanna combine it with the output of the previous combination which we stored in buildingUp. And so we do 3 and that 3 and combine them Alex by what rule?
[00:11:33]
>> Alex: Add.
>> Will Sentance: Add. It returns out 6 which gets stored into what dates the value of what Alex?
>> Alex: BuildingUp.
>> Will Sentance: BuildingUp. And the final line of the reduction function, the function, well, let's not call it that of our reduced functionality. Our function that does repeat it reduction from 2 to become 1 and then takes that and reduces it with an x value to become 1 and takes that.
[00:11:58]
The final output is our value buildingUp which is what Alex?
>> Alex: 6.
>> Will Sentance: Is 6. And we return that out into what Alex?
>> Alex: Summed.
>> Will Sentance: Into summed. And there it is people. That is the heart of the most important function that we use in functional programming, reduce.
[00:12:21]
It is not about reducing 1, 2, 3 to 6, it is about reducing 1 with 0 through some rule and then taking the output of that reduction and inserting into the rule again with an x value and reducing it from 2 to become 1, 2 to become 1.
[00:12:37]
And here's the thing people we can reduce with anything. We can reduce our values with an array, which now 1, suppose our reduction rule where instead with an array our reduction rule would be 1 and then multiply it by 2 and push it into the array, and we'd get 2 in an array.
[00:12:57]
And then we'd take that one with the 2 multiply it by 2 combine it with the 2 array, the array with 2 in and get 2, 4. And then the 2, well let's write it, we'd combine to get, so we take an array combine it by multiplying the element and pushing it in and get 2.
[00:13:15]
And then take the next one double push it in and get 2, 4 and take the next one with the 3 doubled, push it in and get 2, 4, 6. And our rule for how to combine here would be multiply element by 2 and push 2 array. And the things we'd take in would be our element and our array which updates each time.
[00:13:36]
Wow, what a versatile function this is. What a flexible function this is. All right, but do you see why I think it should be called reduce by, it [INAUDIBLE] be to reduced. Reduced from two things to one repeatedly inside the function, because it's not reducing 1, 2, 3 to 6 which you might think, cuz you can also reduce 1, 2, 3, to 2, 4, 6.
[00:14:01]
It's the reduction from element with accumulator, and that's what our buildingUp is called officially. And our how to a combine rule is called our reducer, our function, our rule for how we reduce from 2 to 1. I'm repeating it cuz it seems to easy, hm, better that then.
[00:14:19]
Another thing I want you to know before we move onto further material. And that is arrays, objects and functions have access to something known as methods. I just wanna stress, that's what I wanted say, right now reducing data with more data.
>> Will Sentance: Imagine if we could reduce something element by element repeatedly inside of reduce.
[00:14:49]
Inside reduce, imagine we could reduce something that was not data but instead something else, not a list of data but a list of something else. That would change everything about how we write code.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops