Functions

[00:00:00]
>> WebDevSimplified: All right, so we just kind of went through the basics of defining variables and what the different types are in JavaScript. So now we're ready to dive into the next concept which is going to be talking about functions, and variables are all about storing values. We put something in a box to get it out of the box later. A function is all about storing logic. How does something actually work? So variables for values, a function is for logic.

[00:00:22]
And the whole reason that we have functions inside JavaScript is so we don't have to write the same code over and over and over again to do the exact same thing. A simple example here, we're console logging out the text hello, and we have some random code somewhere in the middle, and then we're logging out hello again, and we're repeating ourselves here. We have the exact same piece of code multiple different times.

[00:00:41]
This is a perfect example where we can use a function to make this easier to maintain because now we can put it all in one single place. Another nice thing about functions is if I want to change this to say hi instead of hello, I need to change it here and then I need to come down here and change it here, and the 50 other places that I use this exact piece of code, I need to remember where every single one of them is and change all of them.

[00:01:01]
And if I forget one of them, my entire application breaks. So again, a function gives us one single place we define what happens in our logic, and if we need to change it, we change it in this one single place. So here would be an example of what a function for that would look like. Let's actually go over to our text editor here for our code and write out a function ourselves. To create a function, we just use the function keyword, so type out the word function just as is.

[00:01:23]
It should turn a different color in your editor if you typed it incorrectly. We then followed up by a space and then we give our function a name using the exact same rules we do for variables. So if we want to create a function called printName, we would give it the print word and then the name word all as one word, and we can use a capital letter for every word after the first, exactly the same as creating a variable.

[00:01:43]
And up until now this looks pretty much the same as creating a variable. We just use the word function instead of the word let or const. This is where it becomes different though. The next step to creating a function is we need to use open and closing parentheses just like this. Now, later we'll talk about how we can pass in different values to a function to do different things, but for now, we're creating functions that have no parameters to them at all.

[00:02:03]
So we're going to leave this parenthesis section completely blank. We just need to put it there because it's required for every single function. The next thing we need to do is to create curly braces. This is the key kind of on the very right side of your keyboard just right by the backspace button pretty much up there. You're going to hold down the shift key, hit that curly brace key, that'll open up these curly braces for you, and then inside of here we put whatever code we want.

[00:02:26]
The code inside these curly braces is what runs any time we run a function. So in our case, if we want to print out our name, we can just say console.log and then put whatever your name is directly inside there. So now we have a function called printName. That's the name we gave it, and everything inside of here is the code that runs whenever we use that particular function. So we can just give that a quick save and you'll notice currently nothing shows up in my console because creating a function doesn't actually run any code or do anything.

[00:02:52]
It just creates a thing that you can use later in your code, just like creating a variable doesn't do anything until you use it. Creating a function doesn't do anything until you use it. So now we have this function. How do we actually go about and use this particular function? Generally, this is either going to be called calling a function or running a function. That's the terminology you'll hear most often.

[00:03:12]
And to call a function, all you do is you take your function name, whatever it is, and you put those parentheses opening and closing directly afterwards. This is what makes a function different than a variable because now we can actually run the code inside of here. So we'll go back into our example. We'll type out the name of our function just like that, and then we need to put that opening and that closing parenthesis directly after that.

[00:03:33]
When I give this a quick save, you'll notice it immediately logs out my name inside of the console because we called that function and it runs whatever code is inside of here and you can put as much or as little code as you want. For example, I could add another console.log that's going to print out my last name, and now when I save, you can see it prints out Kyle, and then we get a separate log that prints out Cook.

[00:03:52]
So you can see it doesn't matter how much or how little code we put inside of here, every time we call printName, it's going to run all the code directly inside this function. Now if I were to copy this down and run this code a second time, you'll see it logs out Kyle, then Cook, and then Kyle and Cook. It calls all that code a second time. And the real power of functions is now, let's say my name changed.

[00:04:13]
My name is now Sally. I can change my name to Sally, click save, automatically refresh, and now you notice both places I use that function, it updates to use that brand new code. So this is the power of functions. Now we can not only store values, but now we can store logic that happens and does things inside of our code, and we can store it all inside of these functions to make using our code much easier going forward.

