Learn JavaScript #9 | Defining Functions

Hey guys, welcome back. This is the big video on functions. So, when I say function what I mean is it's a block of code that's not run but that you can reference in your code to have it run, and you can supply it certain data as you do so. Now that explanation might seem a little obscure, so let's just jump into it. Much like when you create a variable you use the keyword var, when you create a function you're going to use a keyword called function, and then space. And here you're going to give your function a name. So, for instance, mine is going to be myVar. You guys can name this whatever you want. At this point, once you have it named, you need to open up and close curly brackets and then you can put arguments in here, and we're going to talk more about that later, but for right now on the right hand side at the very end of the line as of this point, after the closed brackets, open up the curly brackets, and close them. This is a function. Right now this function is empty, but you guys have written a function. So, let's make this not empty. I'm going to console.log "My name is nick." Now I'm going to save this, and refresh our page here, and nothing happens because we didn't call the function. So this is defining a function, this is building a function, but then to call the function remember when we alerted information on the page when you first loaded it we called alert, and that's how you call a function. You just write the function name, I actually named it at myVar, let me name it myFunction. So down here I'm going to call the function, and by calling it I mean I'm going to tell it to do it's thing to run. So I'm going to type myFunction, and then we're going to open and close the brackets, and there's no parameters to be passed in here, it's just a function in and of itself. So I'm just going to end the line with a semicolon. I'm going to save and refresh, and it prints out my name is nick because I've told it to right here. Now, when I say arguments you can actually pass an argument into that. Let me erase this. Let's create a new function called printName. So, we're going to take in one variable, or one bit of data, that we're going to reference inside of the function as a variable and it's going to be name. Now open up and close your curly brackets, and in here we're just going to print out hello and then name. So, console.log and here we're going to open up quotations "hello" and then a comma. And then outside of the quotations instead of concatenating it with a plus sign, we're going to concatenate it with a comma. And it's not really concatenation, it doesn't make it the same thing, but it prints out both of these, one and then the other. So, like that. Now by using a comma I don't have to make sure there's a space hard-coded at the end of that line. This essentially adds one. So, down here let's call print name and let's pass it an argument. Now, within the function here we're using it as a string. We can't send it as a...I mean we could set it as a boolean if we wanted to. But, name is going to be Nick, end that with a semicolon, save it, refresh our page, and it says hello Nick. Now I can call that function again and give it a different name, Charles. And now it's going to print Nick and then Charles. So as you can see whatever we pass as the value when we call the function becomes this inside of the function, and so that's a very quick look at parameters. You can add multiple parameters in which case you just comma separate them. So, age and then I'm going to put a comma here, and a period. So we're going to end that statement and then say you are, and then their age separated by comma. So this says hello name, you are age. So when we call the functions now...if I just save it and run it it will not work because it says you are undefined, because we haven't defined anything in these function calls. So let's say 28 separated by a comma again, and then space 56. Save it and refresh, and you can see that it says hello Nick you are 28 because we're passing both of these values in so this becomes name, and this becomes age. You generally need to pass them in to the function in the same order that they are expected to be in I guess, which you guys could probably guess that. So this is a quick way to add a function. We're going to be covering functions more in depth and the main reason why we use them. We use them so that we can write out a big long function here, and then if we need to you know pull it off multiple times. So let's say we're logging in a user that's like a 20 lines of code. So, rather than logging someone in manually and writing out the code in like 10 different spots, let's just create a function then call that function from those 10 different spots, and that's why we use functions. So, in the next video, we're going to be diving deeper into functions and learning more about them.