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

The "Refactoring with Compose" 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 refactoring with function composition can make code easier to understand.

Preview
Close

Transcript from the "Refactoring with Compose" Lesson

[00:00:00]
>> Available prices, refactor that with compose. These are more tricky. That's why they're the bonus functions. Okay, so we take in cars, and we'll filter that. All right, so that would probably be our first step in the composition. Let's just go ahead and rename this and redefine it underneath.

[00:00:19]
So start with compose, and we'll grab filter prop, take some cars, all right off to a great start. I'm hundred percent certain That's right. And I'm not normally 100% certain on anything. All right, and then we're going to map and we're gonna format the money, okay and then we're gonna join that.

[00:00:37]
All right, so we'll go ahead and map. The, look at this. So this is a little bit of a fly in the ointment. [LAUGH] We have to, we can actually just put this right here. It doesn't mean that we can't do that. But in keeping with the program well let's, why don't we pull this function out into a little helper?

[00:01:02]
We'll call it format, dollar value. And we can just make this a sub composition, right? We get to factor out compositions into sub compositions and we'll call prop on dollar value. Need all these fun underscores everywhere. Typically I just import, compose and curry so I don't have all the noise.

[00:01:28]
And now after we filter all the ones in stock, we can map over it and format that. And then finally we have to join with under the string, right? So we'll just call it join with that. Now we can define our own join. I'm just going to cross my fingers and hope RAM did that for me.

[00:01:49]
Thank you, ramda. [LAUGH] So, there we go. And we could have put this right here, right? That'd be a little bit unwieldy. Maybe we could have formatted it like such, right where we say, all right, I don't want to define a new function. I'm just gonna do this in line.

[00:02:11]
And a lot of the functional languages that are built around composition, make this a little bit less. This composes kind of large, like if it was just like C might make a little bit it might be a little easier, but there it's usually defined as an operator, binary operator like a dot or arrow forward.

[00:02:32]
So, in this it's kind of painful to do that. And honestly, we're in JavaScript, right? We can do this, boom, right? It's not the end of the world. We don't have to not do that. So, it's up to you. However you wanna write this. If you need a helper function, if you find that useful, make it you could always extract sub compositions.

[00:02:58]
We could say hey, we've got this filter in stock and then I want to get the dollar value, but this ruins my array, it turns into a string, right? Why don't I make a more useful function and we'll do available prices and then well available prices array [LAUGH] For lack of a better name.

[00:03:20]
And we'll just compose, we'll pull out that sub-composition, available prices array, and we'll just join it and call that available prices. And I'm jumping all over the place. It's because I'm still in vim mindset. So I'm not able to use this editor correctly. But yeah, so you can always pull out sub-compositions very nice.

[00:03:43]
We have two loops, a filter than a map. That, actually, in Lodash, you get this for free. Those will be fused into one loop. I think ramda might do that, I'm not sure. There's logic around these functions that is general and mathematical and reliable, so you can always you don't even have to try to fuse these.

[00:04:08]
They just do it for you. That's really nice. And the other thing you can do is if you want to try to do this yourself manually and you can get really complex with it, you can look into transducers for loop fusion. We're not going to cover transducers today I'm sure some other class somewhere does it cause Kyle's class does it.

[00:04:27]
Yeah. But a lot of this is out of the box. Like when you start to talk about, good consumers and producers and the types that work together, then you start to have to build your own transducers if you want to get the maximum performance. I don't think this, like we can spend like days and make it really complicated and it wouldn't change anything, right?

[00:04:48]
But if you're really like in that world and you need to do that, you can do that. But again, you could also write a for loop underneath and just kind of capture it in a function and then that function is pure and it's a pure function and mathematically, who cares you wrote for loop underneath.

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