This course has been updated! We now recommend you take the JavaScript: From First Steps to Professional course.
Transcript from the "Higher-Order Functions & Callbacks" Lesson
[00:00:00]
>> [MUSIC]
[00:00:04]
>> Bianca Gandolfo: So now we're gonna talk about higher order functions and callbacks. So what is a higher order function? So a higher order function either takes a function as an argument or it returns a function as an output. So we've done a lot of returning functions when we were going through closures, now we're gonna talk about how functions take functions.
[00:00:26] And how to master that, so once we get to deep diving into our functional programming stuff we will have those concepts mastered and it won't be confusing hopefully. So here's an example of a function taking a function as an argument. So this is adding a click event. And the callback would be this function here.
[00:00:52] So a callback is a function as an argument. And then here, this looks familiar to us cuz we've just been doing it and this is returning a function from inside a function.
>> Bianca Gandolfo: Cool.
>> Bianca Gandolfo: So callbacks. So here's the example of an ifElse statement abstracted into a function.
[00:01:13] And so in functional programming we're using functions rather than procedures I guess. Or we're using functions as units of abstraction versus abstracting over data in functional programming. And so some silly example is you could just use an if else function instead of an actual if else statement. And so here's an example of that, where we are passing a condition and then we're passing a callback function for the true condition and then we're passing a and another callback for the is false condition so here for example we are just passing true.
[00:01:58] So the condition is true and it's going to enter into this block. So what's going to happen when this code runs?
>> Speaker 2: Console log true.
>> Speaker 3: It's going to print out the function The content of a function?
>> Bianca Gandolfo: All very good guesses. What's actually gonna happen is it's gonna return undefined.
[00:02:23] So we're not returning these things, and we're not calling them.
>> Bianca Gandolfo: So it's important to note that when you are doing this, you need to call it. And so, when we call a function that's a parameter or that's an argument, it's just like referencing it as a variable.
[00:02:51] So if we wanna call isFalse(), we just add the invocation operator, also known as two parentheses next to that function name. So these are two anonymous functions that we're passing in. But we could also pass in other variable names. So if we have this function, stored at log true, you could pass it then as log true or log false.
[00:03:17] And that would work just the same. Is true would just be log true, would be this function and is false would then be log false. And so if we did this. What would happen?
>> Bianca Gandolfo: What's gonna happen? Kim, do you know?
>> Speaker 4: [INAUDIBLE]
>> Bianca Gandolfo: What is it?
>> Speaker 4: logFalse?
[00:03:49]
>> Bianca Gandolfo: Yep, it's just gonna logFalse.
>> Speaker 2: Could you go to the previous slide? It's a silly question. You can't put applications in the parameter.
>> Bianca Gandolfo: No, so it will just give you an error. So, the thing about parameter they're just like un-initialized variables. Until you pass an argument.
[00:04:14] So just like a variable, you couldn't call, if we just had var X here, just an uninitialized variable, you can't call X because X is just undefined. So it wouldn't make sense. We're just here declaring them as undefined, just saying if there's an argument, passed on this place, its gonna hold a value, if not its just going to be undefined.
[00:04:39]
>> Speaker 5: There's question on the, can you walk-through this step by step, they're stuck on the ifElse function and how it works.
>> Bianca Gandolfo: Yeah sure. So, let's do the next slide. So how our browser with read this, it would say, okay great. We're creating a space in memory called ifElse, we're gonna store a function there.
[00:05:01] This function just happens to have three parameters by these names which at this point they have no value, right? Then we say logTrue is another function, logFalse is another function, so then we pass to our ifElse false, logTrue and logFalse. So, once we call the function, we're gonna enter into the function body.
[00:05:25] And at this point is when our parameters get their value. So, condition is gonna be false, isTrue is gonna be log true, is false, is then log false. So we go into the function body now and it says if condition. And so, what happens when you put a variable or an expression in between these two parenthesis.
[00:05:55] And it's gonna force it into a true or false value, into a Boolean value. And so luckily ours is already a Boolean value, and so condition is false. So if it's false it's not gonna enter into this block, it will enter into the else block. However, if this was true, so if we change this down here to true, so if condition, so this is the same as saying if condition is true, if the value at condition, stored in condition is true, enter into this part.
[00:06:30] And then, since we're in this part of the block, this if block, it's gonna call isTrue. Otherwise if it's false, it's gonna do the else. And then once a calls is true, it just skips to the bottom here and it basically, you can just imagine it says return undefined.
[00:06:52] So if its true it goes here and then it skips down there, which means that this else block is never entered if this condition is true. If the condition is false, then this is never run.
>> Bianca Gandolfo: Yeah. So and then you can read this function as like if True do this else do this.