[00:04:35]
Now with functions I talked about so far we've left this parenthesis section blank, but we can actually use that to pass along parameters and arguments to our function. So if we go back, let's say that we want to pass in the name that we print here because right now it always prints Sally and it always prints Cook. What happens if we want to just pass in a name and let it print that particular value out?

[00:04:53]
What we would do is we would create essentially a placeholder for a variable name that we want to use. It can be any name you want. In our case, we'll just give this the name of name, or actually we'll call it myName. There we go. So now we have a variable called myName that's getting put into this function. This is just a placeholder for a value that will get passed in later, and we can use that anywhere inside of our function.

[00:05:13]
So I'm going to use that inside this console.log right here. So now when we call printName, we need to pass it a value. Right now it's printing out undefined because you know I'm not passing a value to this, so the default value for every variable in JavaScript, if you haven't given it a value yet, is undefined. So to pass the value, all we do is inside the parentheses when we call our function, we pass it whatever we want.

[00:05:34]
Let's just pass it the name Kyle. So now when I call this function, it's going to print out Kyle the very first time. And if I were to pass a new value down here, for example, Cook, you can see the first time I call this function, it prints out the name of Kyle, and the second it prints out the name of Cook. And essentially the way that variables and functions work together is when you pass a value to a function, it takes whatever you pass in in our case.

[00:05:57]
Kyle, it copies that value and essentially places it directly in a brand new variable called myName. You can almost think at the very top of your file we have this showing up, where it just takes whatever that value is and puts it directly in that name. That's kind of what's happening when we pass a value to a function. So really these function parameters here are just placeholder variable names that we can set to whatever value we want whenever we call the particular function.

[00:06:20]
And this is great because now we have reusable logic that can do different things depending on what we pass in. In our case, we can print out different names when we pass them into this particular function. Now you may hear me use the words parameters and arguments quite often inside when I'm talking about functions. They technically mean different things. A parameter is the names listed in the function definition.

[00:06:41]
So up here, parameters are the things you define when you create our function. Arguments are the things you pass to the function. So here we're passing along the argument Kyle, and the argument Sarah. Now I mess these up all the time. I will call arguments parameters and I will call parameters arguments, and it doesn't really matter which one you use. Technically, yes, there's a right and wrong terminology, but if you call an argument a parameter, everybody knows what you're talking about, so it's OK if you mix these two values up.

[00:07:08]
I just wanted to emphasize that they are technically different. You may hear me use both interchangeably. Just know that I'm terrible at remembering which one is which, which is why I often mess them up. Now with functions, you can obviously pass more than one parameter along to your different functions. So here you can see we've defined a sum function that actually takes in two different parameters.

[00:07:26]
So let's go ahead and we're going to change our printName to be a sum function that takes multiple parameters. We can come in here, give it our name of sum, and our first parameter we already know how to pass in. We just give it a name. We're going to call ours a. To create a second variable, all you do is you place a comma and then you type out whatever the second variable name is. Generally, I like to put a space between our commas just to make it a little easier to format our code, and we can pass in a second variable name of b.

[00:07:51]
Now we have two variables passed in this function, and I can create as many as I want. I can go c, d, e, as many different variables as I want. All you need to do is just separate each variable by a comma, and that's how you know you can pass in multiple values. So now I can just add these together because that's what a sum function would do. And here we have a function that takes in two parameters a and b, and it'll add them together to give you the sum of those values.

[00:08:12]
When we save, we have no errors, which is a great sign that we've wrote our code correctly. So let's call this function and see what works. We know how to pass in one value. You just pass it in like this, but to pass in further values just separate them by a comma, just like you define your parameters separated by commas. When you pass multiple values you pass them in with commas between them. Now when I save, you can see we get 3 printed out because we're adding together 1 and 2.

[00:08:35]
If I were to change this to add together 1 and 5, you'll see it prints out the value of 6. So it's able to automatically essentially infer what these different variables are. And again, it's working just like this. Essentially it's saying let a equal 1 and let b equal 5. That's kind of what's happening behind the scenes when you call a function. It's creating new variables with these names and it's setting them to the values you pass into your particular function.

