Check out a free preview of the full Hardcore Functional Programming in JavaScript, v2 course

The "Composition" Lesson is part of the full, Hardcore Functional Programming in JavaScript, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Brian defines composition and gives examples of composed functions. A function is composed when it contains one function nested in the other, and returns a new function.

Preview
Close

Transcript from the "Composition" Lesson

[00:00:00]
>> Let's see. We're going to talk about composition. I'm going to bring in compose actually no we'll define it first. Let's make some functions. Let's make you know to upper x in x or string, the string to uppercase. Make another function exclaim. We'll just, string close that these are all my favorite functions.

[00:00:28]
I use them all the time. And let's see, maybe we can do one more. Let's do first. Take a bunch of stuff and just grab the first thing. Great. All right, so we have some functions here we got add to upper exclaim. And we're gonna do is talk about composition.

[00:00:51]
So define composition first. So compose. Compose takes two functions an f and a g g and is defined as f of g of x. So it takes it returns a new function takes an x. So in math, you would see it written like that compose functions f and g.

[00:01:11]
Here, it's fairly similar. So you'd say f composed with g is just f of g with the x there, something like that. So, this is kind of interesting. All we're saying is, I take an f and I take a g and I'm going to nest this function call.

[00:01:35]
Didn't highlight right, so I'm a little worried but looks looks like it'd be fine. So let's call to upper and exclaim. Now, what's gonna happen is we'll call this shout to tears for fears. All right, how's even do that tears. Okay, tears. [LAUGH] That's that's what I bring forth to you in this class.

[00:02:05]
So what's happening is each of these, this function to upper becomes this g, right. Exclaim becomes f. So if we were actually like kind of fill this out specialize to exclaim in to upper it would look like to upper and exclaim clean and then since those are fixed or that.

[00:02:26]
So it's just nesting right word is nest word. So, we're able to kind of un nest function calls by using compose. It kind of unrolls it into a nice pipeline. And you'll see it's going right to left, which is kind of interesting. So, tears first get called to toUpper and then we get the exclaim at the end.

[00:02:50]
Now, if we want to compose further at the moment without any help from ramadas compose, we'll have to compose again. Let's take the first from there, so we get t. So what's happening here is, will compose these functions. Which returns a new function. Function composition returns a new function, I give it f and g and I got a new function back.

[00:03:15]
So it's very nice because that means I can actually do these sub compositions I get a new function back and I can continue to compose. Now, composes more than just a helper function. It's like the cornerstone [LAUGH] of what we're doing here. What's nice about it is it's also associative.

[00:03:36]
So I can say, well, let me go ahead and compose these new function. And we'll compose the outer piece. And it's the same example. So it doesn't matter how I nest the compositions. So because it's associative, it doesn't matter how I which, which are run, even though they're all defined in order, I can kind of associate the parentheses to the left or right.

[00:04:01]
So it means associative. So we'll bring in this compose here from lambda. And now we get the same, but I can actually take away the inner composed and just give it as many as I want. Because if I can nest it and it's associative, I can just remove that and make it a very attic one it doesn't, they're equivalent.

[00:04:22]
So, here, it gets tears goes into toUpper adds the exclamation and then we throw it all in and take the first thing. [LAUGH] What if we move that over here? There we go. So I can actually do Martin Fowler's extract method wherever I want and I call this one, loudFirst.

[00:04:47]
Sorry I'm still in vim mode in my head [LAUGH] happens to the best of us. And I can basically extract any sub composition into its own composition. Which is really nice. It's like I've got all these Lego's and I'm gonna create a pipeline for my data to flow through.

[00:05:09]
And then the data will go through each one and that can break them out into their own sub pipelines if I want. Which is super cool. Does anybody see how compose is actually running right to left? Kind of makes sense that the argument would start here and kind of flow through there, right?

[00:05:26]
If I gave it the argument over here, it wouldn't. It would be weird and left to right. But there is often something called pipe and it just does g of f of x. We'll go left or right? We're gonna do flip on compose to define pipe fun times.

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