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

Functions are nouns. A goal of functional programing is to write functions that take in a lot of arguments, but only give them one argument at a time. This process is called "currying".

Get Unlimited Access Now

Joe Nelson: Next one is we separated from the environment we separated mutation from calculation. We can even separate a function from rules and it's useful to think about this. I mean ultimately the functions we write are defined by rules in programming. But if we step back and think of them not as the rules inside of them all things it does but just here's a thing.

It's just passing things through and it sends this point to this point. So thinking of it more like a noun you can hold them in your hands. Just like you can add numbers you can do things to functions the nouns they're not just there to doing I guess In English there's run and there's running.

You got a Jaren. But this is the Jaren way of thinking about a function. So functions are nouns. So one way we could think about a function. This is a part of MV5 in JavaScript. Is here's what it is. It does this stuff and there is these weird variables.

And numbers and stuff. Or you could think someone's brought a huge platter to you. Of all the finite strings that must be a big platter and associate with each string just this tag of what MD5's do. The function is just the platter of all the things that it does.

So when we think about it what it does in side, the way it operates is thinking intentionally otherwise extensionally. So if we think about extensionally, we can now make operations on functions and reason about what they do without caring as much, what's happening inside. Just to keep it kind of mathy, in case all this is kind of boring, if you don't know this bit but I wanted to say that, it's a set theoretically.

A function is a single value collection of pairs. So, I said there's a platter and there's a bunch of strings and a little tag on each string that says here's my MD-5. That's the pairing going on. So if you had a function that goes like this. The one on the left is a function, I don't know everything, well I guess assuming it's good in the dot dot dots.

That's the part that we showed is not making it not a function. But the bit on the right is certainly not a function when you relate. So when you relate 1 in D. We're cool. That would mean relating them means you could think it's drawn diagrammatically as one goes over to D.

I relate 2 in B we're cool that I relate 2 in C. But we're not cool because two is already taken you need to be able to decide where it goes but as a set it just means it's single value that the paired the first component of the pair can never have two things that go with it.

So thinking in terms of these diagrams now that's I guess what. So there's another terminology if you're not familiar with it. When we're looking at wait for the slide when we're looking at the numbers, all the numbers or values of any kind that you see in the pairs on the left hand side is called the domain.

And all the ones on the right hand side is the range of the co-domain depending on the range could be bigger. So without ever just knowing those words, domain is the things that are eligible to be put into the function and the range are the things that it'll ever give you.

Like some functions, squaring a number will never give you a negative number. It's just not possible. So that's not in the range.
Joe Nelson: Knowing that let's pull it back into JS. It was cool thinking about it mathematically it's a nice place to be, little quiet but this functions in math we're taking one value and giving one value.

But that's a pain. I have functions that take a couple in programming. There's a technique where we can separate the arity from the function. So that we can write functions that take a lot of things but only give them arguments one at a time. And this thing knows how to deal with it.

Here's one argument, you take three and they'll say, okay I'm waiting when you give me the next ones, I'm good. You can just remember that. Before getting into how that happens, let's see one way that separating can remove names. because we're saying, once we separate to recognize, we're removing spurious names that don't have to be there.

So the arcs here's a thing that works with some objects at the top we have this function it's going to help us out. Real simple you give it a property name, and an object and just looks it up in the object it's like using dot. But when we write it.

We make a function for as opposed to using a language construct, you know it's funny you know you think I want to language if it let's me do a lot of things. This is great look at all the stuff it gives me. But when you do with the language you're not able to talk about it.

You're not able to compose it together. So it's, cool, language does it. But then not cool that we can control how it happens. So, when the language gives me dot, I can't do what you're about to see at the bottom of the page. When I have a function called get, we can use it.

So assume we have this get thing, it gets a property out of an object. And assume we just have a list of people. I guess it came back from some API or something. It's JSON it's an array of objects that have a name and I make a function called get person name.

I give a person and it just I mean super basic and opposed the name out. So then if we had a bunch of people on our task was to get their names. We would map this function getpersonName over people and we'd have their names. Another way is if we had magic and that's more fun.

