Check out a free preview of the full Hard Parts: Functional JS Foundations course:
The "Function Composition" Lesson is part of the full, Hard Parts: Functional JS Foundations course featured in this preview video. Here's what you'd learn in this lesson:

Will dives into function composition, and more specifically referential transparency which means replacing the execution of a function with its output. Using reduce with other functions as parameters is also described. - https://static.frontendmasters.com/resources/2019-07-31-hard-parts-functional-js/functional-programming.pdf

Get Unlimited Access Now

Transcript from the "Function Composition" Lesson

[00:00:00]
>> Will Sentance: For one thing, we gonna make sure our outputs an array in order to be the chain more stuff on it. What if I wanna chain up functions and list them up, list them out rather than save the result, positive a new function, where the output isn't an array that has a bunch of shared functions I can chain along?

[00:00:18] We'll see what's in a second, but first, thumbs on, it was I say the output of each higher order function filter reduce, where it's an array reduces isn't here, because we combining with a number. Has access to all the other higher order functions, Matt reduce for through the prototype chain.

[00:00:32] He will thumbs on this chaining in the conventional sense, you lost me, clear, clarifications. People, it's okay to ask clarification questions, we're not getting many. All right, people. reduce,filter and chaining higher order functions. Easier to add features. We can reuse filter with a thousand different filtering scenarios. I can chain that with other functions.

[00:00:53] More readable. That's pretty readable. Here is my array filtered by this condition and then reduce it by adding each element to 0 and then taking it out putting that reduction, I'm putting it into the next element and combining with that to add up and sum up the filtered array.

[00:01:08] Much more readable in the individual steps we've followed, powerfully more readable, look at that. Now, problem, I'll actually think harder than to debug than a for-loop. [INAUDIBLE] seen everything. Here, I have no idea what I'm doing, but now you do. As long as you understand what it's doing it's just as easy to debug.

[00:01:27] But you've gotta know what it's doing. And reduce is going to enable us to do something even more powerful. And now, we get into it. I think we pair for now, welcome to pairing very soon. Here it is, function composition itself. Function composition itself. And we'll cover pure functions here as well, and point freestyle and data mutability.

[00:02:03] But the most interesting piece by far, people is function composition. Very, very special. So function position, we take individual functions and join them back up again. Individual lines of code or a couple of lines of code like filter and map and then integrated into their little mini functions, tiny functions.

[00:02:23] I'm enjoying the backup again by chaining. Chaining with dots relies on JavaScript prototype feature, functions return arrays which have access to all the hardware functions. And then passing the output into the next function using the implicit, this keyword inside of here. Somebody shouted out earlier. Whatever when a chain functions that just return a regular output, not an array.

[00:02:45] By the way, also wonderful in chain functions are gonna link them up in a way that's a little bit less dependent on the prototype with nature of JavaScript. Which isn't maybe the most functional programming paradigmatically consistent style. So it's series number on the one on chain that multiply by 2, it takes 11, add 314, I thought it worked.

[00:03:03] Takes what, you got it, right? Those outputs don't automatically get access to the next. Well, there's a way of doing it. Let's do this, multiplyBy 2, keep it very simple with parameter name x. And then the result is return that by 2, x return that by 3. I can run multiplyBy2 with the input of 11.

[00:03:24] That right-hand side, Virginia, evaluates to 11 by 2.
>> Virginia: 22.
>> Will Sentance: 22. Stole back into where Virginia.
>> Virginia: Into initial result.
>> Will Sentance: Excellent, excellent, I pull 22 in there, add 3. I get-
>> Virginia: 25.
>> Will Sentance: And store into-
>> Virginia: Next step.
>> Will Sentance: Take the next step, pass it divideBy5, I get what sort of final step?

[00:03:49]
>> Virginia: 5.
>> Will Sentance: 5. [LAUGH] I should have asked Anna, literally, normally, we do math is the most naive thing I have ever said. Being a math grad will look at me with frustration when I say that's what math is like. Very naive of me. Okay, people, this is super risky.

[00:04:07] Not only do I parse initial result to the next line, do I parse it to all future lines? I parse it to all future lines. That is an insane dependency tree, so to speak. In other words, all future lines depend on that and it feeds all the future lines, that's insane.

[00:04:24] Is there a better way, I've got a function here being called, I store initial result, only then to immediately pauses the next line. Alex, can you give a better way, whereby, I skip a step here to save global labels.
>> Alex: So you would have divided by 5 ive but you would pass into it, add and then you pass into that multiplied by 2.

[00:04:47]
>> Will Sentance: Let me just give a really important clarification there, pass into it the [INAUDIBLE] to add.
>> Alex: Right.
>> Will Sentance: Right, which would then give it in the evaluated result straight, yeah, exactly right. I would multiplyBy 2 instead of 11. Literally evaluates two 22, it is referential transparent. I can replace the running of the function with its output and doesn't change my code at all.

[00:05:08] That so, there's lots of debate about what referential transparency means but it is rough since that's what it means. I can look at the code of the function, I can throw that away and take the evaluated result, the output of it, and stick it there instead, nothing changed, which is what I would be doing there.

[00:05:22] Well, let's see, nesting my functions. Or we can use the fact that JavaScript evaluates every function call before we move on. multiplyBy2, code with 11, 22, throw that straight into add 3, 25. So that's where you divide by 5, 5. Pretty unreadable, though. Imagine if your code is made up of a series of nested function calls be very, very unreadable.

[00:05:44] And by the way, this relies on our functions being referential transparent, we can repeat the call to the function with return value with no consequence in our app. Add that to your list of glossary fancy terms of bring up in interviews, and say, I prefer my function is to be more referential transparent.

[00:05:58] This is horrible, we can't do this nesting function to be the same. But what are we actually doing here? We're combining a number with a function to get what, Virginia? 11 with more number 2 is combined to get
>> Virginia: A number.
>> Will Sentance: Which is?
>> Virginia: 22.
>> Will Sentance: 22, then we're combining a number 22 with a function, two things to get a-

[00:06:24]
>> Virginia: 25.
>> Will Sentance: 25, a number, one thing. Then we're combining that with a function divideBy5, from two becomes one. We're combining a function with a value to get a result then combining that result with another function to get another result. People, what does this remind you of?
>> Will Sentance: How insane is that?

[00:06:46] And it turns out it is the critical function in all of functional programming. It's the most versatile function. We can literally list off a list of functions. And then pass them into reduce, and take the first one, combine it with its input. Get out an output, combine it with the next one.

[00:07:08] Get out an output, combine it with the next one, when two become one, when two become one, when two become one. And the rule for combining them is gonna be pretty sophisticated. Take in, we're gonna pass and run functionally, but it's gonna combine by taking in the building that was our initial inputs, the first function and combine it with the first, sorry, initial input for the first function.

[00:07:34] Combine it with the first function in the position in the array, position 0. Throw them into how to combine, which is going to be run function on input. And we're going to say, okay, in comes 11, in comes what? What's the first function, Jasmine?
>> Jasmine: multiplyBy2.
>> Will Sentance: multiplyBy2, and then inside, combine them by running multiplyBy2 on 11.

[00:07:55] Give out 22, return that out into building up. That's gonna be our next value to pass and combine with the next function. By the way, we're gonna discover, we have rebuilt the most important and most used function in all functional programming. It's the main one. And by the way, I went and checked.

[00:08:15] I went and checked in the most popular jobs with functional programming library, Ramda. The under the hood of the most important function they use and every single thing they do, this is happening. Just so we know.