0 1 00:00:00,600 --> 00:00:05,910 All right guys. In this lesson and some of the coming lessons we're going to be learning a really really 1 2 00:00:05,910 --> 00:00:13,830 crucial aspect of all programming languages, and that is how do you create functions. Now in order to 2 3 00:00:13,830 --> 00:00:15,330 explain function, 3 4 00:00:15,330 --> 00:00:22,960 you'll have to imagine that, let's say that I am a little house robot and my name is Angela. 4 5 00:00:23,460 --> 00:00:26,270 I know I told you previously that I'm actually a real human being, 5 6 00:00:26,270 --> 00:00:30,270 but let's just consider for a moment that I'm a robot, 6 7 00:00:30,270 --> 00:00:37,980 and I work in your house. And all you have to do in order to command me is to give me instructions in 7 8 00:00:37,980 --> 00:00:38,680 code. 8 9 00:00:38,700 --> 00:00:45,390 So for example you could tell me to leave the house using alert ("leaveHouse"), and then you can tell me 9 10 00:00:45,390 --> 00:00:49,460 to take two steps to the right by repeating the instruction 10 11 00:00:49,480 --> 00:00:50,240 moveRight. 11 12 00:00:50,310 --> 00:00:54,860 And then you could say move up four steps and move right two steps. 12 13 00:00:54,900 --> 00:01:01,650 And this set of instructions takes me to the store. And at the store you'll ask me to buy you some milk. 13 14 00:01:01,920 --> 00:01:04,510 And then you repeat the instructions to me backwards. 14 15 00:01:04,860 --> 00:01:06,410 And that takes me home. 15 16 00:01:06,480 --> 00:01:08,350 And here is your bottle of milk. 16 17 00:01:08,370 --> 00:01:15,120 Now if you wanted a bottle of milk every day you would have to write out all of this code repeatedly 17 18 00:01:15,210 --> 00:01:21,040 every single time you wanted the little house robot to go and buy you some milk. 18 19 00:01:21,350 --> 00:01:23,100 Now that's kind of tiring. 19 20 00:01:23,130 --> 00:01:28,320 And, you know, at some point your fingers are going to start hurting from writing all of this repeated 20 21 00:01:28,320 --> 00:01:28,770 code, 21 22 00:01:28,770 --> 00:01:29,410 right? 22 23 00:01:29,430 --> 00:01:31,540 So what can you do instead? 23 24 00:01:31,650 --> 00:01:37,680 Well, what if you took this series of instructions that together send the little robot to the store, buys 24 25 00:01:37,680 --> 00:01:39,330 your milk and brings it back. 25 26 00:01:39,330 --> 00:01:46,340 What if you packaged it into a single package of code and you gave it a name? 26 27 00:01:46,470 --> 00:01:49,380 Well, this is exactly what functions are. 27 28 00:01:49,590 --> 00:01:57,480 They allow you to create a series of instructions, package it into a block of code, and remember the packaging 28 29 00:01:57,480 --> 00:01:59,310 is done by these curly braces, 29 30 00:01:59,430 --> 00:02:05,880 the opening curly brace specifying where the series of instructions begins and the closing curly brace 30 31 00:02:05,880 --> 00:02:13,050 specifying where that ends, and everything in between is the block of code that will get executed when 31 32 00:02:13,110 --> 00:02:15,150 you call this function. 32 33 00:02:15,390 --> 00:02:18,270 And you also get to give this function a name. 33 34 00:02:18,270 --> 00:02:23,790 For example in this case it's called getMilk. And this is essentially the structure of how you would 34 35 00:02:23,790 --> 00:02:26,450 create this function for getting milk. 35 36 00:02:26,670 --> 00:02:32,550 You first start off with a keyword called function that tells the computer that you are constructing, 36 37 00:02:32,640 --> 00:02:34,750 that you are creating a new function. 37 38 00:02:34,980 --> 00:02:41,100 You give the function a name. You have a set of parentheses or round brackets. And then you have some 38 39 00:02:41,100 --> 00:02:46,640 curly brackets that enclose all of the instructions that you want to be executed. 39 40 00:02:46,830 --> 00:02:54,030 Now, once you have created that function, getting the robot to buy you milk is as simple as calling the 40 41 00:02:54,030 --> 00:03:00,780 function getMilk, and it will carry out all of those instructions that are enclosed in that function 41 42 00:03:01,200 --> 00:03:03,740 and it will know what it needs to do. 42 43 00:03:03,750 --> 00:03:08,430 That saves you a lot of typing and that saves you a lot of repetition as well, 43 44 00:03:08,580 --> 00:03:10,230 keeping our code dry, 44 45 00:03:10,230 --> 00:03:13,900 remember? Now this is the structure of a variable. 45 46 00:03:13,910 --> 00:03:17,190 We use the var keyword to create a new container. 46 47 00:03:17,400 --> 00:03:22,620 The container gets a name and then finally we get to put something inside the container. 47 48 00:03:22,740 --> 00:03:24,780 Well, functions work quite similarly. 48 49 00:03:25,020 --> 00:03:30,660 We use the function keyword to say that we're creating a new function and then we get to give the function 49 50 00:03:30,750 --> 00:03:34,380 a name to identify that block of instructions. 50 51 00:03:34,440 --> 00:03:40,260 And finally we get to put in all the instructions that we want to be carried out whenever we call the 51 52 00:03:40,260 --> 00:03:46,410 function getMilk. And when we do call the function getMilk, then all of the instructions inside that 52 53 00:03:46,410 --> 00:03:49,560 function will get taken out and executed. 53 54 00:03:49,560 --> 00:03:55,710 Now the really important thing is to know that there is a difference between when you create the function, 54 55 00:03:56,010 --> 00:03:58,790 because this is when you have the function keyword, 55 56 00:03:58,800 --> 00:04:05,240 this is where you give it a name and where you have the curly braces that determine what functionality 56 57 00:04:05,250 --> 00:04:07,740 essentially this function is going to perform. 57 58 00:04:07,860 --> 00:04:15,120 But when you want to use the function, in programming we say calling the function, when you call getMilk, 58 59 00:04:15,240 --> 00:04:18,820 then all you have to write is the name of the function, 59 60 00:04:18,900 --> 00:04:23,720 some parentheses, and you end the line with a semicolon. 60 61 00:04:23,760 --> 00:04:25,600 And this is a command. 61 62 00:04:25,740 --> 00:04:32,550 And once you do this, the computer will look to find where this function was created and it will carry 62 63 00:04:32,550 --> 00:04:36,030 out all the instructions inside the curly braces. 63 64 00:04:36,120 --> 00:04:41,640 If you head over to Chrome and you open up the Developer Tools, and we're going to go into the Sources 64 65 00:04:41,640 --> 00:04:47,470 tab over here, and we're going to write some code in our index.js. 65 66 00:04:47,520 --> 00:04:54,300 Now, I've copied over all those commands that we had for our little robot, which involves a whole bunch 66 67 00:04:54,300 --> 00:04:56,340 of alerts telling it what to do 67 68 00:04:56,460 --> 00:04:57,720 every step of the way. 68 69 00:04:57,720 --> 00:05:04,720 Now, if you told me, Angela the person, go and get some milk, I already know how to, for example, put on my shoes, 69 70 00:05:04,720 --> 00:05:10,750 how to open the door, how to go outside, and, you know, if I already know where the store is then I can 70 71 00:05:10,750 --> 00:05:12,720 just go and buy the milk and come back. 71 72 00:05:12,940 --> 00:05:18,940 But with a robot, as with a computer or a browser, it doesn't know anything that you haven't told it to 72 73 00:05:18,940 --> 00:05:19,450 do. 73 74 00:05:19,630 --> 00:05:25,210 So we have to give it detailed step by step instructions in order for it to carry out what we want it to 74 75 00:05:25,210 --> 00:05:25,830 do. 75 76 00:05:26,140 --> 00:05:29,410 So in this case we have a whole bunch of alerts. 76 77 00:05:29,550 --> 00:05:34,960 And if I run this code right now then you can see that we're going to get a whole bunch of alerts that 77 78 00:05:34,960 --> 00:05:37,740 tells our little robot what to do 78 79 00:05:37,960 --> 00:05:45,700 every step of the way. Now every single time we want a bottle of milk we're going to have to write all 79 80 00:05:45,700 --> 00:05:46,720 of this code out. 80 81 00:05:46,750 --> 00:05:53,410 So, let's say if we open up a new tab and, you know, it's a new day, we need a new bottle of milk, then we're 81 82 00:05:53,410 --> 00:05:57,120 going to have to write out all of that code all over again. 82 83 00:05:57,250 --> 00:05:58,770 And it's kind of painful, 83 84 00:05:58,780 --> 00:05:59,340 right? 84 85 00:05:59,620 --> 00:06:06,760 So what we learned previously is that we can package this into a function by simply creating it as one. 85 86 00:06:07,000 --> 00:06:12,940 So we can do that by writing the function keyword and then we give the function a name, so we can call 86 87 00:06:12,940 --> 00:06:14,070 it getMilk. 87 88 00:06:14,230 --> 00:06:20,440 And remember we're still using camel casing whenever we're naming functions or variables, and all of 88 89 00:06:20,440 --> 00:06:24,210 the rules that apply to naming variables apply to naming functions. 89 90 00:06:24,370 --> 00:06:27,370 So, for example, you can't say 1getMilk. 90 91 00:06:27,400 --> 00:06:30,250 You can't start your function name with a number. 91 92 00:06:30,280 --> 00:06:31,810 So if you can't remember, 92 93 00:06:31,810 --> 00:06:37,030 take a look back at all the rules around how you can name variable names. 93 94 00:06:37,270 --> 00:06:43,420 So, now that our function has a name, we're going to give it a set of empty parentheses, and we're going to 94 95 00:06:43,420 --> 00:06:47,060 explain this a little bit later on when we fill out those parentheses. 95 96 00:06:47,110 --> 00:06:53,230 But for now, in our simplest type of function, we're just going to use the keyword function, give it a name, 96 97 00:06:53,530 --> 00:06:55,210 an empty set of parentheses, 97 98 00:06:55,240 --> 00:07:03,280 and finally we're going to use some curly braces to determine what is going to happen when we call this 98 99 00:07:03,280 --> 00:07:04,260 function. 99 100 00:07:04,300 --> 00:07:11,550 So all the code that's in between the set of curly braces is going to be executed when I call this function 100 101 00:07:11,560 --> 00:07:12,290 getMilk. 101 102 00:07:12,610 --> 00:07:21,530 So that means we want these curly braces to enclose all of our alerts, to look like this. 102 103 00:07:22,480 --> 00:07:29,500 Now, in terms of style, when you're creating a function, it's good practice to make all of the instructions 103 104 00:07:29,560 --> 00:07:35,620 that are contained inside the function, and by inside I mean inside the curly braces, to make all of those 104 105 00:07:35,620 --> 00:07:42,900 lines of code indented slightly, so you can tell at a glance these are sort of the children code, 105 106 00:07:43,000 --> 00:07:45,280 and this is the enclosing parent. 106 107 00:07:45,280 --> 00:07:53,050 So the other thing is that, the other thing that you'll notice, is that your closing curly brace does 107 108 00:07:53,050 --> 00:07:53,580 not 108 109 00:07:53,710 --> 00:07:55,970 end with a closing semi-colon. 109 110 00:07:55,990 --> 00:07:59,050 So this is how Javascript functions should look like. 110 111 00:07:59,060 --> 00:08:01,930 Now let's go ahead and run this code. 111 112 00:08:01,930 --> 00:08:05,860 So in order to execute everything that's inside this function getMilk, 112 113 00:08:06,100 --> 00:08:07,510 all I have to do is write 113 114 00:08:07,510 --> 00:08:10,150 getMilk, some empty parentheses, 114 115 00:08:10,240 --> 00:08:11,980 and finally a semi-colon. 115 116 00:08:11,980 --> 00:08:14,710 Now you'll notice I'm not writing the function keyword, 116 117 00:08:14,860 --> 00:08:21,490 I don't have any curly brackets, because this is the part where I'm telling the computer to find a function 117 118 00:08:21,490 --> 00:08:26,810 called getMilk and run all of the instructions that are contained inside it. 118 119 00:08:27,220 --> 00:08:34,570 So now if I hit run then you can see that it's going to execute all of these functions that are inside 119 120 00:08:34,570 --> 00:08:35,310 getMilk. 120 121 00:08:35,440 --> 00:08:42,400 Now if you don't want to have to keep clicking OK every single time you test your function, then you 121 122 00:08:42,400 --> 00:08:47,030 can change the alert to something called a console log. 122 123 00:08:47,190 --> 00:08:52,100 And we can do that easily by hitting command F on Mac or control F on Windows, 123 124 00:08:52,210 --> 00:08:55,240 and this allows you to find the word 'alert'. 124 125 00:08:55,330 --> 00:08:59,770 Now, when you click on this A to B, it allows you to replace it with something else. 125 126 00:08:59,920 --> 00:09:03,520 And we're going to replace it with console.log. 126 127 00:09:03,700 --> 00:09:06,070 And then we're going to hit Replace all. 127 128 00:09:06,070 --> 00:09:12,890 And what this does is that it changes all the places where we had 'alert' to 'console.log'. 128 129 00:09:13,030 --> 00:09:20,650 Now what this does is that it will log the string that's contained inside here inside the console. 129 130 00:09:20,650 --> 00:09:27,520 So now if I run this code, which will update our function to use console.log, and then it will call the 130 131 00:09:27,520 --> 00:09:30,220 function for it to be all executed. 131 132 00:09:30,220 --> 00:09:34,960 Then you'll see that instead of having a bunch of alerts which we have to click through, we get all of 132 133 00:09:34,960 --> 00:09:39,190 those instructions to the robot displayed in the console. 133 134 00:09:39,190 --> 00:09:45,490 Now the important difference between the console log and the alert is that the alert is something that 134 135 00:09:45,490 --> 00:09:47,060 the user can see. 135 136 00:09:47,230 --> 00:09:53,830 So if you had an alert on your web site, then any visitor will be able to see the alert, but the console 136 137 00:09:53,830 --> 00:09:56,520 logs are only for the developer. 137 138 00:09:56,530 --> 00:10:01,060 They only show up in the console, which is not intended for the user. 138 139 00:10:01,240 --> 00:10:09,190 It's meant for the developer to debug your code, to find out if there were any problems, and to essentially 139 140 00:10:09,190 --> 00:10:12,880 print out parts of the code into the console. 140 141 00:10:12,880 --> 00:10:17,280 And we're going to use this more and more as we create more and more complex web sites. 141 142 00:10:17,320 --> 00:10:23,440 But you can see that our function is still doing the same thing. It has a set of curly brackets which 142 143 00:10:23,440 --> 00:10:29,950 define what needs to happen, and when we call the function getMilk, then it searches for the function 143 144 00:10:29,950 --> 00:10:35,230 that has the same name and executes everything that's inside the curly braces.