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

The "Functor Practices" 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 composition and sub-composition to nest functions. Nested functions are useful to have a clear idea of the data flow.


Transcript from the "Functor Practices" Lesson

>> We're just going to do what we did in the other examples. We're going to create a composition where data flows through. We'll see just like composition, this will be a nested because, in fact, this is composition. So we're just gonna string in a box. Pass that into the first thing that happens nine do is that this happens before the parsefloat.

Right? So we're gonna do that. And then we'll jump into the parsefloat. We'll do parsefloat s and I didn't take it out of the box so this should be failing. And I've got a box of five instead of five. So what I'll do is switch this to a fold.

And that should pass cool. We had some issues for those online, I hadn't saved it to auto run and there was a run button up here. So be aware of that. If it's not on auto run, there should be a run button. And if it, yeah, if you see that you'll have to click it.

Neat, so that's all there is to it. We've created a linear flow and we do one thing at a time and everybody's happy. Let's jump into the next one. Using box, refactor perfcentToFloat, just something that is interesting just to tie this back to normal programming and hopefully we'll get to an application where we're using this stuff.

But if we start with box to frame our problem this way, I can start to swap out box for something else and get different effects, box has no effects. So it's kind of hard to see that right now. But we will see some interesting things happening. But also sometimes I just want to .chain things and I can and this provides that for me and I think it's reads quite nicely once you put it in the frame because you can just do map, map, map, map, map, map and you have this nice kinda a, right?

Like you can kinda see each step in a row. Here we go. Let's jump in. Well, we do this whole thing where I leave it on the screen, so we don't lose what it was. So let's see. First thing that happens is parsing the float, actually that's not right.

Look at that percenta flow is this since what we did down here, up there, this turns the money sign. This turns the percent. Nice good job Brand. [LAUGH] In any case, throw the string in there, and map over it. First thing that happens is this replace again. So we do that.

Next thing that happens is the parse float. And we'll take that we'll call parse float S and then we wanna fold it out. And we have that float. So we're just gonna multiply those. And cool. Everybody's happy. So same thing again and again. Last couple things get a little bit of this last one.

This is where throw y'all a curveball. [LAUGH] So boxes a mon Ad and a functor. And this is where we see we need a mon Ad instead of a functor. And let me kinda unpack that. So we have pricing discounts and get the money to float turns into cents.

Okay, let me just start off by by figuring out [LAUGH] How to start bringing this down. So we know let's just leave it same template that how it is down here. And, all right, so we're gonna leave it with two arguments totally fine. We're gonna start with price.

So first curveball [LAUGH] through two arguments. But the more important part is this we're gonna call them money to float. So a map that and then we get cents out of there. And then we call parse percent to float on the discount, not the cents so that doesn't make any that Nippon does [LAUGH] desktop myself.

All right. What we're gonna do is actually say, at this point where we actually want to get sense out of here. We're just gonna nest. So lemme give myself some space Okay, so what's happening here is we're calling money to flow and return cents. Well, we can't map money to float, right?

So we can put that in another box. And now we can map over cents, And now that we have cents, we could probably just do this percent to float on discount. And then we'll just do cents minus cents total that. All right, let's try that and see if I can make this a little bit nicer for y'all but I just wanna get the test to pass first.

So what is happening here we have a box in a box of four. What [LAUGH] and that I think that's expected fall out but we've got two boxes, right. And we can actually mess around with this a little bit more to say like okay let me give this the right, we're gonna do it this way.

So instead of just putting price in when I put the first thing there, and then we'll get the sense out of that. And now we have cents we can actually put the second thing in here in a second box, right? And then we'll get the actual savings here.

This is probably a little nicer way to write the same exact thing. Parenthesize it for the value and again, we still have two boxes, right? We got the right answers for, but we're in a box in a box here why don't we fold out of the first box.

Now we're in one box. Fold out of this box, and then we get four. So ha, I beat you. Maybe I don't know. [LAUGH] This is exactly the situation that mon ads help us with. And we're gonna go add a method to box right here to solve for that.

But the idea is once you start working with box in these compositions and you introduce another kind of sub composition, they nest, so you end up with a box in a box and you wanna flatten those boxes into one box. And we started off saying, we have this array and we wanna map over it and, do things to it.

And if I returned a nested array, just like we did with box here, I would end up with an array or array one right? And we have a flatten method on arrays, right? And it would solve our problem for us.

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