Function Callbacks Exercise

[00:00:00]
>> WebDevSimplified: Now you probably at one point thinking, why are we going through all this extra work? Because this is way more confusing than just moving console.log up into here and then getting rid of this entire callback thing. We can completely remove all that callback stuff like whoops. Like this and boom, it still prints out 3 so like why are we messing with these callbacks? It just makes my code more confusing.

[00:00:23]
Well, the whole reason you would want to use a callback is if you want to do different things based on what function you pass in. This is a little bit of a contrived use case, but hopefully it gets kind of the point that we're talking about. We have a function called do math which takes in the variable a and b, and then it takes in a function called operation, which is what you want to do. In our case we have two operations.

[00:00:41]
We can either add these numbers together or we can subtract them from each other. So now I can use the exact same do math function and I can pass it in 5 and 3, and I can either add those numbers by passing the add function along, or I can subtract those numbers by passing the subtract function along. So it allows me to take the same function without ever changing it and do different things based on the callback function that I want to pass into it.

[00:01:03]
It just adds a little bit of extra flexibility into the code that you write and it's something that you'll see all the time in JavaScript and even as we go throughout this workshop, there's tons of examples of things built into JavaScript that use this callback pattern to allow you to use the same function to do multiple different things. Now, since this is one of the more confusing topics inside of JavaScript, I do have a little bit of a practice exercise that I want you to go through.

[00:01:26]
Essentially, I want you to create a function that takes in 3 different parameters a parameter called first name, parameter called last name, and finally, a third parameter called callback. Inside that function that you create, I want you to create a variable called full name by just combining the first and last name together, and then I want you to pass that full name variable to the callback function that's passed in.

[00:01:45]
Inside that callback function, I just want it to be a function that adds the string hello to the beginning of whatever the name that gets passed in and return that value out. So essentially we create one function that takes in those 3 variables, and we create a second function that takes in just a name and adds hello to the start of it. I want you to set that all together so it uses callbacks and see if you can actually solve that.

[00:02:05]
So I'll just give you a couple of minutes to solve that before we go through the actual solution. So we take a quick look at the solution here. We can see that we created that function. We just called it print greeting, takes in a first name, a last name, and a callback. Inside that function, we're creating a variable called full name, and we're just adding together our first name with a string for a space in between them and our last name.

[00:02:31]
Then we're logging out whatever that callback returns to us because remember that callback when we pass in the full name, it should just add hello to the beginning of that. So if we look at that get greeting, that's what I call our function for our callback. You can call it anything you want. It takes in a name and adds hello to the beginning of that name and then whatever the name is afterwards. So when we call that callback, it'll have hello plus the name being added onto it, which is what gets logged out to our screen.

[00:02:54]
So you can see here when we call print greeting, we passed in a first name Kyle, a last name Cook, and our get greeting function. So if we kind of go through this code line by line, first name equals Kyle, last name equals Cook, and our callback is get greeting. Our full name then combines the other Kyle Cook into just the word Kyle Cook, and our callback here, which is get greeting, we're passing in Kyle Cook.

[00:03:16]
So inside of get greeting our name is Kyle Cook, and then it just says hello at the beginning of that and returns that value out to us. And remember, whenever a function returns, we essentially take wherever that function is and replace that entire section with the thing that gets returned. So in our case that would be hello, Kyle Cook that gets returned, and we log that out to the screen. Any questions about this particular set of code?

[00:03:36]
I know it was a tricky question trying to, you know, really get the most advanced use case for this. I just found out the print works differently in this language than in Python. Oh yes. Yes. Any other questions though? Yeah, could you confirm that callback is not a reserved word? It's just, it's a word that we can use as a variable, it's I'll copy this code and bring it over. We just paste that in.

[00:04:01]
You can see it's printing out hello Kyle Cook on the right hand side. Callback is not a reserved word. It's just kind of the concept is called a callback, but yeah, there's no reserved word for it. It's kind of something that was created from JavaScript. JavaScript didn't really think of this idea. It was just people started implementing it into JavaScript, and it's even been around since before JavaScript.