This course has been updated! We now recommend you take the JavaScript: From First Steps to Professional course.
Transcript from the "Arguments & Parameters" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Bianca Gandolfo: So now I wanna talk a little bit about the difference between arguments and parameters, and this is something that's like really, is really confused by people. So there are different, they're not interchangeable. Invocation and call-time mean the same thing. Arguments and parameters are fundamentally different. So, parameters, like I was saying, are right after the function definition, or function key word and they're just place holders.
[00:00:30] So, they're like variables, right? They hold values but before call time, they have no value. They are undefined. And the way they get a value is if you pass them arguments, just like when we were improving Tanner's name. What was it? What was it? Buff. So name and adj at this, when I'm walking through the code at this line, the first line here.
[00:01:05] Name an adj have no value. This doesn't even run yet, so it skips to the end. And once it gets here, that's when we're giving name and adj Adjective, the value. So, Tanner and Buff are then, given a value to our parameters, and order is important. So, they map by order.
[00:01:28] So, name is the first one. So, the first argument is gonna give the first parameter it's name, so name is then Tanner. And then the second one buff is then adj. And there's no way you can, you can't mix up the order. The order is super, super important, and that's the only way that your code knows which argument goes with which parameter.
[00:01:55]
>> Bianca Gandolfo: Cool.
>> Speaker 2: Which one, so name and adj are the parameters?
>> Bianca Gandolfo: Yes.
>> Speaker 2: And tanner and buff are the arguments?
>> Bianca Gandolfo: Yes.
>> Speaker 2: Okay.
>> Bianca Gandolfo: And the words themselves, aren't that important, it's just the concept. That these are variable like, and that they're placeholders, and this is the actual value, right?
[00:02:20] And you can kind of tell that these are variable like just cuz they don't have like, they're not keywords like function or return. But they're also, they don't have quotes around them, they're not any other kind of, data type. So, where do we see, let's go through, parameters.
[00:02:45] So we just said that name and adj are parameters. Where else do we see parameters? Where did we leave off, did we leave off at Tanner?
>> Speaker 3: [INAUDIBLE] First.
>> Bianca Gandolfo: So parameters are just the placeholders.
>> Speaker 3: Right. So after after name improver?
>> Bianca Gandolfo: Yeah.
>> Speaker 3: Those are our arguments.
[00:03:10] Okay.
>> Bianca Gandolfo: You can phone a friend if you want.
>> Speaker 3: How about after four h?
>> Bianca Gandolfo: Close so four h is actually a function that's being called.
>> Speaker 3: Right.
>> Bianca Gandolfo: But here that's a parameter val, that's a parameter. I think that's the only one, because this function has no parameters.
[00:03:38] And then what about arguments? Where are we passing arguments? So arguments are past to the function at call time. So, Grace, I think it's your turn.
>> Grace: Would that be something like a click?
>> Speaker 5: And then what about arguments?
>> Bianca Gandolfo: Yeah. Yeah, click. So, click is an argument, so it's the string, and this function is also an argument.
[00:04:08] I was wondering if before each, isn't the function parameter, or is that the argument. So this is the argument, right here. That function is an argument.
>> Bianca Gandolfo: And where else do we see arguments?
>> Speaker 6: Right there?
>> Bianca Gandolfo: Uh-huh.
>> Speaker 6: The j query.
>> Bianca Gandolfo: Yeah. So.
>> Speaker 6: button.
>> Bianca Gandolfo: Yeah.
[00:04:35] Here. So this is also an argument. Do you see any more, Kim?
>> Kim: Don't press my buttons.
>> Bianca Gandolfo: Yeah, don't press my buttons. So console.log. In the console.log. Cool. Any questions about that? It's kind of a, it's kind of a gray area. It's easy to get them confused.
[00:05:06] Any questions of clarification before I move on? Cool. So the next thing I want to talk about is what it means to return a value versus having a side effect. So if you don't have an explicit return statement in your function, it is just going to return undefined.
[00:05:30] Okay? So if we want a function to return a value, we have to explicitly say return. And the thing about return is that it is going to immediately break out of the function and return that value, whether it is in an if block or a four loop, it is just going to immediately return out of that function.
[00:05:45] So you have to be careful about where you place your return statements, but if you do in fact want your function to return a value, the only way you can do that is by having a return. And everything else that you do that's doing work is a side effect.
[00:06:02] So, this console.log here. That's considered a side effect, cuz this function is not actually returning anything it's just console logging.
>> Speaker 2: So if you change the assignment on a variable but don't return anything that's a side effect of.
>> Bianca Gandolfo: Totally, exactly. Or if you're selecting, if you're creating dom nodes and appending them inside of a function that would be considered a side effect and not returning.
[00:06:35] So you have an explicit return statement which you like returns like some data right. Or you have side effects. And those are the two different things. Cool. So just a quick review, where did we leave off? I think it's your turn. Andy, right? So what is this add thing going to, this add function going to return?
[00:07:11] Just testing your math skills.
>> Andy: Seven.
>> Bianca Gandolfo: Hope you studied. Yeah. Seven. Awesome. And take a moment and explain to the person next to you how you would change this add function so that it would add to 13. And you can't minus 1. Wait. Here, let me change this.
[00:07:33] Okay. Actually, it doesn't matter. Without doing, without someone, I did this the other day and they were like 'yeah, just a+b minus 1. [LAUGH] That's not what I'm asking. So yeah, explain to your partner how we would get this to return 13 without doing any extra math.
>> Speaker 2: You change the function.
[00:07:59]
>> Bianca Gandolfo: Change the function. So explain to someone next to you. Or in the chat you can type it out if you want.
>> Bianca Gandolfo: So and what we're changing is the function itself. Not the arguments.
>> Speaker 2: [INAUDIBLE] [CROSSTALK]
>> Bianca Gandolfo: What did you come up with?
>> Speaker 2: [INAUDIBLE].
>> Bianca Gandolfo: Anyone come up with any brilliant solutions?
[00:08:40] This complicating coding problem.
>> Speaker 2: I would add a comma C so that the definition has A,B,C and then I would return A, or B plus C.
>> Bianca Gandolfo: Totally. And here we see that we don't need to use all the arguments, or even do any work on parameters. We can just skip them and JavaScript is really flexible like that.
[00:09:19] It doesn't mind. And even when we did only have two here. A and B. Notice when we pass three arguments, it just ignored them, and that's one of the cool things, it's one of the dangerous things about JavaScript, that flexibility, but it's also one of the cool things.
[00:09:36] And, what comes from that, or a cool thing that we have in JavaScript that works with that is this thing called the arguments keyword. And an argument's keyword is a special keyword in JavaScript that lives inside functions. And it gets a value of the arguments that you pass in in the form of an array like object.
[00:10:02] And what it would look like if we passed 3,10, and 5 to our add function, and then we just console logged the arguments, it would log something that looks a lot like an array, looks like an array of all the arguments in the order that you passed them.
[00:10:18] And so this is really powerful when you don't know how many arguments your function can take, so you can have that flexibility like maybe you're going to add several numbers and you want to have it flexible, you can add a bunch of them. So you can loop through it and just add it that way.
[00:10:34] Another cool thing that you can do with the arguments key word, is you can have different versions of functions. So you can say like if you pass three arguments do this. If you pass five arguments you know do this. So, you can have different options for how your function works.
[00:10:54]
>> Speaker 5: So, if we define the function with the empty brackets. Instead of (a, b), it's just empty. But when you call the function, you add I wanted to say 3, 4 arguments or prime or arguments.
>> Speaker 5: Then two acts as those, do you have to kinda loop through this argument's list or array I mean?
[00:11:18]
>> Bianca Gandolfo: Mm-hm. Yeah, so if you had a bunch.
>> Speaker 5: Because that's the only way you'd like reference something.
>> Bianca Gandolfo: I might have that slide.
>> Bianca Gandolfo: No, I don't.
>> Speaker 5: [COUGH]
>> Bianca Gandolfo: So if you did want to, have this all add together, you know, what you could do is, you know do our for loop, remember this?
[00:11:45] So arguments is not an array, but it does have a dot length property which is handy. And then we can have like results = 0. And then we can say results + = arguments at i. And so this is how we would then just like, if you wanted to add all these arguments.
[00:12:19]
>> Bianca Gandolfo: Hopefully I have no syntax errors, let's see. Cool. So 138. So that's, one use case. Cool. So, how then would we, if we wanted to, have an equal 18, using the arguments keyword, what would we change in the add function?
>> Bianca Gandolfo: So if we wanted to add something here.
[00:12:58]
>> Speaker 2: Arguments too?
>> Bianca Gandolfo: Yup. So it'd be arguments[2]. And that'll return 18. Cool. Awesome. And so I said, it really isn't an array, its an array like object. What does that mean? Why is that important to us? Its important mostly for when you are trying to use array methods on it.
[00:13:25] It won't have slice, for example, which is a little unfortunate. But there are methods that you can, there are ways that you can turn it into an array. And it's kind of a little bit out of the scope of what we're doing because it goes into the prototype but something like could even be typing this wrong.
[00:13:47] It's like prototype, call, that slice, dot call. Something like this, so you can just google it actually, the exact syntax I can't remember.
>> Speaker 2: [INAUDIBLE]
>> Bianca Gandolfo: Is it? Okay, cool. Arguments, 0. Thank you.
>> Bianca Gandolfo: So this would be an example of how you would turn it into an array.
[00:14:18]
>> Speaker 2: And it's array, it's array.
>> Speaker 5: [INAUDIBLE]
>> Bianca Gandolfo: Mm. Thank you. Awesome. So, if you want to use any of the handy array methods you will first have to turn it into a real array and then you can do those operations, but if you're trying to do it without it, it's going to give you an error.
[00:14:45] Cool. Also functions or objects. Which means those rules that we were talking about before, with the dot notation and bracket notation, all remain the same. I'm not going to go into a whole spiel about it, but I hope by now you trust me, and I don't have to show you all the examples that dot notation and bracket notation work the same on functions.
[00:15:08] And you actually use this a lot for when you're making constructors.