JavaScript Basics pt. 10 - Functions
JavaScriptTranscript
English (Auto-generated)
Welcome everyone to Javascript Basics Part 10. Now we're finally getting into functions and this is where the fun begins. So javascript functions are where we really start getting used or getting to use some of the concepts that we've learned. This is where we get to start putting everything together. But more importantly, this is where a lot of logic in javascript and problem solving problem solving comes into play because I've talked a lot before about handle um there's a lot of logic in javascript is programming functions are really where that begins for us. So what are functions Javascript functions allow you to split your code up into reusable pieces that you can call upon later down the line. So they're reusable blocks of code and you can name and call on later. You pass them data, they do something with that data and then they return a result. So let's go ahead and write out our very first function. Head on over to replicate again. If you don't have that ready, just head to replace dot com. And if you have your previous project, open head to the script file. If not on that front page, just start a new front end project will say html CSS and javascript and then head to that script file. So let's go ahead and declare our very first office school function together. So you want to declare this first with the function name. So you're right on function and then you want to name your function. So let's just Neymar's if you want to see followed by parentheses after the parentheses. You will do curly braces, enter. And then let's say let's have it consulate. Hello world. And then now this important part it's a part when I said you call upon it later because if we do, if we just hit run right now, it's not gonna do anything. The main reason for that is because we have not called R function before I said you want to call it later, we're gonna call it now. So now you will do Funk parentheses. You want to add the parentheses after the function name that it was essential. Now we hit run and the council logs Hello world. So there you are. You have now written your very first javascript function. You don't understand how exciting that is because you are going to be writing a whole lot more with a whole lot more complex pieces of code inside. Mhm Alright, so functions can take parameters that you can pass them in the parentheses but parameters aren't required. So parameters act as placeholders for values. You want to pass to your function later. Let's go ahead and do an example of that. So I'm gonna see these parentheses, let's go ahead and let's just do a brand new function. So you get used to it. So again you want to uh write a function, let's declare that you're writing a function. Let's say let's do it. We'll name this function addition, we'll have the parentheses here. But instead of just moving on, we're going to pass parameters to it. So let's do mhm number one as our first parameter and them to as our second parameter and then you will do the curly braces and then it's due and so it will console log. Just make sure I'm not getting too ahead of myself. Yeah, that was just fine. So we will do this with uh with some math with some arithmetic. So right here these are the parameters number one and number two. So these can be placeholder code that you want to uh that you put here for now. And then when you call upon the function later you'll sub these in for the pieces of code that you really want. It sounds a little confusing now but it's gonna make more sense once I show you how that works. So well do console log right now. So we'll do number one plus number two. So this council log is going to add these two parameters together. And so this is where the parameters really can play. So now we're going to call on our function again, addition the parentheses and now we're going to pass it those parameters we want to add because that's what this function does it add these two numbers together. So you will do let's do four and six. This function is going to add foreign sex together because that's what we've asked it to do And that gives us 10. She hit run counselors out 10, that is the answer we do 94 Give us 100 because at that time that works perfect. So you have now worked with parameters in your function? Yes, So again those parameters will act as placeholders for values. You'll want to pass to your function later. Now let's talk about the return statement. If you want your function to output something, that's what return is for because I have been using the console log inside the function for right now just so we have has somewhere to go. But let's let's change that a little bit. Okay because in the real world when you are writing code that's paired with other files and you've got logic, it's not not going to go to the console, it is going to go to a web page, it is going to execute some logic. So like when you click a button, text that's written inside of a form will get sent somewhere. So that is what the return statement will help us do let's say here. Well right out. So we'll use our previous function that we were working with. So function addition number one. Them too. The council will be the right return number one plus 12. So it'll work similarly. So if we call upon it later. So right now we are going to uh we put it inside of a council log because that is where that is doing because we have this to an output right now. Until we get deeper into a learning more about javascript. So we'll console log addition. Let's do it seven and 10. That's the premise is there. So now if I hit run is going to give us that some because it has now returned that instead of just council logging it. So return is going to be very important. So if you don't have your function output anything, the result will be undefined. So let's get rid of this return right here, hit run. It's undefined because it's it's not returning anything and we'll just put that back in and voila, it works again. So the return statement means your function can include lots of logic and code but only returned. Would he specifically asked to? It's an example of that. So let's say for some reason that we want we want to add this arithmetic inside of a variable. So we'll name it will be consecrated with constant call. It sum equals number one plus number two. And then you can just return with some of that and then that will work similarly. Let's let's change up these numbers a little bit. Okay, Alright. And then hit run. That works the same. This is just a small example, but later on you might you might be declaring lots of variables inside having different logic and then only returning the result to some of that. So this is just a small, small example to illustrate that. All right. And then that is it for your very first lesson with functions. There's a lot more to get into. There's a lot more things we'll be doing with functions, um including a different way to declare them. That is what a lot of people do and what I like to do. Um So we will get into that in the next lesson. All right. See you guys and I hope you're ready to a rewrite your brains and change the way you think about problem solving, because that is what javascript computer programming will do for us. All right, See you guys in the next one.