So the magic. Okay we have get, we gotta put two pieces together. At the top we have get, takes two arguments. It takes the property, an object and down here I'm getting those names again through the array. Just by saying map over the people and get name, but you're like wait wait.

Get takes two we just gave it one how's this happening well that's magic. The second one is of course map will go over and for each person it'll send it into this thing this Frankenstein function. Which is Get, it's a weird little copy of Get, that knows the name is baked into it but it's waiting for the object.

So if we did, If we had this kind of magic and if we think about it that way, we don't have to write a function called Get person's name. It's shorter you just say Get name. And in fact there's a little trick about the order I put that in.

I say get property object, I didn't say get object property. Because if I said get object property, I couldn't bake in the name because the first thing it's looking for is the object. And oftentimes when we're mapping we don't know what the objects are going to be. So depending on the order of the arguments It's going to work better with this magical technique called currying.

That's going to allow us to put things in one at a time. And in fact Brian had a popular talk about underscore, you're doing it wrong. And it is very much, because people don't use this style thinking about functions as little nouns. And being able to compose them and do stuff to them and curry them most JavaScript libraries the things are in the wrong order so you can't do this stuff.

So there's a set of libraries that we're going to show you that are going to work better for this. Yeah.
Speaker 2: There's a question from Ballentine in chat. Would ES6 splat operator affect in anyway the arity approach or magic on functions?
Joe Nelson: We're going to look into one implementation of currying.

And we'll see whether this implementation I'll show you is affected. I can't think off the top whether it would or wouldn't but when you see the example implementation. You have a feeling about it, Brian?
Brian: Yeah, I can say, I mean there's multiple implementations and already this one creates unnecessary closures.

And functions take property so you can actually bake the arguments into the or return a new function. Which would get rid of the closure. So yeah there's a bunch of different implementations you could do for but it's good for the naive simple approach right now and try to make it better with everybody's help.

Joe Nelson: Okay so we talked about the magic. Boy. I said magical spells were nice you know that they're always a little bit garbled and the question for me is whether the curry what's more complicated here this crazy thing or curry? And the fact that it looks so complicated is really just an artifact that we're working in JavaScript.

Other languages like Haskel, cough cough, is like just does it. You know you don't have to think about it. But here, it's all right. We can do it. I'll just go over this really quickly and we can think about how this one is implemented and like Brian said there may be other approaches that aren't as unwieldy.

But, I don't know this one seems kind of bulletproof in some ways, so okay, cool curry what's it doing. It's taking a function and ultimately what's it returning? Well is really two things it could be doing line three, well it's returning another function on line two so you give it a function it gives another function.

Like a stunt double or something. It's this other function that's going to, as needed pretend to be your first one, but also kind of remember things for it. So in one case here's a function. What does it do? It checks to see whether the arguments given to it are more or less than what the original function expected.

So it's kind of messed up in JavaScript you get messed up is cool in this case you could ask how many arguments was the function declared to accept. Of course in JavaScript you have another pseudo array called arguments and you could take more. But if you least if you at least declare your function is taking two they'll be a .length on it and I'll say well I guess I stated that I take two.

So this thing says I'm a new function if I was given fewer arguments than the original function given to me like wanted. I'm going to keep note of what was given to me and then return another function which is sort of me but just waiting for the next ones. If you're given everything, that you ever needed that the original ever needed It says well.

Just pass it along I've no idea what the original did, go to the original. So it's just that way of delaying what happens as needed. Okay, so you feel pretty happy or at least got a feel for it. We're going to use it. So, even if you don't get in the nuances of how it was written.

You see how it's used, it's easy. So easy that we're going to go to our next thing but before we do let's see I wanted to say right right just to read just to reiterate. So we had our get thing right in our this the same get function we had before on the top you give it a property you give it an object but instead of saying function get take the stuff.

You say get, you're the curried form of the function what you used to be, basically, all the stuff inside. And when you say curry around it, that's going to return you a new function and you're good. You can use it in the magical way. So you can say, names equals people, oops, people get name.

You just gave it one thing, and it's going to take two.

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