[00:08:57]
So another thing that's important to understand is that so far when we've been passing along all of our different arguments and parameters we just hard code in like 1 and 5 and so on. But you can also pass along variable names. So here we have that same function. It's called sum in this or add in this case. We have variables number 1 and number 2, and we can pass those variables along just like you would a value because a variable and a value are essentially interchangeable.

[00:09:21]
So we can come in here, we can set let a equals 1, and now here instead of passing in 1, I'll just pass in the variable a. I get the exact same output as 6 on the side of my screen because it's just taking whatever that variable value is a, and this could be called anything. I'll just call it myNumber just so it's different than the a variable up top. There we go, and you can see it's still working fine.

[00:09:41]
So it's essentially taking whatever this variable is, which is one, and pasting that in here. And then since we're calling this function sum, it's taking a and setting it to the value we passed in, which is 1. So we can use variables and pass them along just like we could with actual values themselves. Now another important thing about functions is they don't only perform logic, but they can also give you results.

[00:10:02]
So currently our sum function is just logging out the sum. But what if we wanted to create a sum function that returns to us what the actual sum is. This is where the return keyword comes in. So we can type in the word return just like this. It's going to hopefully turn a different color if you typed it in correctly. Put a space, and then we can put any code we want inside of here. For example, I'm going to create a variable called sum, or actually we'll call it addedNumbers.

[00:10:27]
There we go. I'll set that to a plus b, and then here I can return those added numbers. Now essentially I'm returning a value and I can use that value from my function. So when we save, you'll notice nothing happens because we're not printing any code anywhere. So how do we actually get this value that's returned from a function? Well, anytime that we call a function, it's going to give us a value, so I can just come in here, console.log, whatever that value is.

[00:10:49]
Give that a quick save and you can see it prints out 6 because essentially what's happening when we call a function, it'll take this section right here, it'll run all of our code and whatever gets returned from here, you can almost think about JavaScript taking that entire function section and replacing it with whatever the return value is. So just copy, paste, replace it with what that return value is.

[00:11:09]
Oftentimes the way you'll see these being used is we can say that this is going to be our result, which is equal to calling sum with some numbers we'll say 4 and 5, and now we have a new variable which is set to the result of calling this function. And now I can log out that new variable which in our case will print out 9 because 4 plus 5 is 9. So the return portion of a function is really, really important.

[00:11:30]
Most functions you're going to work with are either going to perform a set of logic or they're going to return some value for you to use later on inside your code. The important thing to understand about return though is as soon as you get to return inside your function, nothing else inside that function runs. It immediately exits with that value. So if I put some code afterwards that just says console.log here and I saved my code, you'll notice it never prints that.

[00:11:52]
And actually inside my editor this kind of gets grayed out because VS Code is smart enough to know it's impossible to get to this line of code because I'm returning and once you return in a function, it immediately stops executing the rest of the code inside your function. So return is a really great way to get that information out and then stop executing if you don't want to finish whatever else is afterwards.

[00:12:13]
So make sure that if you have some code and you're wondering why it's not working, it could be because it's accidentally put after that return statement portion. Now some common errors you may run into. One of the biggest ones is you just forget to put parentheses. If you're creating a function that does not take any arguments or parameters, it still needs to have those parentheses in the section, otherwise it won't know that it's a function.

[00:12:32]
Also, you may forget to put the curly braces around your code. You may miss one of them or multiple of them. Again, a very common mistake. And if you were to do something like that, you're going to get an error. Immediately you can see we get some errors inside of here, and I get an error right here that's essentially saying, hey, there's some stuff going on inside your code that's not working. And when I save I'm going to get even more errors because it doesn't know what's going on.

[00:12:50]
When you see these red squiggly lines in your code, it means that you accidentally wrote something incorrectly. So just kind of look at the code where those squiggly lines are and try to figure out what the problem is. And at the very end of this workshop, we're going to be going through a whole debugging section to really try to help you debug some of these problems you may run into some of the more common ones you'll see.