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

The "Function Composition Review" 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 reviews function composition, answers a few questions from the audience about function syntax, and function arity, and talks about the clarity gained thanks to functional programming.

Preview
Close

Transcript from the "Function Composition Review" Lesson

[00:00:00]
>> Will Sentance: Sam, go ahead now.
>> Sam: Two points, first of all, divide by 5 in your simplified diagram, you're passing in a 5, it should be a 25.
>> Will Sentance: [LAUGH] Thank you, Sam.
>> Sam: Secondly, I want to understand, is there a rhyme and reason behind why you ordered it as input, then function, versus function then input.

[00:00:17]
>> Will Sentance: Because the way reduce works is the first thing you pass to the reducer function, the function that combines from two to one, from two to one, the first thing you pass is always the accumulator. And the second thing, and you want reducer to be able to work on any scenario, but it does lead to you kind of having to flip.

[00:00:38]
Which is a bit of a weird feeling right? But it's because I want to combine, I had a combine function, always has the first thing be the thing we're building up. And the second thing be the element of the array that we want to combine to become one.

[00:00:52]
When we do so inside, the second thing is now visibly on the page. I think it's run on the first thing and so it looks, it's flipped.
>> Sam: Okay, but it sounds like you're describing the order inside the reduce. I'm asking about the run function on input.
>> Will Sentance: But where does run function on input get replaced, where is it replacing?

[00:01:12]
>> Sam: It's it's the reducer.
>> Will Sentance: It's filling in what what placeholder in reduce, Charles?
>> Charles: Into combine.
>> Will Sentance: Into how to combine. Meaning, Sam, I'm preset I can't, I mean, look. I could theoretically fit my reduce around but that's how the built-in reduce works so I'm sort of being consistent with how that one works.

[00:01:29]
So remember run function only gets run in place of how to combine so it had better behave the way that how to combine expects it. Those sort of clarifications, people, everyone benefits from. I wanted to show you one little thing here, look at this. All I've done on this next slide here, is I've added an extra function just so you know, give you the emphasis.

[00:01:47]
On, by the way, in case you wouldn't hear there because the mic wasn't on Seth. Seth asked, what if my function has what's called multiple arity? One of my functions here expect more than one input. The way this is set up is much like Sam's question was saying, I'm pre prescribed how these functions are going to be run.

[00:02:06]
Reduce is just going to take them with my how to combine rule and running function on one input. There ain't gonna be multiple inputs, here. I mean if one of my functions here multiply by two, add, it's expected two or more inputs, it's gonna break, entirely. And that is where in the end functional programming techniques, all the fancy stuff you hear about.

[00:02:26]
Monads, partial application, carrying. All of them really come down to trying to solve the problem where if you're listing out functions, little blocks of code to auto run one after another. And you're not calling them yourself, you're relying on constructs like reduce to call them. You need to make sure that they behave in a very predictable manner.

[00:02:46]
You need to make sure they have exactly one input, one output. You need to make sure if they take in an error, that doesn't break your entire flow of data. And that's really gonna be what everything else in functional programming is about, trying to ensure the consistency that I can just list off, line of code, line of code, line.

[00:03:03]
Let's see that, then. And so look at this, all I've done here between these two slides is changed what I've done here between these two slides. I've added an extra function, but what I've done is I've moved my list of functions from being in a block like that, which will do, all the time.

[00:03:15]
I put them with white space line by line by line. So you can really feel the way that functional programmers might write this. Which is that each line Is an isolated independent task whose only output is passed via inside of reduce, passed to the next function. Whose only output is only consequence of R3 is the 25 which is passed directly to the very next line and the very next line only.

[00:03:45]
Next line, you know. Divide by 5 is a line of code, in a sense. And we've now put them all on one line. People, this is the dream. All of the middlemen newer to it, seeing this, I'm like, hold on, am I running this right? But once you get used to this structure, being able to list out my tasks by their human readable name and my starting value, and then know that I'm just gonna go to one after another after another after another.

[00:04:11]
This makes my code profoundly more readable. This is the essence of functional programming. Now, I will tell you this, we don't use reduce directly to be able to do this. We use a function called Compose, or Pipe. Both of which pass function through one by one by one.

[00:04:30]
What are they doing inside? And I went and checked that round of documentation. I went and checked how they built it. What are they doing inside? They’re running our good friend, reduce. They’re running our list of functions through, running our value through our list of functions and they’re reducing them together.

[00:04:49]
>> Will Sentance: Even compose, the most significant programming tool in functional programming. This is what's going on behind the scenes. When you go into that function premiere interview, and they say, so how do you compose functions up? And you say, well, for me, it's all about reduction of each function with a value.

[00:05:07]
That is exactly what it's doing. All right, people. So, function composition.
>> Will Sentance: Easier to add features. This is the essential part of functional JavaScript, being able to list out our individual units of code by name. Bump, bump, bump, 1, 2, 3, 4 by name. And have them run one by one as independent self contained pieces whose only output is in the next line.

[00:05:38]
More readable, reduce here is often wrapped in compose. To say, compose, like you compose notes into a musical melody. You compose individual units of code Into a full task into a fully, just like you would have ten lines of code in the function now you got ten functions that form a composed, larger collection of functions.

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