The 10 Days of JavaScript: Day 2 (Functions)

[Music] hello everyone welcome back to the ten days of JavaScript here we are and day number two and in this lesson we're going to learn about functions so we will answer the question what is a function however before we get to that let's first talk about where we are going to type our code in this lesson so in our previous lesson we learned how to open up the web browsers console right so remember you can right click on a web page choose inspect and that opens up your developer tools and then you just look for the tab or button that's named console okay and remember in the previous lesson we learned how to type down here two plus two press enter we see for now the console is great for experimenting and typing out these single lines of code and then pressing enter but in the real world you're going to want to write multiple lines of code at once meaning when you push enter you don't want the computer to execute or run your code right away so almost like a word processing document with multiple sentences and paragraphs we want to be able to write out multiple lines of JavaScript code and then have the computer run everything that we just typed now the easiest way to get started practicing this is actually not the console but instead a website named code pen and right now I want you to follow along with me so you can either Google for code pen or you can just visit the address which is code pen dot IO so right now this very minute I want you to pause this lesson if you need to while you go open code pen in a new tab so you can follow along in my opinion code pen is the easiest way to get started actually writing code it's free to use and if you do not want to you don't even have to create or sign up for an account you can literally just come to this website and click the Create button that should be somewhere towards the top right and then from this menu that appears choose the new pen option so create new pen okay so what's going on now what is this screen well each pen that we create is like an empty canvas or a playground or play pen or an experiment where we can code so we see that there are three columns the first is HTML and then CSS and then j/s or JavaScript now this is a course that is focused on JavaScript so we are not going to worry too much about these first two columns but the big picture idea is that these are the three languages that web pages are created with and how code pen works is that as you type in a column let me shrink this you can actually see as you type in a column so in the HTML column if I say hello there as soon as I stop typing for a second a preview is shown to me down here of what my code creates perfect except this is not a course on HTML we want to learn about JavaScript so just to make it really easy to focus on javascript for right now why don't we hide the HTML and CSS columns so to do that all I did was drag on the border right this vertical line right between CSS and JavaScript hover over that and then click and drag to the left so that way the JavaScript column takes up most of our screen right because that's the language that we want to practice cool now you do not need to do that it just gives you more room as we're going to be typing in this column so we now have a perfect environment to start practicing because in this JavaScript column we can now type out multiple lines and keep pressing enter and each time we type a bit of new code the computer is going to execute everything that we wrote all at once together just like an actual real-world computer program okay now having said all of that let's get back to the actual goal of this particular lesson right and that is the topic of functions so what in the world is a function well I like to think of functions as action words so if we were comparing JavaScript to a language like English or Spanish a function would be a verb so for example if our pet dog was a computer that spoke JavaScript we could say run or jump or sit so you simply type out the name of the action or the name of the function and then you include a pair of parenthesis however let's be realistic our web browser is not a dog so it can't run jump or sit but it can do web browser ish things so for example let's delete these three lines of code and we can create an annoying pop-up by calling the browser's alert function so alert and then parenthesis and we can see this pop-up appears so this is how you can alert the visitor of the site with a message right so if you really want to get their attention you can include a custom message right about here so let's go ahead and click the button to dismiss the alert pop-up and within the parentheses for this alert we can include quotes and then say hey and here we can see in the new pop-up there is our custom message cool let's go ahead and close or dismiss this pop-up so the idea is that within the parentheses you can pass along a bit of data to the function and it's up to the function as to how it uses that data so back to the dog example right if our dog spoke JavaScript we could say jump and maybe first we want to tell the dog to jump I but then we could also tell the dog to jump again and maybe this time jump low so to review you can call a function simply by including the word and then parentheses and then inside the parentheses we can pass along a bit of data the technical name for a piece of data that we pass along is an argument so all together we are calling or executing the browsers alert function and we are passing it an argument of hey okay so the browser has these different action words or functions like alert that we can call but we are not limited to only those functions because just like you can teach a dog a new trick we can also teach our JavaScript environment new tricks by creating our own brand-new functions so for example let's get rid of this line and if I type out greet and then parenthesis the web browser does not know what this means the browser does not have a function named greet so when I say greet and then parenthesis this would be like telling a dog to bake a cake it's not gonna know what you mean and it's just gonna look at you funny however as a programmer we can create our own brand new function named greet and we simply explain what that action or function should do and then it will be added to the browser's vocabulary and we can use or call it just like we would alert or any of the built-in functions so the question becomes how do we create a function right we've learned how to call or execute or run a function right this is how you su a command you simply type the name of the function and then parenthesis but how do you actually create the recipe or the instructions or the logic for the function well let me show you so let's start fresh and we begin by typing the word function and then a space and then we get to make up whatever name we want for our new function the name does not matter you could call it pizza or unicorn but in this case I'm going to name it grete then we include a pair of parentheses and then after the parentheses we include a pair of curly brackets if you're not familiar with these characters you can create them by holding the shift key and then pressing the key directly to the right of the P key okay and now you don't have to do this but in between the two curly brackets I like to push Enter or return and drop down to a new line like this just for visual clarity okay but in between the curly brackets where my cursor is blinking right now this is what is referred to as the body of the function and this is where we are free to do just about anything so this is where we explain what the function should actually do so just as a quick test let's set things up so that when you call or run the greet function an alert pop-up should appear that says hello my name is and then whatever your name is so inside the curly brackets let's call the alert function and say hello my name is and then you could put your name instead of my name all right and now you might be wondering why an alert popup message is not appearing right away and it's because all we've done here is described the function or define the function right so this is the recipe for our new greet action and now if we want it to actually happen if we want to tell the browser to actually perform the greet function maybe down here we could just say greet and then parentheses right that's how you call a function and there we can see the pop-up appears hello my name is Brad and if we called the function again we could call it again greet second time it should appear twice so here it is once I click OK there it is the second time perfect so we just taught the browser a new trick a new action or we should say a new function now before we move on let's improve our function because it would be nice if it was flexible let me explain what I mean by that so follow along with let's delete these two function calls for greet and remember when I used the example that a dog can jump but you could also tell it to jump high or to jump low and we learned that the data you pass within the parentheses is referred to as an argument right and it's up to the function to perhaps use that data in some way well wouldn't it be cool if our greet function was flexible and when you called it you could pass in a name instead of hard-coding the name right here so for example wouldn't it be neat if we could say greet and pass it a value of John and then it would say hello my name is John and then you could call it again and say greet with a value of Jane right and then it would say hello my name is Jane so let me show you how we can set that up I'm going to go ahead and delete these two function calls so code pen doesn't drive me insane and keep showing those pop-ups after every keystroke okay so back to the task at hand how can we make this function flexible well it starts with these parentheses right after the name of our function within these parentheses let's type the letter X I'm just making that up because it's easy to type but you could also say the name or pizza or unicorn or anything so by including this here we have created a parameter named X and we can use this parameter within the body of the function let me show you what that means so down here where we would actually run or call the function I'm going to place a slash slash right in front of it to comment it out I'm only doing this so code pen doesn't try to show the pop-up after every couple of keystrokes but the idea is within the parentheses for our function when we call it if we include quotes and a name so greet John this data that we're passing along John we want to be able to access that within our function within the body of our function so by including X here as a parameter X is going to equal the value of whatever gets passed in so in this case it would be John so now within the body of function we can use that so type this out with me let's get rid of your name here so just have hello my name is space and then the quote and then let's say plus X and then let's also add on quotes and a closing period to close out the sentence so now down here if we've removed the two forward slashes the browser or code pen will know it's actually run or executed again and here we see hello my name is John and again we don't need to use X as the parameter so up in our function definition within these parentheses we could say the name and then within the body of our function we would just say instead of X the name and it works just the same okay so it's a review down here we are calling our greet function we are passing it in arguments of John and then within our function definition we've included a matching parameter named the name that's going to temporarily store that value and then we can use it however we want so down here we could call the greet function again and say greet and pass it a value of jane so when our code runs we see the first one for John click OK there's the one for Jane perfect now before we move on I want to show you that you can pass along multiple arguments when you call a function let me show you what I mean but first let's comment out these two lines with slash slash just so code pen doesn't drive us insane with the alerts each time we modify the function okay and let's assume that we want to change our greet function to now include the person's favorite color so hello my name is blank and then let's say plus pair of quotes space and my favorite color is space and then let's plus fav color and then add in the quotes for the closing period okay and then how would we use this well down in the function calls when we say greet and give it a value of John after the quotes we can just say comma and pass along a second argument so let's say John's favorite color is blue and then with Jane after her quotes comma and let's say her favorite color is green now if we're including two arguments when we call the function we want to be sure that we include two parameters up in the function definition so the first thing that gets passed in is done name and then up here we could say comma fav color right because that's the name that I chose right here so as soon as I remove these forward slashes to uncomment out our code we see hello my name is John my favorite color is blue and hello my name is Jane and my favorite color is green perfect now practice makes perfect so before we bring this lesson to a close I want to write one more function with you so first I'm going to comment out these two lines so code pen doesn't keep showing me those pop-ups okay and right below that down here let's create a function named triple me or you could do double me or quadruple me but let's set up a function so that when you pass it a number maybe it triples that number so imagine we could say triple me and then as the argument just give it a number of five and we would expect this function to return a value of 15 so let's walk through this so first we create the function definition or the recipe for the function so let's say function space and then the name you can make one up I'm calling it triple me and then parenthesis and then after the parenthesis curly brackets okay now within the parentheses right after triple me let's include X as a parameter and now we can use that within the body of the function now I do want to let you know that within the body of our function we do not need to call a browser function like alert instead actually a function in its purest form simply return a value so let's say return and then what do we want to return well the function is named triple me so why don't we just say three and then asterisk for multiplication and then whatever number is getting passed in through the argument and parameter right in this case I chose X okay and then let's test this function out so down here let's create a variable that stores a number so let's say let my favorite number equal and then let's use our function let's say triple me right we're calling or executing the function and let's pass it a value of 12 okay and then finally we want to test things to make sure that it's actually working so finally let's just alert out the value of my favorite number just so we can see it with our own two eyes so finally we can say alert my favorite number perfect and there we see 36 right if you triple 12 you get 36 I know I moved a lot faster for this second example of triple meet but I just wanted to give you something to experiment with and if you need to re-watch this part a couple of times that's okay if everything in this lesson was not crystal clear and you're still a bit confused that's okay all you really need to have remembered from this lesson is that there are functions you can create a function by saying function jump this creates the recipe or the definition for that function and then you are free to run or call that function wherever you want however many times you want and then of course we learned that you can pass it data inside the parentheses if this concept is even a little bit familiar to you if it's making even just a little bit of sense then you're doing great you're right on track and you're ready to move on to the next lesson so we just cover functions up next objects so what in the world is an object let's keep our momentum rolling let's answer that question and I will see you in the next lesson the ten days of javascript is the first chapter from my upcoming premium course full stack javascript from scratch I'm making these first 10 or 11 videos freely available on YouTube and so for the next 10 days I'm going to upload one new video each day so stay tuned or if you're watching this in the future all the lessons are up so feel free to binge watch the full premium course is not available just yet but if you subscribe to this channel you'll be notified as soon as it's out or you're watching this video in the future it's already available enjoy [Music]

Channel: LearnWebCode

Views: 50,059

Rating: 4.9779181 out of 5

Keywords: javascript, functions, function, tutorial, beginner, learn, programming

Id: bYshPb-wEWs

Length: 20min 44sec (1244 seconds)

Published: Wed Oct 31 2018