Transcript from the "Functions & Parameters" Lesson
[00:00:03]
>> Brian Holt: A function is a bit of reusable code. We create something that takes in some sort of input and just gives you some sort of output. That's kind of the gist of what functions do. I'm gonna show you one of the most basic functions you can create. To make this a little bit bigger.
[00:00:23]
On line 1 through 3 there. Function addTwo. In between the parenthesis here, it's going to accept some sort of input, right? Then whatever you return is going to be the output. The name of this function is addTwo. As you may imagined, it takes whatever number that you give it, and returns to you that number + 2.
[00:00:54]
So here, I have a finalAnswer and I call, that's what, when I have these two parenthesis here, you're calling a function, right? I'm calling this function with the parameter of 5. And 5 is just being passed in here to number, right? So that's how this corresponds. So this 5 is being passed in here to number.
[00:01:16]
And now number, in this specific instance, represents 5, right? And then I'm returning 5 + 2, right? And that's getting stored here in finalAnswer. So looking at this, if I to add 2 and I give it 5, what do you expect final answer to be? 7, right? Because 5 is being passed in here to number, and we're returning number + 2.
[00:01:40]
So when I console.log(finalAnswer),
>> Brian Holt: Then I get 7. So what happens if I do const finalAnswer2= addTwo(10)?
>> Brian Holt: What do you think finalAnswer2 is when I log it out? finalAnswer2, and as you can see there, I get 12. So that's what's powerful about functions is I get to encapsulate logic into a function, and I can reuse it over, and over, and over, and over again.
[00:02:13]
I can now add to it anything I want. Obviously, this is a bit of a contrite example because I could have just added 2 and it would have been fine. But, the principle stands. Now, functions don't have to take in any arguments. So I could just have a function that's called,
[00:02:34]
>> Brian Holt: giveBackFive, this is going to be the worst function ever. But all it does is just return,
>> Brian Holt: 5.
>> Brian Holt: So this takes no arguments, right? And it just gives you back 5. So if I just said console.log(giveBackFive) and I call the function with the parenthesis.
>> Brian Holt: Lo and behold, it gives you back 5, congratulations.
[00:03:01]
We took an already worthless function, and we made it more worthless.
>> [LAUGH]
>> Brian Holt: But just to show you like, it doesn't have to take any arguments, it can take two arguments, right? So I could do function,
>> Brian Holt: add, and it could take in num1 and num2. And that's how you separate it with commas.
[00:03:27]
>> Brian Holt: And we can say return num1 + num2.
>> Brian Holt: And now if you go down here and say console.log(add(5, 10).
>> Brian Holt: And again, that's how you separate it, it's just with the commas. You can see there that we're getting 15 back.
>> Brian Holt: Now hopefully, it's not too confusing that I can put finalAnswer3 up here, finalAnswer3 = add(5,10).
[00:04:05]
And then console.log it down there, but since I'm not really doing anything else with the variable, you're fine to just kinda move that into there, right? finalAnswer,
>> Brian Holt: Either one works, right? So I can actually put the add call directly into there.
>> Brian Holt: So this is the big pro tip here.
[00:04:25]
Whenever you see parentheses like this, this means a function is being called, right? Just so you know, when we call console.log here, that's calling a function. That's why we're using parentheses there, log is a function. So look for parentheses like that, and that's when you know somewhere, a function is being called.
[00:04:47]
Functions are called lots of things in lots of different languages, there's some minor differences, but you'll hear him called procedures sometime you'll hear him called methods. In JavaScript in general, they're called functions. And there's some minor differences there, but largely the same, they're all more or less the same thing.
[00:05:05]
So just, we're going to go with the functions today. Sometimes I will use the word method because it's ingrained in my brain from college. But when I say method, just assume that I mean function. Let's go a little bit more complicated here, I have a function here called greet, okay?
[00:05:22]
greet takes it in firstName, lastName, honorific, which is like, Mr, Mrs., Captain, Dr., or something like that, and the greeting of some sort, right? And this returns a template string, right? Remember the backticks, we talked about these previously. And it does some templating with these various parameters. And just to drill in, parameters are just variables that you're accepting from somewhere else, right?
[00:05:53]
So if you see in this list up here between the parentheses, that's called a parameter, which is just a variable, right? It's a variable that's going to be accepted from somewhere else. Okay, so it takes in all of these parameters. It takes in firstName, lastName, honorific, and greeting, and then it returns to you this string of all that stuff being concatenated together into a nice sentence, right?
[00:06:17]
So it'll do the greeting and it'll say honorific, lastName, I'm extremely pleased you could join us, firstName, I hope you enjoy your stay honorific, lastName, right. So you can see here, console.log, and here I'm calling greet with Brian Holt, Lord, obviously, and salutations, right? So you can see here in the first line, Salutations Lord Holt!
[00:06:40]
Thank you.
>> [LAUGH]
>> Brian Holt: I'm extremely pleased you could join us, Brian! I hope you enjoy your stay, Lord Holt. Okay, now I want you to note here, the order here is very important because that's the order it's going to be passed into these parameters. If I messed up Holt and Brian,
[00:07:00]
>> Brian Holt: Holt and Brian. I mean, you can call me Lord Brian, that's fine. But you don't have to. But you can see what I'm saying here. The order of these things is important because that's the order that going to be put into those variables.
>> Brian Holt: So back to that.
[00:07:19]
But what is great about this is I wrote this greeting function, as you might imagine, like you're reading some sort of like, hotel website. You don't want to type that out every time, you can reuse it over and over again just by creating a function like this, right?
[00:07:31]
So now I call with Jack, Sparrow, Captain, A-hoy. You can say A-hoy Captain Sparrow! I'm extremely pleased you could join us, Jack! I hope you enjoy your stay, Captain Sparrow.
>> Brian Holt: Again, yeah, order is important, make sure you get that. And you can have as many or as few parameters you want.
[00:07:44]
There's an unlimited amount of parameters that you can give it, right? You can have a function with ten parameters. If you have much more than like, three or four, you probably want to like make smaller functions. So, yeah. It's called calling a function whenever you put those parentheses because you can have a function there, and then whenever you want to call the function, you put the parentheses afterwards.
[00:08:06]
If you don't put the parentheses afterwards, it doesn't call the function. So going back here to our worthless example of giveBackFive, if I say console.log giveBackFive without the parentheses here, it's going to give me this weird function thing, right? It's not 5, and what it's actually doing console.log is actually trying to log the function itself, right?
[00:08:32]
It's not calling the function, it's actually represents the function itself, which is not what we want, right? We want the result of the function, which means that we have to call the function. So if you see anything like this where it says like Function giveBackFive or something like that, it means you didn't call the function.
[00:08:49]
Which means you need to go back and put the parentheses in there. Does that makes sense? Okay. It's an easy thing to slip up, that's why I try and call it out. So so far, I've been showing you this return, right? Whatever your return is going to be given back if someone calls the function, right?
[00:09:05]
So if I call greet, this is giving me back that string. I could throw this in a variable, I can console.log it out, I can pass it into another function, I can do whatever I want. Sometimes functions don't return anything, which means they would just be undefined if you tried to capture the return value.
[00:09:21]
So that, go ahead?
>> Speaker 2: Can you show us what happens in there if you take out the parameters? If you just say, console.log greet with the quote or something.
>> Brian Holt: It's gonna be like, it's still going to work, it's just going to say undefined everywhere.
>> Speaker 2: That's really interesting.
[00:09:38]
>> Brian Holt: So if you don't pass anything in here, it's not going to error out, it's just going to be undefined.
>> Brian Holt: So whenever you try and make an undefined into a string it actually gives you back the string undefined. Undefined, undefined, undefined, it's profound. Okay, does that answer your question?
[00:10:00]
>> Speaker 2: Yeah.
>> Brian Holt: Generally, you don't want things to be undefined, as a rule of thumb.
>> Brian Holt: So going back to what I was talking about, sometimes functions don't return things, right? Notice in this function here, logOutYourHome doesn't return anything, right? So in this particular case, it just takes city, state, and country, and it just logs it out to the console.
[00:10:20]
And it doesn't actually do anything about it. So notice I'm not doing anything here with the return value. It all does is just return it out. Sorry, it consoles it out.
>> Brian Holt: Does that makes sense? So you don't have to return anything, that is optional.
>> Brian Holt: Questions about that?
[00:10:44]
>> Speaker 2: So the reason you would wanna return something is if you have another function that then uses it?
>> Brian Holt: If you're depending on some sort of output from it, yeah. It just depends on what you're doing. So this would be useful if you had some sort of like, program and you were just trying to debug it like where people were from and you didn't want to have to put that console.log in every single place, you could just make this function called logOutYourHome and just keep passing those parameters in.
[00:11:10]
Okay, so that is more or less functions. All the functions I showed you so far where one line but they can be many, many lines, right? Often, most frequently, there could have been many lines, right? Like I could have done up here, const answer = num1 + num2, and then return answer, right.
[00:11:35]
So there can be for loops in here, and if statements, and whatever you want to put there.