Function Composition with Reduce

[00:00:00]
>> Will Sentance: Let's start off by diagramming what we're doing in my kind of high level diagram style, rather than the details of JavaScript execution. So we had, what do we have?
>> Will Sentance: Multiply by 2. Add 3. This is our array where we wanna to. By the way, I got a question from Michael, during the little break there.

[00:00:27]
He said, does this relate to what happens in React and Redux? Yeah, go and absolutely realize that it is exactly. If you only go from one thing today in terms of your practical use, it's knowing exactly what's happening with the reducers in practice. Okay, all right. It's all exactly the same as here.

[00:00:45]
All right, moreover, 2 and 3, divide by 5. And we want to run our data because we wanna do our dream. We're gonna see this slightly differently presented on the next slide. We're not gonna go into it in great detail, but like slightly differently put more white space in it basically.

[00:01:02]
And we're gonna end up with individual lines each doing one of our tasks nicely labeled. You can probably already guess what's gonna look like, it's very beautiful. Well, there you go. So it's a multiply by 2 and 3 divided by 5, and rather than chaining and parsing the result through chaining, we're gonna instead call it compose.

[00:01:20]
That means joining them up by taking our 11 in. Taking our 11 in and combining it with multiplied by 2. Combining it with multiply by 2, over to you, Virginia, combining these two gives us?
>> Virginia: 22.
>> Will Sentance: 22, by the way, that was excellent for the audio, they love that, that was perfect.

[00:01:46]
These two combined to get one, just think about that. Who ever thought of the notion of combining, reducing from two to one that actually a function definition is a thing, a number is a thing, or an input is a thing, combine them to produce one thing, from two becomes one.

[00:02:02]
Anyway, so what's our rule to combine here? Well, it's running our function on, we call this remember our accumulator, running our function on our accumulator, and then taking the output of that, and it's our combined value. And then taking that and combining it with add 3, again add 3 on 3, and its output is, so taking the two things, taking them both in and combining them by running the array element on the accumulator, the thing that's being built up.

[00:02:44]
I call it the thing we're building up, it's being updated each time, right? We're taking in building up on the second time around the for loop iteration, array position one, add 3, combine them by throwing them both into how to combine which is run functional inputs, and the second one which is the add 3, right?

[00:03:07]
The second thing going into how to combine run function on input which is to add 3, and the first thing is the 22. And then inside a run function on input we run the add 3 on the 22. Taking the add 3 and running it on the 22 outcomes?

[00:03:26]
>> Bivanesh: 25.
>> Will Sentance: 25, then we combine the 25. With the divide by 5, by running divide by 5, on the 5. And out comes what?
>> Bivanesh: 5.
>> Will Sentance: 5. There it is, folk. This here,
>> Will Sentance: How we combine them. This is gonna be known as our reducer, our from 2 becomes 1 output of which we combined with the next element 2 becomes 1.

[00:03:54]
The reducer I'm going to call here out how to combine our rule for how to combine, just so we get used to the term reducer, it doesn't throw us off. Okay, that's it. Line 1, here we go. I'm going to go around one person by person. And so Alex, you're up, line 1.

[00:04:13]
What are we storing in global memory? There's our high level sense of where we're getting to. Now let's execute it in JavaScript. Line 1, Alex.
>> Alex: Clear your function labeled multiply by 2.
>> Will Sentance: Multiply by 2. Don't anybody think that like that x. I'm breaking my rule there.

[00:04:36]
>> Will Sentance: Don't anybody think that that x is somehow globally available there, people, that's just a parameter name inside of parentheses. They just allow you to get rid of the parentheses. But it's definitely not. Don't look at that and go, hold on, we've got three xs there in global.

[00:04:54]
No, that's a parameter name projected inside parentheses. And then we've got, on the right-hand side there, return x by 2 inside curly brace. We've just got a shorthand version of it now. Okay, exactly, so it's a function. There it is. The hammer's taking x and return our x by 2.

[00:05:09]
And next line, Anna.
>> Anna: We're declaring the function add 3.
>> Will Sentance: Excellent, and it takes in x and returns x + 3, I just like this are short you can literally write their code on the right-hand side. But think of these as little strings of code, people. That's all they are.

