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

SFJS Co-Organizer

Joe continues his demonstration of the solutions for challenge three. At the end, he summarized all three challenges to further enforce the separation that currying enables.
- Problem: http://jsbin.com/romun
- Solution: http://jsbin.com/mojusuyane

Get Unlimited Access Now

Speaker 2: I think we're just taking our accumulator and our element.
Speaker 2: I just want to concat them.
Joe Nelson: I see, so we say acc, actually we used the to concat, it just goes. ACC with the function applied to the elements, so the changed element because we are mapping.

Speaker 2: That's right.
Joe Nelson: I got to return I guess. So reduce, my tab is broken, list, wait a second we got to get the real list in here, so reduce takes, yes, the initial value.
Speaker 2: That'll do it.
Joe Nelson: Yea, that'll do it, I was thinking all like currying and not passing but it has to do it.

Okay, let's join it up and try it out. That's pretty.
Joe Nelson: I guess, you know what? I can paste it into the other side, I'm going to have to put it in the console. I could paste it in here, I could have done that all along. Real smart, okay.

Speaker 2: You could actually paste it in the JavaScript, wait, no you can't because you don't have curry.
Speaker 2: You didn't close the paren, down at the very bottom.
Joe Nelson: Wait, nope.
Joe Nelson: Okay, newmap takes this function, add one. Let's cross our fingers.
Speaker 2: I'm trying to find another function.

Add one gets.
Speaker 2: That looks good.
Speaker 2: So do we have any idea?
Joe Nelson: I don't know.
Speaker 2: So we're going to give modified.
Joe Nelson: And a lot of coding before noon.
Speaker 2: Check out new map, make sure new map's a function.
Joe Nelson: Yeah.
Speaker 2: So that's cool, let's go through it.

Speaker 3: Brian, there's a question for you in chat.
Speaker 2: It's not stack tracing this thing either.
Joe Nelson: Yes, I don't know how far-
Speaker 3: You could always fix it during the break and-
Joe Nelson: Yeah, that sounds about good. Because what was our goal?
Speaker 3: That didn't go through.

The goal was to explain a reduce at a lower level.
Joe Nelson: Yes, and hopefully-
Speaker 3: I think that mostly covers it.
Speaker 2: Looking up underscore and then producing an example of just kind of doing a sum.
Joe Nelson: Nice.
Speaker 2: Sum of an array, and they actually do a array of arrays, and reducing it down to a single array.

I think that kind of makes sense. I'm curious though, with all the currying and all that kind of stuff, what you were talking about with underscore, it starts the list. And you're saying ramda and all these other ones want to start with the iterator first and then the memo and then the list, so it's just in order of.

Joe Nelson: Yes, certainly the function you want to do.
Speaker 2: Yes, because you don't have ahold of the list when you're building your app, like the list isn't there yet, but you do have your function and your c value.
Joe Nelson: Okay, yes, we can fix this over the break, that's not a problem.

Speaker 3: Nathan says underscore.concat. That's where you fit the- that's where it-
Speaker 2: He changed his mind.
Speaker 3: Nevermind.
Speaker 2: He's having trouble with ramda.
Speaker 3: Well that's fine, let's just run twice if it's not loading.
Joe Nelson: Run it twice?
Speaker 2: Or, ramda, I mean.
Joe Nelson: Hang on.
Speaker 3: You guys want to move on or?

Joe Nelson: Yes, we could do a simple reduce example or move on, fix it. So we're trying to figure out what does reduce do? And we thought this'll be kind of easy, we can make one that does some list stuff. But it was a little more complicated, and hopefully this helps to explain things or we can do some simpler reduce stuff too.

We've got, here's our new map. New map is just supposed to do what a map does and when I run it over here it does, so I say add 1 to 1,2,3 and we get 2,3,4. So that's good. What is it doing, how is it implementing map in terms of reduce?

All right, crucial line, this doesn't have the lines enabled but there's not many, is reduce our concat list starting with an empty list and then working off of the input that was passed into the whole thing. So because it's really just an implementation of map, it takes the function of what it does to each thing in the list, and the list it does it to, called list.

So, the real magic, I guess, is how do you combine the list so far? Map always says, how do I combine the things so far, with the new thing with a way of combining it? So the way of combining it is concatList. It takes the stuff so far, often called the accumulator, and a new thing like one element that was given to it.

The next thing in the original list, and what does it do? It takes the things so far, and this is just standard JavaScript, and concatenates an array because concat puts arrays together. I hesitated to use push for the reasons we discussed before, because push is impure, and because when you push on an array it doesn't return the array in progress.

It modifies some array and gives you like what you pushed on. So we take the accumulator, what we have so far, and we add a new array onto it. It's kind of cheap little array, it's just an array of one thing. It's the function passed in applied to the new element that is coming through.

