The full video and many others like it are all available as part of our Frontend Masters subscription.

Brian Lonsdorf

Brian Lonsdorf has taught several workshops and training courses on functional programming with javascript. He'a a regular speaker at conferences and helps organize/host FP events around the Bay Area.

Brian Lonsdorf

Hardcore Functional JS

Joe gives a little guidance to how to get started with this exercise. He demonstrates a partial answer to the first challenge and fields a few more questions from the audience.
- Problem: http://jsbin.com/romun
- Solution: http://jsbin.com/mojusuyane

Joe: Okay some guidance about how it works. At the beginning of this JS spin, it gives an example of using, there's this function called multiply. It just works how you'd think. It takes A and B, and it multiplies them together. But luckily multiply has been curried. Behind the scenes the library curried it, so that we are able to make a new, so the first example that was already done says how would we make a whole new function, without having to write function that takes whatever, that would double a number using multiply?

So multiply takes two things. We want to make a new function that doubles something and uses multiply. Because multiply is curried we can give it one of its arguments. We could be like here you go, enjoy. Sail away and be a new function that does things. So we set it on, thank you for the line numbering tip, on line 20, actually line 18.

We make the thing. We just say multiply. Give it one of its arguments. It originally expected two, we gave it one, and now it's waiting for the next one. So now it's acting like doubles act is a function that just takes one thing. And so when we say on 20, console.log( double(13) ), we see 26.

So it worked that way.
Joe: Now the challenge is to make one, let's see,
Joe: that splits words. So there's a function called split.
Speaker 2: Okay, why don't we do that together?
Joe: I guess it was done with Mississippi or split groups.
Joe: Split takes two arguments, much like multiply does if you think about it.

It takes two arguments. The first is, what do I split around? If I give it a space, it looks in a space b and says, there's a space. I'm going to break this into an array with a and b. If I'd given it a, b, c, it's all breaking into three things.

Anytime I see a space, in fact it's really dumb. If I'd given it two spaces, it'd be like there's a space in a, a space, nothing, another space, it just breaks around spaces. So we would like to make a function using curry and split that does what I just wrote here.

It splits around spaces, and remember that just like in multiply we can feed in one argument at a time. In fact I wonder if split is already curried. It probably is. Wow that makes it.
Joe: Okay, so hopefully it's not a spoiler at this point. We can just say because split and it's kind are curried, because they came from a nice library that automatically curries.

I mean I could write it maybe explicitly, but I could say split and only give it one argument and see if it passes. Yeah, now we're on a different thing. The next one. So the the whole point of this, even if you don't understand all the mechanisms of currying, is if you have a function which has been curried, you can feel free to give it only some of its arguments and you'll get a new function, like we did here when i created this words function on line 36.

I just gave split one thing, and it's ready to do the rest of the thing it would do. Does that clear up? Let's see what we have in chat.
Speaker 2: One gotcha on challenge 3 is the EAD is a number lower the negative one in your partial application or your-

Joe: Yeah, yeah. I touched it through that.
Joe: Exactly. Luckily, If you're looking for a really low number, JavaScript has negative infinity, which is pretty low.
Speaker 2: You got it.
Joe: All the authors of Round Up, I'm honored.
Speaker 2: Yeah ask Michael and Scott. They're in there. You don't need dots.

You got the creators.
Speaker 2: Let me do a walk around to make sure anybody is-
Joe: Thanks.
Speaker 2: How're you doing, man? Are you getting it?
Speaker 3: It keeps getting errors farther down, right? That's what-
Speaker 2: Yeah, that's right. You're like-
Speaker 3: So you're not seeing things getting completed.

Speaker 2: I see what you're saying, yeah. So that Mississippi works, and as you complete it you don't get the error.
Speaker 3: Correct. That's what I'm running into.
Speaker 2: One less error. Okay, so you're on max now.
Speaker 3: Okay.
Speaker 2: Cool. And then same here, you knocked out multiply around the x.

Okay you might want to say something about that, Joe. You'll see that errors just deplete. You won't see a success message if you pass it.
Speaker 4: Yeah.
Joe: The homemade testing suite isn't so good I guess.
Speaker 2: Which threw me off
Joe: You just gotta get used to success.

Speaker 2: You get no satisfaction.
Speaker 4: Yes.
Joe: Yeah.
Joe: You get no success you've completed-
Speaker 2: Red and less red.
Joe: Yeah.
Speaker 4: How you doing, man? You getting this okay?
Speaker 2: Errors, work harder to fix those errors.
Joe: Yeah
Speaker 4: Yeah, I think it's throwing people for a loop.

So, yeah you're on triple list, just gotta partially apply something that would triple. So, he's saying one of the map filter reduce. Should I give a hint for three?
Joe: Yeah, let's-
Speaker 4: Okay, three, you're going to want to use reduce, and something lower than negative one because that got me.

