Welcome and in this lesson, we're going to talk about JavaScript Higher-Order functions. And the thing this is all built on, is the idea that JavaScript treats functions as objects. So in places, for example, where you're used to using variables, you can also use functions. Which means we can pass a function as a parameter to another one and get a function as a return value. So functions are first-class members of JavaScript. So we can store those in variables even if we want to. So higher-order functions either take a function as an argument or return a function. And this is a page we're gonna work with and we'll fill this out as we go. The good news is, you have probably done a little bit of this already. For example, let's see, I've got a bunch of my buttons up here, funcAsArg. So function as an argument. If I wanna create an event handler for that, I'm going to use the on function of jQuery and the parameter it takes is the name of the event and guess what, a function. So it could be the name of a function that's already out there, it could be an anonymous one that we created it could be the arrow function which is also anonymous. If you've ever done that and I'm guessing in JavaScript at some point, you've done it in some way. Guess what? You're already using higher order functions, not bad. So on click, we're just gonna show something to HTML. There's nothing wondrous about this code here but kinda wanted to point out what may be you've used quite often but maybe never knew what you were using it for or why it worked. Now, let's look at a function that returns a function and how we might structure that. So let's say I'm gonna switch the signs on a number. Now that would be a relatively easy operation to do of course, but we're creating this example so that we can show higher order functions. So maybe instead of just returning a variable, we're gonna return a function. And we're gonna take that original value and do something with that. Yes, this could be a standalone function, but again, we're just demonstrating functionality here. So when I call this function I'll get another function back. So how do we make that work? Well, I'm gonna say like, don't overthink it. We're used to functions that return a variable and we just store that data somewhere. Well, this is a function that's gonna return another function the idea being that we can do something with it. So let's say for example, we'll do two different ways that we can call it here. There's switch signs and the direction argument as required. So I'm gonna store the function that gets returned in forMomAndDad and in forTheBooks. So as of now, I don't really have anything at all where the magic happens is when I take those variables and I pass it what it needs. So this is the function that it returns that internal function, notice has an original value param. That's what I'm actually passing in at this point. Now notice here, my direction is positive forMomAndDad leave it on the, forTheBooks. Not that we're doing anything dishonest, but we want mom and dad to think that we're doing well. How about that? So let's test this function as a return value. Mom and Dad see 500, Accounting sees the real thing. Don't lie to your account, not a good idea. And let's check up here and we'll enter something, there we go. And we know that that earlier one worked as well. So we have a function that takes a value function that returns another function that we end up calling at some later point. So another thing we can do is use Javascript functions that are already out there that are higher order and filter is one of those. What I'm gonna do is type a letter or letters in here. And we're gonna find which of the options in the box that actually matches there. So let's get this set up first and I'm just gonna take each of my options in the box and I'm gonna create a city's array and then just push all the text of that into the city's array that we're gonna look at later. That's gonna be the place where we type in the letter or letters and then our filter function is gonna look like this. So this is just filter and it's higher order because it takes a function as an argument. In this case, it's an anonymous function. We're looking at that word, I don't really need the console that log there but we're gonna see if the character matches, because if we get a value back greater than zero, then we know that that character was found in that string somewhere and then we'll just display it on the page. So we're just showing how many matches there were and appending it onto the page. The big thing about this one is I'm using filter. It's a higher order function because it takes that function as an argument. So let's say how about the letter a that seems to appear in quite a few of these. There we go, we've got eight matches. How about "at" as a phrase? Just the one match. Try that one, again, just the one match there. So you've got some functions that you can use to work with arrays, filter, being one of them that we'll go through each member of an array and given a certain function, tell you whether it is part of that Boolean function that you asked to look at first. We can also do Reduce which is another higher order function and I'm gonna have the options again. With this one, what I'm gonna do is take all of the lengths of each of the options in the box and Reduce, takes a function that gives me back a result. So it's reducing that array to one value and you can kind of do whatever you want there. I'm gonna pass in total and current. And this is just gonna be a running sum that's gonna give me the length of all the characters in the box. So again, Reduce takes a function as an argument. The second one is just what the default is when it starts. So I should be able to just add up all of these together and it looks like maybe I've got one too many braces there. So let's fix that. There we go. Total characters and all the option elements are 78. You can count them up yourself and see but I think it works. So in this lesson, we looked at an introduction to using higher order functions in JavaScript. And thanks for watching. In our next lesson, we will talk about JavaScript functions that are called iterators and generators.
