Hi everybody, today we're going to talk about functions. So, functions are these bits of code that you can reuse over and over again by just coding what we call the function name. Functions of course, like everything else in programming, have special syntax that you need to follow. In order to declare a function so that you can use it later, you need to use the special keyword, function, f-u-n-c-t-i-o-n. It's not an abbreviated such as, var, so make sure you write out the whole thing. Once you write out function you can give it any name you want. Stick to the same rules as the variables, only use letters, and digits, and underscores. Next, this third thing I have inside here, inside the parenthesis, are what we call the parameters. Sometimes there'll be things in here, sometimes there won't. Once you have what we call the function header, where you have function, the name, the parentheses and any type of information in here. We're going use curly brackets to begin and end our function. It's really important right here that you realize that you do not put a semi-colon right here. In all of our other JavaScript expressions and statements, we ended them with a semicolon. If you do that here, you're gonna mess up your code. All those statements go inside here. And how it works is that later, then when people run your function, it'll execute all the code that's in here. And this code is just general code you would always write with your semicolons, your expression, your statements. It's just a really nice way to save it. So you don't have to keep typing it over and over again. So let me show you an example. In this case, I declared a function called welcomeMsg. And I didn't put anything inside the parenthesis. Cuz I said, you know what, it is doesn't matter. Every time I run this function, all I want to happen is to have an alert that says, Welcome to JavaScript. And this will work numerous times. I don't have to keep writing things over and over again. It's a small function, but it's something that will work. Here's another very similar function. The only difference is that, this time, I went ahead and I included a parameter list, which says, hey, now instead of saying Welcome to JavaScript every time we run this function. It's actually going to give an alert of whatever message you tell it to do in what we call it real time. So the first step in using functions is to do this function declaration, where you use the keywords, the curly brackets, and the parenthesis. Declaring a function doesn't actually do anything for you though. You need to tell the computer when you want that function to run. We do this by saying or we call the function. Every time you write the function name, you're telling the computer that you want to run that code. So calling a function changes what we call the program flow. Before our programs start at the top and just work their way down line by line by line. Now with functions, the computer is actually jumping around in memory and executing different parts of code, not necessarily in the order that you write them. So here's an example. I have my welcomeMsg function, the one with the parameters. So over here, in my HTML file, or JavaScript file, the file I'm running, is the computer gets down here, it says, oh, I know how to do that, check. Then it gets to our function call, where it says oh, I'm gonna leave here and I'm gonna go over and run this code. As soon as it's done running this code, it comes back to the next line of code. Well, we know how to say x = "Goodbye", the computer knows how to assign that new value. So when we go here, once again, we go back up to this code and then back down here. So, the code looks quite straightforward to you, and when it runs it should look straightforward to you. But it's important to know that behind the scenes there's a lot going on as the computer jumps from different bits of code back to other bits of code. So hopefully if you type this in and run it, you should get a hello and then a goodbye message. You could type putting in numbers or anything you'd like instead if you prefer. So, let's talk a little bit more about those parameters that I talked about. Because sometimes some functions need a little bit of extra information in order to perform its task. So let's think about getElementById. That's not really going to work unless you tell it which ID you're looking for. So, that's an extra piece of information or a parameter that you need to provide. The important thing to know is the names of the parameters for your functions, they're not important, they're like variable names. You can call them anything you want, as long as you're consistent. The next thing to talk about, when we talk about functions, are return values. Some functions return values, others don't. But, these values can be used later for assignment statements or conditional expressions. So later when we talk about forms, we're gonna wanna put in special functions that will say, hey, I need you to halt execution right now, because I don't want you to hit submit. I don't want you to be able to hit yes on that form. So, let's look an example of a function that returns a value. In this case, I've written a simple function that takes your message that you want to say, hello or good afternoon, good morning, but we're gonna follow that up with a prompt. And that prompt's gonna ask a person for their name. So we're combining a few different elements here. We start off by saying, hey, I'm gonna make a variable called firstName, and I wanna set it to whatever the person types into the prompt. So if over here, if I don't have the term var, firstName would be left as something that's empty. So, using return statements are just typically used in order to assign values to valuables or to check conditional statements, and we're gonna be using these a lot. So I just need you to be aware of the term. So, let's review what we've talked about with functions so far. Whenever possible, go ahead and use built in functions. Sometimes when people are first learning how to program they feel this need to write everything from scratch to show that they really understand. There's really no point in doing that at the beginning. If someone else has written a really good function go ahead and use it. You can practice your own skills by augmenting it or adding little things. When you do write your own function, try not to be too specific. And what I mean by that is, don't write a function that you're not gonna be able to reuse multiple times in a lot of different scenarios. Don't hard-code too many values so that it's so specific that it only works for one person. Finally, I just wanna remind you, that function parameters can have any name you want them to have. A lot of times people get caught up in my examples, and think that's the only way to go. It's not the case. Don't do everything exactly the way you see it online, or in my examples. It gives you a lot more power if you change those parameter names, to see how the inner workings are going. So we're going to be using functions a lot in this class. You're going to be writing your own functions in the homework, and I'm hoping that you'll be able to do this and feel like you're really starting to understand some of the power of JavaScript. Good luck.