What's the actual lowest number? It's like number dot.
Joe: Should be just negative infinity.
Speaker 4: You just actually do a literal negative and the word infinity?
Joe: Yeah.
Speaker 4: That's great.
Joe: Yeah.
Speaker 4: Awesome.
Joe: It did something right.
Speaker 4: How you doint over here?
Joe: Okay that looks right.

Speaker 4: This looks right?
Joe: Yeah, I think you got it.
Speaker 4: No because triple is a function, so now if you run it with some other function or number it'll-
Joe: Okay.
Speaker 3: Where do we find the arguments to reduce? Is there help some place on this library, or do we have to go get-

Joe: Let's see.
Joe: That means that is trying to reduce, or maybe they already have.
Speaker 3: Okay, so it's fold left.
Joe: Yeah, I think so. Yeah.
Speaker 3: Is that what, okay.
Joe: There it is, fold left is reduced.
Speaker 3: So from right to left.
Joe: Wait a second.

Speaker 4: I'm going to scroll this.
Joe: How does reduce, yeah, yeah, fold left.
Speaker 4: But it's also a list so we're going to have to map this function over that list.
Speaker 3: Okay.
Speaker 4: So what other people are doing too, it's nice, is you can hop in the console. You have everything available, so you can just play with it.

Speaker 4: How you doing man? Finished it.
Speaker 2: Thank you, yeah. That's a one off, it's not a-
Speaker 2: Yeah, killer. You got it. Yeah, you guys already, in the class does everybody kind of know what currying is? We're kind of hitting everybody from all different levels, so if you're bored, it's going to get harder and harder and harder throughout so definitely ask questions.

How are doing, man?
Speaker 4: Getting there, I think.
Speaker 2: What are you looking at?
Speaker 4: This one right here. So I'm just going to map the list to multiply.
Speaker 2: You're totally right. The only thing is. Yeah, that's right. Is it working? _.net. Yeah, okay.
Speaker 4: Bring in, Node JS in.

Speaker 2: Wait, I guess it does have JS in. All my examples have a billion errors in it.
Speaker 4: Same thing.
Speaker 2: And you can actually, perfect.
Speaker 4: So looking at the test for calling it with just a list of numbers, so you gotta give, it's going to triple, so the number will just be three.

Speaker 2: That's what it is, okay.
Speaker 4: So that should do it. One handy tip is you can also partially find that, because this a function that takes a list. I'm sorry. Did that not work? It's.
Joe: See, if there's people online or here that are still curious about reduce, I'll go through the other example.

I'll type some stuff in the console, you can see, it'll show you in action. Make it a little bigger.
Speaker 4: So one thing to noticed is- Are you looking at underscore or ramdas? Yeah, you're going to go to ramdas. It's different. I pasted in chat. It was also a link to it on the GitHub page to the dots.

Joe: Try to think of a good problem example.
Speaker 4: Hey Joe, do you want to put the-
Joe: What's that? Put the carrot back?
Speaker 4: I think it is easier to just Google get a ramda, and then theres a link to the docs.
Speaker 4: But the arguments to map are clipped, so it's going to take the function then the list.

That's what's going on. Because once we get this working. One cool thing if you're looking at triple list, if you know how to curry, you've got a function that takes a list, and now a map can be partially applied to be a function that takes a list. So you could just get rid of the whole function wrapper and just partially apply that, because it's almost like you're crossing this list and that list off.

This is a function that takes a list that passes that list to map. So if map was partially applied it would just take the list directly and then work and run. So let's just give it a shot.
Joe: Ramda doesn't load sometimes because we didn't require a JS.

We just used the script tag. I don't know. You'd think it would load, but if you refresh it'll eventually work. And I think if you just press run anyway, it'll be there despite the warning.
Speaker 4: Yeah, that should work.
Joe: Yeah, probably.
Speaker 4: Talk about that for a second because that's confusing.

Joe: Sweet.
Speaker 4: So since map is a function now that takes a list, we're just going to give it the list when we call it.
Joe: Okay.
Speaker 4: Yeah, it's pretty crazy. So you're kind of pushing off any data to the caller, and the beauty in that is you don't have to call anything list.

You just don't have to refer to that.
Joe: Okay.
Speaker 4: How're you doing over here?
Speaker 3: To get more familiar with reduce, though.
Joe: Trying to figure it out, but I don't really understand how it's working So the way the reduce is going is it's giving each an accumulator and each argument to it and just building it up.

Speaker 4: So whatever it returns it's going to keep as the accumulator for the next iteration.
Speaker 3: Hey Joe do you think we should walk through like-
Speaker 2: Yes
Speaker 3: At least challenges one and two and then maybe give them a little bit more time do three or something?

Joe: Yeah, that sounds good.
Speaker 4: Or, we could just walk through all three.
Joe: Sure, sure, okay.