JavaScript for Beginners #6 - Introduction to Functions

Key Takeaways

hello everybody and welcome back to a JavaScript tutorial so in today's video what we're gonna talk about is functions now we're not gonna get into too much detail with functions as I'm gonna leave that till the next video but what I want to do is illustrate to you how a function works on a very fundamental level using a basic example where we have two buttons a button that says green and a button that says red and when we press the green button this text heater will actually change to be green and when we press the red button and this text here will actually change to be red now how do we do that right so how do we make it when we press a button that we actually can change elements on the page well that's where functions come in now what is a function well you can think of the definition of a function as a kind of piece of code or a block of code that does something it might you know change some piece of information on the screen it might take in a value and return to a some value you can think about in mathematics when we have functions like f of X equals 5x something like that right that function takes a value of X and returns to us a value of y you can think of that is similar idea with programming functions except they're capable of doing much more than just mathematical computations now something to remember when we think about functions is that a function should do one thing and it should do that one thing very well so whenever you're designing functions just try to keep in mind and think about what is your function doing is that doing one thing or is it doing many things and when I say one thing I don't really mean you know one line of code I mean one overall operation one overall function of your code is what it's performing it's not you know messing around and doing a hundred different things inside of it okay so how do we create a function well to do it is actually pretty straightforward we're gonna type the word function we're gonna type a name in this case I'm actually gonna do a basic example before we get into the other one called add and then we're gonna put curly braces to denote where our function actually is so what I've done here is said we're gonna define a function called add and anything that goes inside of these curly braces is what's gonna be inside of our function now to give you a really basic example what I'm gonna do is just console dot log and like this and I'm going to call I function by doing this now I know you guys have no idea what's going on right now if you've never seen functions before but let me break it down for exactly what's happening here this is our function block right so this is the name of our function at this block of code or any blocks of code for that matter that go inside of these curly braces will only happen when the function is run so the function has to be run we have to call the function and then whatever's inside of it will happen so here this is what we call our function call and to call a function is really easy all you do is type the name of it and then put two brackets at the end to say that you're calling it so this is our function call and essentially what's gonna happen is one we're reading through our code as soon as we hit this block we're gonna actually call this add function which means anything inside of here is gonna run so let me illustrate that to you by just simply running and refreshing this page let me go to actually inspect element here and you can see if we go to I gotta find where is this here console we get ad printed out to the screen when I called ad and the great thing about functions that we can call them a bunch of times so let's do this and you can see that now we have four ads popping up on the screen so hopefully this is giving you an idea of why we might use them because say I wanted to print a sequence of I don't know add one two three like that well rather than you know having to do this so I want to do this exact sequence of ads a hundred times rather than having to write 300 lines of code what I would do is simply call add as many times that I want that to happen right so if i refresh this now you can see we're getting all these popping up and that is you know the basics of functions and why we use them so that we can reuse our code so if you ever realize that you're writing very similar lines of code multiple times maybe you just want to add them into a function and then you can just call that line of code once with one statement rather than writing it a bunch of times okay so let's go into a little bit more of a more advanced example here with add and I'm gonna show you something called parameters and something called return statements so what I'm gonna do is I'm gonna put two parameters in here I'm gonna call them a and B and these are called parameters now what these kind of stand for is the information that I need to has to my function so this is the information that my function needs to be able to work to be able to perform some computation now in this instance a and B are going to actually be two numbers that I'm going to add together and what my function is going to do is take those two numbers a and the other number B add them together and return the result to wherever my function was being called now this might seem a bit confusing but the examples are hopefully gonna clear this up for you so what I'm actually gonna do in here is write a return statement now a return statement is different from logging something I'm not printing something to the console I'm returning a value and the value I'm gonna return is a plus B now I know everyone's confused well we'll get through this what I'm gonna do is create a variable here I'm gonna call it x and I'm gonna set it equal to add and here I'm going to do five five now we all know what five plus five is we know that values 10 so what's actually happening here is when I call add I'm going to pass for the value a the number five I'm gonna pass for the number B or for the parameter B the value five now what these are called our arguments so these are parameters and these are arguments and you can obviously you know I can pass different arguments to them I could say VAR y equals 5 plus 7 right I can do any numbers I want and this is the point of this is that it can take any two numbers and return to me the addition of those numbers so let's simply log out these values I'm going to show you kind of how this works so console dot log we have X and we have Y so what's happening is when we save our x equals add five five what's gonna happen is we're going to pass our values and then we're going to return the addition of those values what this return is gonna do is essentially say this line here that we've said add five five is going to be equal to whatever this return statement returns which in this instance is 10 which means that X should be equal to the value 10 I notice might be confusing but let's run this and see what we get we get 10 and we get 12 so what happened was we passed our values you know something happened this gets replaced with whatever was returned from that function so which is 10 this one is getting replaced with 12 and we can print those two values out and say you know this is 10 this is 12 those are answers and we're storing them in variable X and variable Y that being said though I don't need to store them in a variable and sometimes I don't want to store the value I just want to you know use the value so what I can do is actually do something like you know 234 and like negative 98 maybe let's pass that in here and I can log the result of that addition so here you know we get our value 136 I'm not storing it in any value but I can still show it because what happens is when I call this the return statement is gonna whatever it returns will replace this line and then you know we can demonstrate that and show that on the screen okay so I think that is the basics I've shown so far that you know we can have a function that has parameters we can have a function that doesn't have parameters we can have one that has a return and we can have one that doesn't have a return what about a function that has parameters but doesn't have a return statement well that's more than fine I could do something like console dot log a plus B and then if now if I call my add function and I do five five watch what's gonna happen so we're gonna print the value ten why does this work well same thing before we have our parameters and B what we've done is we've called add notice we're not printing anything down here but what happens is inside of the function we print the addition so obviously that's gonna work fine and you know that is how this works okay but now how about some of the more cooler parts of functions and I want to get into and then finish in the rest of the video how do we call a function from our HTML I want to press this button and I want to call a function how do I do that well let me show you so what I'm going to do is actually create a new function and I'm gonna call this function red and all I'm gonna do right now is simply say console dot log red now inside of my button tag what I can actually do is set function that I want to trigger when this button is pressed and to do that I simply say unclick equals and in this case red now what this is defining is essentially when I click the button I want to call the function which is called rent which obviously is right here so let's see this and see if this works give this a refresh when I click red you see that red is printing out to the screen and notice you know obviously it's keeping track of however many times I pressed it just to tell you that same output showing up and that is as easy as that is to do if you want to call a function from your JavaScript you literally just put it in quotation marks whatever the name is inside of HTML sorry and it will call that function now let's do the same thing for blue or green or whatever I had okay so let's call this green and let's do console don't log green and I keep forgetting my semicolons but I guess I don't even need them anyways but I just like to add them so let's do on click equals green okay so let's run this now refresh green red green red green green green green green red red red see and that is exactly how this works and that is I mean pretty cool in my opinion now what you guys can do is have buttons and when you press them you can trigger some JavaScript which is just the start of the really cool things we're gonna be able to do later in this series now what I said though was I don't want to just console that log actually want to change you know this element I want to change hello well we actually we know how to do that right we know how to change maybe not the color right now if you haven't seen that command but we don't have changed the value of our h1 tab so how do we do that well let's do one in here document dot get element if I could type properly by ID don't know what's going on my keyboard here let's do header as our ID and then we're gonna do what is it dot inner HTML equals what should we do let's actually just make this red for now great now let's do the same thing I'm gonna copy this to save us the pain of typing that again and let's put in green so I haven't changed the color yet what I'm actually going to be doing now is changing the value of this header tag to be either red or green when I press one of these buttons so let's see if this works or if I mess something up let's refresh when I click red you see it changes to red and when I hit green it changes to green and that is you know as easy as it is to do this now what if we want to change to becoming I'm gonna give this a shot because I always forget how to do this but I think it's something like thought style dot color and I'm pretty sure this will actually change our color to be either green or red although I don't really know but we'll get a shot okay so let's run this fresh when I press this oh there we go our colors changing from red it's agreed so to do that what I did was dot style dot color and change that to lowercase red and a lowercase green so that is our basics of functions I know I've gone through a lot here I'm gonna continue with functions and we're gonna continue to see them as we go through this series so you guys should continue to understand them but if you have any questions as always leave them down below I think personally this is my favorite part of the series so far in terms we can actually manipulate things on our page and you know we're changing colors we're triggering events from our JavaScript it's just it's cool and we're getting into some much more interesting things so with that being said if he hasn't drew it makes you leave a like subscribe to the channel down below and as always I will see you in another video