Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.3 Becoming Familiar With Higher-Order Functions

Higher-order functions are a key part of functional programming style, and JavaScript is well-equipped with this feature. Here we’ll see one kind of higher-order function: the function factory, or a function that returns another function. We’ll use this to create filter functions on the fly.

Related Links

2.3 Becoming Familiar With Higher-Order Functions

In the last video, we finished up taking all of our reparative and paritive for loops, and turning them into one declarative filteredBeers function. And so, now we're using that in our switch statement here, and it cleans that up quite nicely. But we talked about the fact, that we have this strange case, where we wanna know, if something is either an ipa, or an ale, and we solved for that by creating this compareValues function. But it's pretty brittle because it only does this one case, so you could have an array of many values. But it will return true, if any of them match, so if you wanted to make sure that all of them match, that wouldn't work, and you can't do multiple properties. So, the property is always is just, just one single property. That's a problem if you want to be able to do more complicated comparisons. So, we're gonna use something called higher-order functions to solve this over the next two videos. Okay, so, one way you can get a higher-order function is for a function to return another function. In this way, we might wanna make something called makefilter. All right. So, that we can make these filters on demand, and then that way they'll be a little bit more robust. [SOUND] So, the problem that this specific solution will solve best is down here. You can see that we're calling filteredBeers, and we're just passing it two strings. And, while this is better than the for loops for clarity, and readability, and self documentation. It's still suffering from the fact, that just looking at this, you have to make an assumption that, okay, we're probably filtering each beer on it's locale property by the domestic value. It's not descriptive as we might, or as declared of as we might like, so this solution will help us get rid of that ambiguity. So, we're going to have a makeFilter function that takes a property, and then it's going to return a new function. Now, the new function, instead of taking a property and a value, will now just take a value, and inside there, it will return filterBeers(property, value). So, this takes some getting used to, and so let me just drive this home with a quick example on the console again. So, I'm gonna bring that console back up by doing Cmd+Opt here in the browser, and we're gonna make a function called makeAdder. This is one of the most common examples of this higher-order function. So, makeAdder, and that is gonna take a number. Now, let's actually say, I'm gonna take the left side of an addition. So, you have a left plus a right. So, this one we'll take the left number, and we're gonna re, return a function here, again, [NOISE] that takes the right side of the addition, [NOISE] and then inside the return function, we'll return left plus right. [SOUND] So, there's our makeAdder. So, if we wanted to make a function called add5, [NOISE] we set makeAdder(5). And what that does, is it makes a new function, where it has a saved off copy of 5. And then, anything we pass to our add5 function will have five added to it. So, we can say, add5(3) and get 8, and so on, and so forth. Okay. So, back in our example, we have a makefilter that is doing that exact same thing, so later when you call this function and just pass in a value, it still has a reference to the property. And so, it can call filterBeers with the property that was set from before, and the value that you're passing in now. So, what, what's an example of this? Let's say, we wanted to make a filterByLocale. All right, so, that's very descriptive. So, what this does, is now filterByLocale is a function that has a saved reference to this key or property, called locale. And when we call filterByLocale, we just now have to pass it a value. And it will always compare it to the locale using our filterBeers function. So, while we're here, why don't we just go ahead, and make our filterByType. [NOISE] So, now we get a little bit of a gain here by saying filterByLocale, [NOISE] and filterByType. So, like I said before, the biggest gain here, is just removing that assumption work that you had to do when you looked at filter, and just assume that the first string was one thing, the second string was another. Now, we're very declarative, and very specific. We're saying, filteredBeers equals filterByLocale, and the locale is domestic. FilterByType, and the type is an array of either ipa or ale. Now, this is nice, but if you're paying attention closely, you'll notice that we haven't actually solved the main problem, which is, what if I wanna do more complicated comparisons, right? This method doesn't actually solve that. In the next video, we're gonna talk about the other way to create a higher-order function. Where you can pass functions in, as parameters rather than just returning them in the original function. And so, in the next video, we're gonna take a look at that.

Back to the top