Functions, Parameters, & Arguments

[00:00:00]
>> Let us press on and talk about functions. Now, as Kim Kardashian says in this GIF that you probably can't read, I'm just so tired, I can't even function, which I'm sure we've all related to at some point or another, or maybe even right now. And it makes sense that Kim is tired when she's thinking about functions, because if we said that values are things in our JavaScript universe and variables are pointers, two things, then we could think about functions as doing things.

[00:00:35]
And so that is why they make us tired sometimes. [LAUGH] So let's talk about functions. Now we saw really briefly some function declarations earlier. But this is what it looks like when we declare or create a function in JavaScript. There's a few different options that we have for how to create a function but this is one very common one.

[00:00:58]
We have the keyword function, which indicates that this is gonna be a function. A name for the function, in this case, half, and then some parentheses with some stuff inside them. Then we have our good friends, the curly braces. And then we have some code inside of those curly braces.

[00:01:19]
And in this case, we have one line of code and it has the word return in it. And then it has some kind of expression, in this case, dividing x by 2, so we might expect half to give us the half of some number. And if we wanna use it or as we say in computer lingo, as we if we wanna call a function, we can say the name of the function, and then parentheses.

[00:01:50]
And then pass in a value that we want to give to this function for it to run through its code as whatever value we put inside of the parens when we declared the function. So in this case, if we assign a new variable one to the value of calling half on 2, the function half is gonna get the number 2 and it's going to return 2 divided by 2 which is 1, cool?

[00:02:30]
Okay, so let's talk a little bit more detail about what is going on here inside of these parens when we declare the function. So the stuff that we put in here, which right now has very boring names of x or x and y, these are what we could think of as the values that this function is gonna need to work.

[00:02:55]
And then when we call it, we're gonna pass in actual values that we want this function to work with. And so the difference between these words is essentially that when we're declaring the function and we're saying okay, this function is gonna need an x and it's gonna need a y, we call those the parameters of the function.

[00:03:19]
And then when we pass in actual values like 2 and 3, those are called the arguments passed to the function, which are gonna get assigned to the parameters that we described when we created the function. So you could think of these parameters or what happens in this x, y here as sort of like mini-variables or sort of pseudo-variables are what we are gonna call the values that get passed in as arguments to the function.

[00:03:49]
This is all just a little bit of terminology, the words are not so important except insofar as you're going along in your JavaScript journey and you're finding more resources, more courses, more articles on MDN, whatever, you might hear these words used. Okay, now some functions don't even need any values to do their job, like for example, here we have a function getRandomNumber and it's using, you remember our Math.random method that we looked at before?

[00:04:16]
Does anybody remember what Math.random does?
>> Random number.
>> A random number, specifically?
>> Zero, one.
>> Between zero and one, yes, exactly. So right now, we have a getRandomNumber function which is really just kind of a tiny little wrapper around our Math.random method, which is going to give us a new number.

[00:04:38]
And just like Math.random, we don't need to give this function any values to do its job, it's just gonna generate a new number for us. So in this case, our function has no parameters. In between these parentheses when we declare the function, there's nothing. And when we call the function, we put nothing between the parentheses.

[00:04:59]
So yes, so these parameters are the inputs that our function expects, and the arguments that we pass in are the actual values. So let's take a look at this example. I have a function here add3, which is going to take in three different parameters with the very boring names x, y, and z.

[00:05:18]
And then it is going to log two things, it's going to log the names of the parameters, and it's going to log the values of the actual arguments. Note the difference in syntax here between these two calls to console.log. So fun fact about console.log is you can call console.log and pass in multiple arguments to console.log using commas to separate them, and it will log them all separated by spaces.

[00:05:49]
Let's watch it in action. So this is gonna log the parameter names and then the values and then it's going to return a sum, we'll talk about returns in a second. Let's go back to our, Console. And we're going to declare this function add3. So now, what JavaScript has done is it's created a new variable add3 whose value is a function.

[00:06:19]
So if I asked for add3 with no parentheses, JavaScript is gonna say, yep, I know what add3 is, and it's a function. Now, if I call add3 and capture that as a sum value, add3 is going to log out. My parameters are names x, y, z, and I received the arguments 4, 5, and 6.

[00:06:43]
And then the value of sum gonna be what? What do y'all think? [LAUGH]
>> 15.
>> Indeed, so what add3 did was a few different things. It logged a couple of things to the console and it returned a value, which then I was able to capture by assigning it to a variable.

[00:07:12]
So we name parameters similarly to how we name variables. So we should kinda follow the same rules of thumb as we do when we're naming variables. What do you think happens if I do the first thing here? This function, does this work where in between the parentheses when I'm declaring this function, I'm putting a literal string value, literally a value?

