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

Functions can "meld" with other functions. This process is referred to as composing. When composing functions, the resulting composition should be separated from the arguments. Joe demonstrates a simplified compose function.

Get Unlimited Access Now

Transcript from the "Compose" Lesson

>> [MUSIC]

>> Joe Nelson: As if it wasn't academic enough, let's go back to weird noun-function land.
>> Joe Nelson: Okay, another trick that we do aside from carrying, cuz since we're thinking about functions. We can think about functions as just taking points to points and we don't care what happens inside. You can meld functions together in the same way you can add numbers together, you can meld functions together.

[00:00:27] Where, I hesitate to walk all the way over there, I'll use my mouse [LAUGH]. So say we have three functions, f, g, h. The melding is written with a little circle, it says do f then do g. What would it mean in terms of the points? And once we get through this, we'll see how to use it in real code and how it makes stuff shorter.

[00:00:50] So,
>> Joe Nelson: G circle f is a new function, that's just what they call it, they just name g circle f. And it's built out of f and g. And the way you find what it does to the points, cuz remember, all we care about is what does it do the points.

[00:01:06] We don't need to know what it does inside, how it's implemented. We just follow through and just look. We see this first top thing in A, if I were to do f, it would take it to the top thing in B. And then if I do g, it brings it down to upper left territory in C.

[00:01:22] So when we merge these functions together and have just one that does one after the other, it should eventually take the top thing in A and get it down to the upper left in C. And so that's our definition, yep, that's where we're gonna send it. So then we do the same thing, the second one goes to this middle-y one and that goes to also that same upper left, and it does.

[00:01:45] And the bottom goes up here, you just trace it through. So, cool, this is g circle f. Well, there's nothing to stop you from continuing to do this. So, you think of if we wanted to eventually meld h onto here too, we just keep following through. We say, where did g circle f, take the top thing in A?

[00:02:03] It took it to this thing over there and then h would take it up to the top. So when we go all the way through, we cut out the middleman and go straight to the top. That's just the concept, it's following through where the stuff goes. And you can make a JavaScript thing that just follows it through.

[00:02:18] And we can start mushing stuff together, and it's good, so. An aside, Brian's gonna do some even more mathematical stuff where when we zoom out from the code and we've written things of this kind of pure way. We start seeing similarities that compose in much bigger ways than a lot of things that we're used to.

[00:02:39] In this future world, everything is contained in this somewhat mathematical interface. So it's clearer when you use a foreign library you've never seen before that it's going to compose and work with yours. It gives you standard language because you recognize it as a category. Either that or you had n conflicting standards, and now you have n plus one.

[00:03:00] There's different ways to think about it, I guess but, so that's just an aside. So we learned how to smash things together and we also, so we thought, how do we combine new functions? Do one function, do another, push them together without even giving it a name. But we, without using this pattern, without recognizing functions as being kind of math-y like this, we tend to do it anyway.

[00:03:27] And do it with more names and do it ad hoc and as the situation needs, so it uses unnecessary arguments. So for instance, we use these glue names. Say we had this situation, and there's two things going on. Maybe there's this callback, you say on error, I wanna do something.

[00:03:43] Maybe on error came from some library or whatever. And when there is a problem, call my thing back. So there's two things. The message extraction, you're giving an error here, right. And you say get the message off of the error. That's one concern in a way, pull it off.

[00:03:58] And another one is that impure thing of logging. And so now, we had to make this whole, I'd just be like function, error, error. Error's written three times here, that just sounds kind of awkward. So, if we recognize that there's a general way to combine the stuff, we don't need to make weird variables to do it, to string it through like that.

[00:04:19] So let's think about how it would be implemented. In this ideal world, because we have currying, we can think about functions as only taking one argument at a time. So compose, this is a simplified compose. Compose takes two functions, I wrote it g, f rather than f, g.

[00:04:34] Because as we'll see down here, the convention is that it strings things through the functions that are given to compose from the last to the first. And there's another one that's not called compose that goes the other way and it's escaping me, what it's called. But this one happens a lot.

[00:04:51] So how would compose work? We wanted to mash them together so we do. We say compose(g, f) is a new function which mathematically would be written g circle f. But here, it just doesn't have a name. It takes a single value, it sends it into f. It takes what f returned and sends it through g, really simple, which is good.

[00:05:10] So here's an example of like a weird little contrived composition. Say we had two functions, one was called proper noun, the other was called reverse on strings. Proper noun capitalizes the first letter and reverse just reverses. So here's how, you take compose over here and you'd give it the single value hello as it goes in like we wrote before.

[00:05:33] It'd be a function, you could pass another quote unquote set of arguments to this thing. I could write take hello, it would send it through properNoun at which point it would be Hello with a capital. And then send it through reverse and it'd be reversed. And that's the version that would be returned at the end of this whole thing.

>> Speaker 2: Pipe is the reverse of.
>> Joe Nelson: What's it called?
>> Speaker 2: Pipe.
>> Joe Nelson: Pipe.
>> Speaker 2: Yeah.
>> Joe Nelson: Nice.
>> Speaker 3: Yeah, I think that's good to note. If you know Unix pipes or it's just the flipped version, or go right to left instead of left to right. Because the argument comes into the right.

>> Joe Nelson: [LAUGH] Yeah.