Passing Functions as Variables

[00:00:00]
>> WebDevSimplified: Now moving on, this is by far probably maybe the most complicated or the second most complicated topic we're going to talk about in this entire workshop. So if you have questions, please ask them. And if you're scrolling through Instagram on your phone, please put it down and pay attention. This is super, super important. And this is the idea of passing functions to other functions, because in JavaScript, the important thing to understand is that functions are actually just a special type of variable.

[00:00:24]
They work exactly the same as variables in every single aspect. The only difference is functions you can call them while variables you cannot. So let's take a look at what our code has. We have this sum function right here, and we can actually use this as a variable. For example, I can say console.log, and I can actually just pass it in sum. You'll notice here when I pass this and I'm not using the parentheses to call my sum function.

[00:00:45]
Instead, I'm just passing along the function itself, and this passes along essentially my function definition. When I say if you notice it prints out all the logic for my function. All the code for my function gets printed out because essentially what I'm storing inside of my code is the function itself. This variable sum, which is a function, stores all the code inside that function, and then when I call that by using the parentheses, it'll run that code.

[00:01:08]
But I can just take all that logic and pass it around as an individual variable which has the name that is its function itself. So this is something that you're going to see all the time in JavaScript. It's one of the most common features you're going to see. And here's a really quick example of how we pass along a function to another function. We have this function called printname. It takes in the name and logs it out.

[00:01:28]
We've seen this type of code before. We'll just copy this over, paste it down so we have that starting point to look at. If we call print name, we can pass it in a name, you can see it prints out just fine. We then have this function called call function. It takes in a variable called x. It's going to log out the text before and after, and in the middle there you'll see it actually calls this variable x.

[00:01:50]
So we know this variable x must be a function because functions are the only thing you can call inside JavaScript. And if we look down below, you can see that call function we're passing along print name, which is a function itself. So let's go ahead and actually look at what that code looks like and talk about some of the really common mistakes you may run into. So here, I'm going to just call that call function right there.

[00:02:10]
Right now if I just get rid of this code, you'll notice nothing prints in my console. That's because we don't have anything running yet. But if I call that call function, I can pass it in another function, and now it's going to run that code for us. It's going to first log out before, then it takes this print name, which is our function. And again you can think about something like this. We're going to say let x equals print name.

[00:02:31]
So we've now created a variable called x which is referencing our function. And we're just calling that and passing it in whatever value we want. In our case, we're passing it in the name of Kyle. Then finally, we're logging out after, and that's just to show you that this is actually happening directly in the middle between these two things. It's happening in that call function section. Now this again like I said, is one of the more confusing topics because you think of variables as one thing and you think of functions as an entirely separate thing in JavaScript.

[00:02:57]
But JavaScript treats them both exactly the same. Functions just have that one extra capability to be called while variables don't have that extra functionality. Now I know this is a confusing topic, so I want to open up to questions to see if anyone has questions about how this code is working or what's going on inside of here. Yes, what's the data type of a function? Is it, is that its own data type?

[00:03:18]
So if we just do a console.log for the type of here, we'll come in here. Type of, whoops, print name, give that a quick save, and let's make sure we don't call this down here. You'll see it prints out function. So this does have its own variable type. It is just the type of function. When you use this function and this type of syntax where you pass a function to another function, this is very commonly called a callback, and it doesn't really matter what this terminology means or it doesn't matter if you even use it.

[00:03:47]
This is just common terminology you'll see inside other programming code that other people write. Any time they pass a function to another function, they will call it a callback. So if you see this word callback somewhere in code, also sometimes it's abbreviated CB. This usually means that it is representing a function that is being passed into this particular code. And just to kind of hammer home exactly how this works, I'm going to copy over this code and kind of go through exactly what's going on line by line.

[00:04:10]
So we really, really understand this concept because this is one of, like I said, the more confusing concepts. So first we're calling a function called sum callback. We're passing it in 1, 2, and a function handle sum. So if we look at that function, we have a variable a which is referencing 1. We have a variable b which is referencing 2, and then we have a variable callback which is referencing handles sum.

[00:04:32]
So we create a sum and we pass it into our callback. Now if we look at our callback, that reference is handles sum, so we need to jump into this handles sum function. It takes in that variable a plus b, which in our case is 3, and it just logs that out. So we kind of have this nesting structure going on. We create a function, pass it to another function, and that function actually calls the function inside of itself.

[00:04:52]
Probably the most common mistake you're going to run into when you're passing around these functions like this is you accidentally call the function instead of actually passing it along. So in our case, let's say here in this handles sum we accidentally put parentheses around it because when you use a function, you always put parentheses around it to call it. Well now we're going to get a bunch of different errors in our code because it's not working like we expect it to.

[00:05:13]
And that's because by passing along like this we're calling handles sum and then we're getting whatever the return value of handles sum is. Instead, we specifically want to pass along a reference to that function, its actual logic. We don't want to call that function and get the information from it. This is by far the most common mistake you're going to run into. So remember, if you're passing a function to use it somewhere else at a later point, you never place the parentheses.

[00:05:36]
You always leave those off. If you want to call the function immediately and do something with it like we have done with some callback here, you put all the code inside the parentheses. But if you want to pass along the function to use later, leave off the parentheses because then it'll be treated just like a normal variable would be.