[00:07:38]
Should we find out what happens?
>> It should work, no?
>> Guesses?
>> I think you should be able to pass a string as a parameter into a function.
>> So we have some people saying I think so, I think it'll work. Some people saying I don't think it'll work.

[00:07:54]
>> In chat, true.
>> Let's find out, sorry?
>> In chat, somebody said true.
>> Okay, so it will output true, let's find out. So does this work? Ugh, JavaScript returned a syntax error, true, we should say, a syntax error, missing parameter. So JavaScript is actually looking for variable names in between those parentheses when we declare a function.

[00:08:19]
So if I try to give in an actual value there instead of the name for a value that might get passed in as a argument to the function, JavaScript doesn't like it, so this does not work. Okay, how about this? [LAUGH] How about if I have a variable that starts with a 1 or a parameter name that starts with a 1 and ends with an exclamation point?

[00:08:44]
Do you think this will work?
>> Yeah.
>> Yeah? So we talked briefly about variable names earlier in the course, is this a valid variable name?
>> No.
>> No, it's not. So let's see what JavaScript does. Let's see if it likes it. Oop, nope, this time, the error is even weirder, identifier starts immediately after numeric literal.

[00:09:05]
It's cuz it can't even parse this as a name for a parameter. It's actually seeing the 1 and thinking it's a literal 1, and then it's confused about what happens afterwards, and so no, this doesn't work. So essentially, when you're declaring a function, put valid variable names as the names of any parameters that you might need for that function, cool?

[00:09:24]
Okay, now, another question we might have is like for example, add3, as its name indicates, expects three values coming in because it's trying to add x to y to z. So what happens if we don't call a function with its intended arguments? What happens if we call add3 with just 1 and 2, for example?

[00:09:51]
Any guesses?
>> Node reference.
>> So node reference, meaning we get something like an unexpected missing value in JavaScript we might say, okay? So maybe we get like, nope, something's wrong. I was expecting x, y, and z and you didn't give me a z, and it's not gonna work, okay?

[00:10:10]
Any other guesses what might happen?
>> In chat, a couple of people are saying an error.
>> An error might happen, yes, so that's basically more generally. Let's find out. [LAUGH] Well, we didn't get an error. The function ran and it said, I received the arguments 1 2, and our good friend undefined.

[00:10:35]
So JavaScript didn't mind that we called this with the wrong number of arguments, it just said, well, you didn't pass in a z. z is undefined then. And so the value of adding, what was it, 1 + 2 + undefined is N-A-N or NaN, which stands for, anybody know?

[00:11:00]
>> Not a number.
>> Not a number, which ironically, Is a number. [LAUGH] So NaN is something you might find if things have gone wrong in your program. It's also what we get, like let's say if we try to divide by 0 or something like that, when the math just doesn't work out, like adding 1 and 2 and undefined, JavaScript's like I don't know how to do that.

[00:11:26]
But it doesn't error, it doesn't complain, it just returns a value that I wouldn't expect because of that undefined value. So this is, again, a case of JavaScript being super loosey-goosey with its types and with the things that it expects and basically not caring that you essentially silently passed in undefined as the third value.

[00:11:48]
Now what about our getRandomNumber function, which, let me just go back and grab it so that we have it. So we had this getRandomNumber function, which returns our Math.random and if we call it, we expect some kind of number between 0 and 1. But what happens if we call it with some value that we didn't account for in the function declaration?

[00:12:28]
>> It sort of turns optimus quick.
>> Also maybe spoilers [LAUGH]. So yes, spoilers is JavaScript don't care, we gave it an extra value that it didn't have to pay attention to and so it just ignored it. No error, no hey, are you using this function the way that you expect to be using this function?

[00:12:46]
Dear programmer, maybe you've misunderstood something about how you wrote that function. No helpful thing like that from JavaScript, no. Instead, it's just gonna go ahead and do its job, ignoring the useless value that we passed in, that we didn't capture as a parameter. So point being JavaScript is very loosey-goosey when it comes to function arguments, unlike some other languages, which will error or complain or at least warn you or say something when you've passed in an unexpected number of arguments.

[00:13:16]
Now, there are things that you as a programmer can do within your function to make sure that anybody calling that function is using the correct number of arguments. But we're gonna leave that for next steps in the JavaScript journey. But suffice it to say it's left up to the coder to handle any mistakes like thiscuz JavaScript itself is not gonna do it for you.

[00:13:42]
So, yes, it's sort of almost like you pass in no arguments and it's just like, well, I have no arguments, to you not having any arguments. I don't mind, it's fine, it's loosey-goosey.