[00:05:26]
All right, then we have divide by 5, and there's its code. I meant to ask the next person, but okay. Next line is Charles, you're up.
>> Charles: Yeah, we declare a variable, reduce.
>> Will Sentance: Can we just say, do you mind again, people, we just say we declare a function.

[00:05:50]
Just so we don't think these things are different. That's code saved, reduce. Excellent, thank you, Charles. David, next line.
>> David: Declare a function called run function on input.
>> Will Sentance: Fantastic, this is going to be run function on input. There it is. I'm going to actually say it takes in two parameters.

[00:06:09]
We can call them whatever we want. Two things, the first of which gets run as the input of the second of it. So if I pass in, I don't know a number as the first input and a function of the second one, look inside, I end up taking the second thing and running it on the first thing.

[00:06:29]
And that's a very powerful way to combine two things to become one, and then I return it out as the output. Notice how flexible reduce is, it doesn't mind if instead I were taking in an array for the numbers, and I don't know another number, and then combining, suppose I was taking array for a number.

[00:06:48]
Just to remind ourselves just briefly. It doesn't mind if I'm doing this, taking 1, 2, 3, taking in the number 0, and combining these two by adding or taking in a function a number and combining the two things by inside of my rule for reducing, rule for taking two to one running this thing on this thing to get out a number, it doesn't mind.

[00:07:16]
All it knows is that you better pass me a rule for how to combine two things of any type into one thing, and then that one thing is going to be the input of the next combination. That's all it knows. Even if one of those things you pass is in, the second in this case is actually gonna be a function, run on the first thing, get out an output, return that out into the building up.

[00:07:37]
It does not mind, it is truly the most versatile function. I think, I bet you sophisticated people out there considered this process of data reduction to be like a deep, general way of thinking about data. I bet you, I've noticed, but I bet you they do. I bet you they, right, some say yes.

[00:07:56]
One second, Sam. I promise I'll come to it. All right. I promise, we'll come to it. And there it is, we're all set up. Now, final line, Eric, left-hand side, says he do what?.
>> Eric: We're making the output.
>> Will Sentance: Beautiful.
>> Eric: Doesn't have a value yet.
>> Will Sentance: Yeah.

[00:08:12]
>> Eric: But we'll be calling reduce.
>> Will Sentance: Well-put, Eric, will-put. So, let's go coreduce with an array that is so different to the other arrays of data. This time it's an array of individual functions, which are, Eric?
>> Eric: Multiply it by 2, add 3 and divide by 5.
>> Will Sentance: Divide by 5, fantastic.

[00:08:42]
And then a function that's going to be filling out how to combine, and it's going to be run with two inputs. And it is known as here what, Eric?
>> Eric: Run function on input run.
>> Will Sentance: Run function on input, there it is. And our final thing, the thing with which we're going to combine our first function, which is our what, Eric?

[00:09:08]
>> Eric: Are building up,
>> Will Sentance: Are building up, which has what value?
>> Eric: 11.
>> Will Sentance: 11, excellent, excellent function. We create a brand new, Charles [LAUGH], all of you. Run new-
>> Group: Execution contest.
>> Will Sentance: Excellent, [LAUGH]. Was miles ahead, he finished it before we said execution. All right, there it is.

[00:09:31]
It's a big one. It's an important one, so I'm gonna do it.
>> Will Sentance: It's fine, that's big enough.
>> Will Sentance: I always go in, don't I? So, I'm gonna remember, my spacial awareness is bad. Do I got it slightly better?
>> Group: Yeah.
>> Will Sentance: It's marginally better this time, right?

[00:09:56]
Okay, actually I'll leave it open because I don't know how far it's gonna go. Into local memory we go, into local memory we go. And the first thing is our what? Andrew,
>> Andrew: The array,
>> Will Sentance: The array, which is?
>> Andrew: Multiply by 2, add 3 and divide by 5.

[00:10:17]
>> Will Sentance: Fantastic, thank you, give me a second, multiply by 2, add 3, divide by 5. I'm not gonna dwell yet on just how extraordinary, it's got a list out functions. But there's a fancy name for me to list out functions and not state the inputs and outputs as you go.

