WEBVTT 0 00:00.600 --> 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 00:05.910 --> 00:13.830 crucial aspect of all programming languages, and that is how do you create functions. Now in order to 2 00:13.830 --> 00:15.330 explain function, 3 00:15.330 --> 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 00:23.460 --> 00:26.270 I know I told you previously that I'm actually a real human being, 5 00:26.270 --> 00:30.270 but let's just consider for a moment that I'm a robot, 6 00:30.270 --> 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 00:37.980 --> 00:38.680 code. 8 00:38.700 --> 00:45.390 So for example you could tell me to leave the house using alert ("leaveHouse"), and then you can tell me 9 00:45.390 --> 00:49.460 to take two steps to the right by repeating the instruction 10 00:49.480 --> 00:50.240 moveRight. 11 00:50.310 --> 00:54.860 And then you could say move up four steps and move right two steps. 12 00:54.900 --> 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 01:01.920 --> 01:04.510 And then you repeat the instructions to me backwards. 14 01:04.860 --> 01:06.410 And that takes me home. 15 01:06.480 --> 01:08.350 And here is your bottle of milk. 16 01:08.370 --> 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 01:15.210 --> 01:21.040 every single time you wanted the little house robot to go and buy you some milk. 18 01:21.350 --> 01:23.100 Now that's kind of tiring. 19 01:23.130 --> 01:28.320 And, you know, at some point your fingers are going to start hurting from writing all of this repeated 20 01:28.320 --> 01:28.770 code, 21 01:28.770 --> 01:29.410 right? 22 01:29.430 --> 01:31.540 So what can you do instead? 23 01:31.650 --> 01:37.680 Well, what if you took this series of instructions that together send the little robot to the store, buys 24 01:37.680 --> 01:39.330 your milk and brings it back. 25 01:39.330 --> 01:46.340 What if you packaged it into a single package of code and you gave it a name? 26 01:46.470 --> 01:49.380 Well, this is exactly what functions are. 27 01:49.590 --> 01:57.480 They allow you to create a series of instructions, package it into a block of code, and remember the packaging 28 01:57.480 --> 01:59.310 is done by these curly braces, 29 01:59.430 --> 02:05.880 the opening curly brace specifying where the series of instructions begins and the closing curly brace 30 02:05.880 --> 02:13.050 specifying where that ends, and everything in between is the block of code that will get executed when 31 02:13.110 --> 02:15.150 you call this function. 32 02:15.390 --> 02:18.270 And you also get to give this function a name. 33 02:18.270 --> 02:23.790 For example in this case it's called getMilk. And this is essentially the structure of how you would 34 02:23.790 --> 02:26.450 create this function for getting milk. 35 02:26.670 --> 02:32.550 You first start off with a keyword called function that tells the computer that you are constructing, 36 02:32.640 --> 02:34.750 that you are creating a new function. 37 02:34.980 --> 02:41.100 You give the function a name. You have a set of parentheses or round brackets. And then you have some 38 02:41.100 --> 02:46.640 curly brackets that enclose all of the instructions that you want to be executed. 39 02:46.830 --> 02:54.030 Now, once you have created that function, getting the robot to buy you milk is as simple as calling the 40 02:54.030 --> 03:00.780 function getMilk, and it will carry out all of those instructions that are enclosed in that function 41 03:01.200 --> 03:03.740 and it will know what it needs to do. 42 03:03.750 --> 03:08.430 That saves you a lot of typing and that saves you a lot of repetition as well, 43 03:08.580 --> 03:10.230 keeping our code dry, 44 03:10.230 --> 03:13.900 remember? Now this is the structure of a variable. 45 03:13.910 --> 03:17.190 We use the var keyword to create a new container. 46 03:17.400 --> 03:22.620 The container gets a name and then finally we get to put something inside the container. 47 03:22.740 --> 03:24.780 Well, functions work quite similarly. 48 03:25.020 --> 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 03:30.750 --> 03:34.380 a name to identify that block of instructions. 50 03:34.440 --> 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 03:40.260 --> 03:46.410 function getMilk. And when we do call the function getMilk, then all of the instructions inside that 52 03:46.410 --> 03:49.560 function will get taken out and executed. 53 03:49.560 --> 03:55.710 Now the really important thing is to know that there is a difference between when you create the function, 54 03:56.010 --> 03:58.790 because this is when you have the function keyword, 55 03:58.800 --> 04:05.240 this is where you give it a name and where you have the curly braces that determine what functionality 56 04:05.250 --> 04:07.740 essentially this function is going to perform. 57 04:07.860 --> 04:15.120 But when you want to use the function, in programming we say calling the function, when you call getMilk, 58 04:15.240 --> 04:18.820 then all you have to write is the name of the function, 59 04:18.900 --> 04:23.720 some parentheses, and you end the line with a semicolon. 60 04:23.760 --> 04:25.600 And this is a command. 61 04:25.740 --> 04:32.550 And once you do this, the computer will look to find where this function was created and it will carry 62 04:32.550 --> 04:36.030 out all the instructions inside the curly braces. 63 04:36.120 --> 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 04:41.640 --> 04:47.470 tab over here, and we're going to write some code in our index.js. 65 04:47.520 --> 04:54.300 Now, I've copied over all those commands that we had for our little robot, which involves a whole bunch 66 04:54.300 --> 04:56.340 of alerts telling it what to do 67 04:56.460 --> 04:57.720 every step of the way. 68 04:57.720 --> 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 05:04.720 --> 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 05:10.750 --> 05:12.720 just go and buy the milk and come back. 71 05:12.940 --> 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 05:18.940 --> 05:19.450 do. 73 05:19.630 --> 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 05:25.210 --> 05:25.830 do. 75 05:26.140 --> 05:29.410 So in this case we have a whole bunch of alerts. 76 05:29.550 --> 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 05:34.960 --> 05:37.740 tells our little robot what to do 78 05:37.960 --> 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 05:45.700 --> 05:46.720 of this code out. 80 05:46.750 --> 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 05:53.410 --> 05:57.120 going to have to write out all of that code all over again. 82 05:57.250 --> 05:58.770 And it's kind of painful, 83 05:58.780 --> 05:59.340 right? 84 05:59.620 --> 06:06.760 So what we learned previously is that we can package this into a function by simply creating it as one. 85 06:07.000 --> 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 06:12.940 --> 06:14.070 it getMilk. 87 06:14.230 --> 06:20.440 And remember we're still using camel casing whenever we're naming functions or variables, and all of 88 06:20.440 --> 06:24.210 the rules that apply to naming variables apply to naming functions. 89 06:24.370 --> 06:27.370 So, for example, you can't say 1getMilk. 90 06:27.400 --> 06:30.250 You can't start your function name with a number. 91 06:30.280 --> 06:31.810 So if you can't remember, 92 06:31.810 --> 06:37.030 take a look back at all the rules around how you can name variable names. 93 06:37.270 --> 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 06:43.420 --> 06:47.060 explain this a little bit later on when we fill out those parentheses. 95 06:47.110 --> 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 06:53.530 --> 06:55.210 an empty set of parentheses, 97 06:55.240 --> 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 07:03.280 --> 07:04.260 function. 99 07:04.300 --> 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 07:11.560 --> 07:12.290 getMilk. 101 07:12.610 --> 07:21.530 So that means we want these curly braces to enclose all of our alerts, to look like this. 102 07:22.480 --> 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 07:29.560 --> 07:35.620 that are contained inside the function, and by inside I mean inside the curly braces, to make all of those 104 07:35.620 --> 07:42.900 lines of code indented slightly, so you can tell at a glance these are sort of the children code, 105 07:43.000 --> 07:45.280 and this is the enclosing parent. 106 07:45.280 --> 07:53.050 So the other thing is that, the other thing that you'll notice, is that your closing curly brace does 107 07:53.050 --> 07:53.580 not 108 07:53.710 --> 07:55.970 end with a closing semi-colon. 109 07:55.990 --> 07:59.050 So this is how Javascript functions should look like. 110 07:59.060 --> 08:01.930 Now let's go ahead and run this code. 111 08:01.930 --> 08:05.860 So in order to execute everything that's inside this function getMilk, 112 08:06.100 --> 08:07.510 all I have to do is write 113 08:07.510 --> 08:10.150 getMilk, some empty parentheses, 114 08:10.240 --> 08:11.980 and finally a semi-colon. 115 08:11.980 --> 08:14.710 Now you'll notice I'm not writing the function keyword, 116 08:14.860 --> 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 08:21.490 --> 08:26.810 called getMilk and run all of the instructions that are contained inside it. 118 08:27.220 --> 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 08:34.570 --> 08:35.310 getMilk. 120 08:35.440 --> 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 08:42.400 --> 08:47.030 can change the alert to something called a console log. 122 08:47.190 --> 08:52.100 And we can do that easily by hitting command F on Mac or control F on Windows, 123 08:52.210 --> 08:55.240 and this allows you to find the word 'alert'. 124 08:55.330 --> 08:59.770 Now, when you click on this A to B, it allows you to replace it with something else. 125 08:59.920 --> 09:03.520 And we're going to replace it with console.log. 126 09:03.700 --> 09:06.070 And then we're going to hit Replace all. 127 09:06.070 --> 09:12.890 And what this does is that it changes all the places where we had 'alert' to 'console.log'. 128 09:13.030 --> 09:20.650 Now what this does is that it will log the string that's contained inside here inside the console. 129 09:20.650 --> 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 09:27.520 --> 09:30.220 function for it to be all executed. 131 09:30.220 --> 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 09:34.960 --> 09:39.190 those instructions to the robot displayed in the console. 133 09:39.190 --> 09:45.490 Now the important difference between the console log and the alert is that the alert is something that 134 09:45.490 --> 09:47.060 the user can see. 135 09:47.230 --> 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 09:53.830 --> 09:56.520 logs are only for the developer. 137 09:56.530 --> 10:01.060 They only show up in the console, which is not intended for the user. 138 10:01.240 --> 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 10:09.190 --> 10:12.880 print out parts of the code into the console. 140 10:12.880 --> 10:17.280 And we're going to use this more and more as we create more and more complex web sites. 141 10:17.320 --> 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 10:23.440 --> 10:29.950 define what needs to happen, and when we call the function getMilk, then it searches for the function 143 10:29.950 --> 10:35.230 that has the same name and executes everything that's inside the curly braces.