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

The "Compose Practice" 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 demonstrates how to use compose in various examples, and rewrites functions into pipelines, making code easier to read.


Transcript from the "Compose Practice" Lesson

>> So here is the codepen and put it in a string so we don't get a syntax error. So we're going to do is turn this into a pipeline rather than introducing state and having an order of events. We're going to write less than stock. We'll leave this on the screen so we could look at it but to rename it so it doesn't break.

Oops. And we'll say it's a function we're gonna compose it. Compose. And the first thing that happens in this whole thing we take in cars and we call last on cars. All right, call last. Then we call prop within stock and then so last turns into reverse cars and reverse cars goes in there so it might as well just put this right there.

There we go. So we're using currying. So it goes the last curious problem there you are. And you'll see this pattern a lot. If you see something like, f of x and then you know, g on x and then we have z z=h(y). So each of these arguments are just being kinda zigzagged and you can just turn that into a composition.

You can also take something like f of g of h. And well, backwards but, f of g of h, and that's equivalent to the composition of f g and h. So kind of unrolls this, this nesting, which is nice name of first car. So we're gonna use compose prop and head to retrieve the name in the first car to start with our compose as we do, so we went the first car.

So I guess we'll use head to get the first of the list of cars because we're gonna pass in cars here. Loosehead from there again, just like the last please prop, and I want to get the name. Does the data coming in, they all have a name. So we'll go ahead and just call name and does that work.

It works, ta da! If I do last or whatever, I'll get the wrong name, but it'll still work. It's a different name, same idea. See what's going on to, let's go on to exercise three. Here's the helper function average to refactor the average dollar value as a composition.

Okay? This one's bizarre says leave it be but I still want to play with it. [LAUGH] Alright, so we're gonna go with the average dollar value says we're gonna grab Sita dollar value. Well, I know this is just the prop function we didn't really talk too much about the prop function I probably should have introduced that.

Let me just do that for completeness sake. If I say prop dollar value that is the same as a function that takes some x and calls dollar value on it. In fact, same things probably implemented this way where we call x dollar value. So these are all the same, right?

Let's go ahead and change that then. So do dot prop dollar value. And now we can start to see that cars goes into this thing and we have that kind of zigzag pattern where this has got an output and that output goes into this input. So why don't we rewrite this as a composition right below I'll rename that because const is the strongest thing in the world, right?

It throws an error if I override the thing. [LAUGH] So we do that or compose. And we just have to call average. It worked, it worked. Hooray. Is this the same answer you all got or did you get a different answer? I'm seeing heads nodding. Their head nodding left or right actually.

It's a wrong nod, no I'm just kidding. They're nodding up and down for those online. So then we finally go to exercise four. Let's see here, so this is our sanitization function. I'll replace anything that's not a word with underscore, SanitizeNames, okay? And it says it wants us to write a function using compose that returns a list of lowercase and underscored names.

Which is this, but it needs to be lower cased, interesting. Okay, so we're gonna replace the things but we also have to lowercase it. So start by composing, start, and we're going to take in all the, the cars, right? So why don't we, and this is kind of a fun thing to do, but we'll do it like this.

First we'll map underscore. And then, we're gonna go ahead and map(_.toLower). I don't know if I gave you this function. [LAUGH] So that's fine. But it's in RandA and you could had made it on so, come on, it's a built in. [LAUGH] Alright, so we're not passing yet, see what's happening here.

String replaces not a function.
>> You need the name.
>> You need the name [INAUDIBLE].
>> So wait, I need what?
>> Property.
>> Thank you. So if we do .map, thank you prop. Look at these maps, this is ridiculous. We can do something that we'll learn later.

Yeah, it works. Thank you for your help. So first of all, map all the names, then we'll underscore all of them and then we'll lowercase all of them. Well it turns out this map kind of distributes over the compose here, we can factor it out to the outside and get rid of all these nested loops and make it one composition on the inside.

So not points. Oops, there you go. So that's kinda neat, and that follows from a law on factors which we'll talk about after lunch, but that's a, properties in action, math in action, right there. Bam-bam should I call this and so that that does the trick there. Any questions on this?

>> If we go back up to our, abstract map out where we took the one map two, three.
>> Yes.
>> What is actually, like how is that this is obviously RandA is doing the combinatorics to make that logic work.
>> Well, yes.
>> So in sketch, how is three maps being turned into one?

>> Yeah, I mean I can actually kind of walk through what happens here and see if that opens up the inner kind of clears up what exactly is happening. So they say this stuff isn't performing and try to fuse three four loops.
>> [LAUGH]
>> Yeah, I need to do it this as two.

Okay, and I still, all right cool. So, now if I make this one 2 and that one 1 it still passes, right? We still get that happy green nice happy green [LAUGH]. So, what's happening with map, I think map is defined like this. Take some f and some x and just calls x map (f).

Just delegates to the object. So, this is a list that we'll call map in the list. And we know because we're gonna map over this entire suite, take these maps off, well, I guess have to carry it. We'll use our own here, get rid of theirs. And what's gonna happen is we know that as we loop through this, we get an array of names.

And then we loop through it again, we get a list of underscores [INAUDIBLE] again. There's a property that states if I have a composition, map f map g, that's always equal to mapping the composition of f and g. And so f becomes just this entire composition and x gets hit with all these functions each time in one loop rather than looping and looping and looping.

And there's these, map is coming from the category theory of mapping this category into that category. And we can talk a little bit about that. But because of the contract the properties of map. This will always hold if you're writing functions. If you're not writing functions, anarchy [LAUGH], so there's that.

Thank you. That was a fun thing to kind of discuss, which we'll see a little bit later but I'm not going to get too much this because it's much more introductory. I wanna get mired in the math just that you know that it is there if you want it.

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