[00:10:37]
It's got a very fancy name. We'll see it in a second. But that's a big deal, this is like a special thing, and it ends up being a cool part of function programming. Okay, now, we've got our array, now we need our room for how we combine the first element with our starting point.

[00:10:54]
It's called, how to combine this parameter, what is our rule gonna be, Michael?
>> Michael: Run function on input?
>> Will Sentance: Exactly, how to combine is going to be run function on input. And it's going to take in two inputs, two arguments, two parameters here. Input will be the first we run, which, when we run it, that's gonna be our building up value.

[00:11:25]
And the second one is gonna be the fn which will end up being filled in with a array position 0, which will be what, everybody? Multiply by two. We're gonna pass in to run functional input 11 and multiply by 2. [SOUND] In they go as an input and fn.

[00:11:45]
Andwhen wait for it, we're gonna take the multiply by 2 and run it on the 11 inside of. Well, we'll get to that in a moment. But for now let's get our, yeah, so we're gonna run fn on input, there it is. Final parameter argument combination is what?

[00:12:01]
>> Bivanesh: Building up parameter with the 11 value.
>> Will Sentance: Fantastic, and very well communicated, that it is. Let's block off this local memory, so we don't. There it is, there's our local memory, people, everything we need.
>> Will Sentance: Okay, now, we enter the for-loop. I's value, Jasmine, i's value. Yeah, excellent, yeah, 0.

[00:12:31]
So, array position 0. The first half of the two things, first half, the first of the two things, we're going to reduce to 1. Array position 0 is what, Jasmine? Multiply by, you know what, actually, forgive me, Jasmin, I'm gonna write this out in full. So we know, really track what we're doing.

[00:12:53]
How to combine, it's gonna have building up and array position 0. And it's gonna become exactly as you said, Jasmine. [SOUND] It's my favorite piece.
>> Group: [LAUGH]
>> Will Sentance: Array position 0 is gonna be what, Jasmine?
>> Jasmine: Multiply by 2.
>> Will Sentance: Multiply by 2. We're so used to, at that point it'd be like a number or something we're going to combine with.

[00:13:27]
No, it's a function, and we're gonna combine it with what, Jasmine?
>> Jasmine: 11.
>> Will Sentance: 11, and we're gonna throw it into our how to combine which is what, Jasmine?
>> Jasmine: Run function on input.
>> Will Sentance: Run function on input, and into it we go. And the 11 is inserted into the multiply by 2, the 11.

[00:13:55]
And multiple by 2 go in and then we take the multiply by 2 and run it on the 11 inside, there it is. And you might be thinking, hold on, why can I not just have this function do that? Well, this function is gotta be super generic and just taking two things to combine to one.

[00:14:13]
And then it's up to us to work out how to combine them inside of this function. Because how to combine, you can combine two numbers by adding them whatever way you wanna combine them. We're combining a function and add a number, we're taking both in. And inside is where we're then gonna run the functional on the number, just reduce from 2 to1.

[00:14:29]
And then return that out. So, multiple by 2 is gonna give out. Seth, multiply by 2 is gonna give out with input of 11.
>> Seth: 22.
>> Will Sentance: 22. And that therefore is going to be our output of our how to combine with the input of 11 and array position 0 multiplied by 2.

[00:14:50]
That is to say our 22 is gonna come out and we're gonna update our value of what, Virginia? We're gonna update our value, the outputs are running, how to combine, which is run functional input with the input of 11 and 22. Sorry, 11 multiplied by 2. We got 22, we return, the out is gonna be assigned to what, Virginia?

[00:15:12]
>> Virginia: [INAUDIBLE]
>> Will Sentance: Into what, Seth?
>> Seth: Building up.
>> Will Sentance: Into building up, and there it goes. We update our building up to 22. This here, people, is our building up as we go. Each time we do our for-loop, just in case any of you were lost by this, each time we do our for-loop, we take in our building up, we do our right-hand side first.