So concatList is an example of the type of thing that you'd give to reduce, to tell it how to combine new and old. So that's of the essence of reduce is building up a snowball.
Joe Nelson: So, this is now in this guy. I don't have the chat on the same computer that I have the display on.

So, if someone else could paste it in there or whatever, G-U-V-O.
Joe Nelson: And you could play with that. In a way, I hesitate to spend a whole lot more time on reduced, because of the three, it's the one I think I use the least. And Brian has a lot of brain melting stuff I want to get us to, so.

Joe Nelson: Yeah, concat.
Joe Nelson: Does concat maybe not require there? I haven't tried that.
Speaker 2: That's going to haunt us today.
Joe Nelson: Yes.
Joe Nelson: Okay, so the standard JavaScript one does not require if it sees a nom and it's not in the right, it just pushes it off.
Speaker 3: Somebody asked earlier how to explain reduce in less than 140 characters.

Speaker 3: But the idea of the catamorphism is that you have an accumulator, it's an incursion pattern captured where it passes an accumulator along with each element in the list. And you can do that, you can do reduce that way, you can do map that way, you can make sorts.

You can do all sorts of stuff with the catamorphisms. It's kind of like the mother of recursion patterns captured in a high order function, or pattern. So reduce kind of captures the recursion. If anybody gets all like, you don't have tail recursion optimization in JavaScript so you can't do this.

Well it's, I mean it's just a pattern, you shouldn't really be doing recursion explicitly these days anyway. They're already captured higher order functions. Jeremy Givens has great paper called Origami Programming, that kind of takes a stab at saying, stop doing recursion and just bake it into patterns. Anyway, sorry.

Joe Nelson: Yes, generally it feels like when we're separating and recognizing, the same way you don't want to write loops, raw recursion feels like the functional version of loops.
Speaker 3: Yes.
Joe Nelson: You have things that will just do it for you.
Joe Nelson: So, I could just do one more reduce right here, reduce add.

I think we'd like some stuff up, but I need also to give it a zero, maybe. So if I apply this thing, I don't even have to name these things. 1,2,3, do I get six? Actually.
Joe Nelson: Yes, so reduce, first thing, how do I combine stuff? Second thing, where do I start from?

Because initially, you don't have anything, and then the thing you pass in. So that's the essence of it, just play with it. Like I said, I don't tend to use it that much. Maybe Brian uses it more than I do.
Speaker 4: Now, you have two parameter lists. Is that allowed in JavaScript?

Joe Nelson: Is what?
Speaker 4: Two, you have the reduce with one parameter, and then the array in a second parameter list.
Joe Nelson: Yes. Here, this is the magic of curry. Curry is coming back-
Joe Nelson: So, I said reduce two things. Reduce takes more than two things, but it's secretly been curried by ramda.

The underscore means it comes from ramda. Which means when I give it fewer things that it expects, it's giving me back a new function. And to that new unnamed function, I'm passing the array.
Speaker 3: Hey, Joe, there was a question, maybe you guys will get to it. It's kind of general.

Mims is saying, all of this is very academic and cool, but how am I going to use this for real world applications?
Joe Nelson: Don't you worry. We're going to have to have examples where- Because actually one point of this is, these functions are super pure and academic and stuff, but in Part Two, the Voyage, they're going to be pulled into the browser, downloading stuff, doing stuff.

Our final demo is going to be an actual search engine that finds YouTube videos and plays them and stuff. So, like it's never fear.
Speaker 2: Well, in any case, if you're making a four loop and starting off with an initial value, there's always bits and pieces lying everywhere and explicit imperative line steps of code.

This is a declarative way to just say, I don't care how you do it, just do it.
Joe Nelson: And plus go to. I like it, it's kind of academic. I like my go to, don't be academic about it.
Joe Nelson: Okay, let's keep on going.
Joe Nelson: That's a good example, lots of stuff going on.

Speaker 2: Sorry if I'm- tell me if I'm just talking too much.
Joe Nelson: No, it's good stuff. You'll get your chance to talk too, you'll talk a lot. So here we go, currying. We used it, and we also kind of used some of those basic functions too.
Joe Nelson: It's kind of lagging.

So to kind of recap some of the things we did,
Joe Nelson: Rather than having to make a function like this it says, words, I take a string, and I do this stuff. And there's a return or there's a function, it's just a lot to write. You say, words, it's split with space.

Same result on either case, shorter. Once again, here's another one. So you could say, max, reduce with greater negative infinity xs. So once again, there's a function and there's a return. I guess that's especially silly, but yes. Or just it's that, it's reduced by what's greater starting at the smallest number.

Ready to take your code to the next level?

Intense courses with world-class teachers and unlimited access to our growing library of videos for the great price of $39 per month.

Get Unlimited Access Now