This course has been updated! We now recommend you take the JavaScript: From First Steps to Professional course.

Check out a free preview of the full JavaScript: From Fundamentals to Functional JS, v2 course:
The "Higher-Order Functions & Callbacks" Lesson is part of the full, JavaScript: From Fundamentals to Functional JS, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Bianca uses a few code examples to illustrate why higher-order functions are useful in functional programming. Higher-order functions either take a function as an argument or return a function as output.

Get Unlimited Access Now

Transcript from the "Higher-Order Functions & Callbacks" Lesson

[00:00:00]
>> Bianca Gandolfo: Let's talk about Reverend Green. And also higher order functions and callbacks, which we've been doing some work with already. So you are already pretty experienced with what it's like to use higher order functions and callbacks. Maybe we weren't really calling them higher order functions. But higher order functions in JavaScript, is what enables us to do these functional programming techniques.

[00:00:24] Because a function in JavaScript is data. And that's not true in other languages, or it's not true in all languages, that functions can be data. And when I mean a function is data, what I mean to say is that we can pass functions around. We can return them without invoking them and things like that.

[00:00:42] Just like you would an object, or say, some primitive value, like a 0 or a true. So really, higher-order functions and callbacks are the core concept of functional programming.
>> Bianca Gandolfo: It's very powerful too, so let's get going with it. A higher order function can take a function as an input.

[00:01:14] For example, this addEventListener, have you guys used addEventListener, right? We're taking this function as an input.
>> Bianca Gandolfo: Cool, and we can return a function, as we saw before, as an output, and here we are returning a function.
>> Bianca Gandolfo: All right, so callbacks are just functions that we pass to functions, and we're going to just kind of experiment with this.

[00:01:59] We're going to run this, like we've been running our code so far as a group, who wants to go first?
>> Ben: Got it.
>> Bianca Gandolfo: All right, thanks, Ben.
>> Ben: Okay, we're declaring a const, if else, and that's going to be using arrow notation. It's going to be a function.

[00:02:20]
>> Bianca Gandolfo: Mm-hm.
>> Ben: Which is going to take in three arguments, condition is true, is false.
>> Bianca Gandolfo: Yep.
>> Ben: Or parameters, excuse me.
>> Bianca Gandolfo: Absolutely, so we're declaring our function here, we're saving it to our const, we're creating a constant variable, okay? And then, who's next? Dan, you want to go next?

[00:02:44]
>> Dan: Booking that function.
>> Bianca Gandolfo: Yeah, we call it.
>> Bianca Gandolfo: And we pass true. A couple anonymous functions.
>> Bianca Gandolfo: And then, Ryan, what does it do when we enter into the body of the function?
>> Ryan: So, it looks like a ternary.
>> Bianca Gandolfo: Mm-hm.
>> Ryan: So it's asking if that condition, which is true, is true.

[00:03:13] And if it is true, which it is, it returns as false, so it returns as false.
>> Bianca Gandolfo: If it's true, then you do this, otherwise, you do that.
>> Ryan: Yes.
>> Bianca Gandolfo: But yeah.
>> Unidentifed Male Student: Is that a question mark?
>> Bianca Gandolfo: So the question mark, this is a ternary operator, which is kind of a Java adopted thing, it's shorthand for if else.

[00:03:36] So it says, if condition is true, so if this is true, then do that, otherwise do this. That's what that means, it's just a short hand.
>> Bianca Gandolfo: What's that?
>> Unidentifed Male Student: I just haven't seen it before.
>> Bianca Gandolfo: Yeah, no worries.
>> Unidentifed Male Student: So it does, it's true?
>> Bianca Gandolfo: Yep, so in this case we're passing true.

[00:03:59] True is true, is true, and then we log true.
>> Unidentifed Male Student: You returned the console.log. Did something wonky happen there or would it just execute the log?
>> Bianca Gandolfo: Yeah, it'll just execute. It'll return whatever the log returns, which is undefined.
>> Unidentifed Male Student: Okay, there you go.
>> Bianca Gandolfo: Yeah.
>> Bianca Gandolfo: Cool.

[00:04:20]
>> Bianca Gandolfo: Any questions?
>> Bianca Gandolfo: So this would be a kind of functional style if else.
>> Bianca Gandolfo: All right, so, I forgot.
>> Unidentifed Male Student: Does it return the whole function there?
>> Bianca Gandolfo: Yeah, so in this case it's going to return the whole function, why?
>> Unidentifed Male Student: Because the entire function is being passed as the second argument.

[00:04:46]
>> Bianca Gandolfo: Yeah. And is console.log actually happening? No, why not?
>> Unidentified Female Student: It wasn't invoked.
>> Bianca Gandolfo: It was not invoked. So we'd need to do a little something like this.
>> Bianca Gandolfo: To invoke it, and now it's going to log. Sometimes I trick even myself, I forget what my tricks are.

[00:05:10] So here we are, I just put them in a variable now so that we can pass them that way, and we're calling it. Okay, so we are passing a function and we are calling that function just the same as you would call log true, here, right, it's the same.

[00:05:32] Except that, it's just the parameter name gives it another name to reference it by, that's all. This can be confusing for people sometimes.