[00:15:39]
We're taking whatever our given value building up is, which was 11. And then multiply it by 2, throw it into run functional input, throw on the multiple by2 on 11, get 22, return it out. And in the same line we then update the value of building up. If you ever see that thing where you do num Equals nom plus two.

[00:16:00]
And everything from math tells you what is this, do you remember when you first learned to code? [LAUGH] Because equals does not mean equality, it means assignment, it means, do the right hand side where it is. If nom at this point is, I don't know three, and three plus two.

[00:16:15]
Now nom is five. Update that value, never get thrown by this, you may look at this and go, hold on, how come building up be on both sides of that? You taking the building up at the beginning of that line, you do the work with it and then you update the value of building up in global.

[00:16:28]
Which you're then gonna use in the next line where this time, Virginia, I is no longer zero, this time I is?
>> Virginia: One.
>> Will Sentance: One, she's spot on, I is one. Okay, Sam, array position one and building up the two things we wanna combine, are what two things, Sam?

[00:16:50]
>> Sam: Add three and-
>> Will Sentance: Add three, you're spot on [LAUGH] thank you.
>> Sam: And then 22.
>> Will Sentance: And 22, which is our new value of building up, which is being policy and we've updated our value building up, we come back around the loop and we throw in that 22 now.

[00:17:06]
And we're gonna combine it using what rule to combine sum?
>> Sam: Run function.
>> Will Sentance: Run function on input, into it we go and inside the run function in but we take in 22 and reposition 1 which is at 3. We could take them in and we run. Well, what do we run inside Seth?

[00:17:29]
We run with-
>> Seth: Add 3-
>> Will Sentance: On.
>> Seth: 22.
>> Will Sentance: On 22. There it is. Add 3 on 22, and it gives us out 25, which we then return out. Remember, all we can do is have this function take two things and inside of it combine them in some way, in this case by running one on the other to produce one thing and then return it out.

[00:17:58]
And then we take that return out and store it where Sam?
>> Sam: Into building.
>> Will Sentance: Into building up.
>> Will Sentance: And get building up to 25. But we're not done yet. I equals 2, or I is set to 2, sorry not equals 2, I is now the value of 2.

[00:18:19]
This is a long execution context. I [LAUGH] is now two and this time, therefore ready position two is what Jasmine?
>> Jasmine: Divide by-
>> Will Sentance: Divide by five. So we got that 25, and I divide by 5. Because with building up is now 25, 25 divide by 5. What rule Jasmine do we have for how we're gonna combine them?

[00:18:44]
What's that how to combine code gonna be called?
>> Jasmine: Run function-
>> Will Sentance: Run function on input, spot on. Run function on, I slightly shortened it there but run function on input, whose result is going to be stored where Bivanesh?
>> Bivanesh: Inner function. Building up.
>> Will Sentance: Into building up, spot on, into building up, spot on Bivanesh, into building up.

[00:19:08]
Let's go into it. All it does is run inside of it. The second thing. On the first thing, right? Just make sure everyone sees that. We take in,
>> Will Sentance: Two things, number, and in this case function, and run the first one on the second one. So we're gonna run what Bivanesh inside of here?

[00:19:29]
>> Bivanesh: We'll have to divide it by five.
>> Will Sentance: Yeah, exactly, divide by 5, input of 25 returns out 5 and that then gets returned out of run function on input, we've combined two to become one inside of. We could have combined them by adding, that's what we do but you can't add a function to a number.

[00:19:46]
So instead we ran the function on the number, we had to kind of flip it around right because it's a weird thing, we're going to get this function and run it on the building up and take out the results and store it into building up. And there it is.

[00:20:02]
And that is our final value of building up, our fall loop is now done this is the length of the array with three. And so I is now two Is, now three and if we cut the other fall loop, final line Alex of our reduce function where we're combining functions one by one with an input value.

[00:20:21]
With the help of run function on input, the final line says to return what Alex?
>> Alex: Five in the sign it to output.
>> Will Sentance: And well done with the complete technical communication there. The return value is the value of building up which is the number five stored into output exactly as he said.

[00:20:42]
Folk, this is gonna turn out to transform how we write code and to be the essence of functional programming.