WEBVTT 0 00:00.510 --> 00:09.030 Now in the last lesson we saw the most basic type of Javascript functions and that is a way of allowing 1 00:09.030 --> 00:17.130 us to package a number of instructions into a block of code which we can execute at once by using the 2 00:17.130 --> 00:18.510 name of the function. 3 00:18.510 --> 00:25.350 Now if any of that was confusing then I'd recommend reviewing the last lesson and playing around with 4 00:25.350 --> 00:30.660 the basic function yourself either in the Chrome Developer Tools or through using Karel the robot, 5 00:31.050 --> 00:35.700 and just making sure that you fully understand what's going on before you proceed. 6 00:35.700 --> 00:41.640 Now, when I was little my parents used to love buying these Neapolitan ice creams, which come in three 7 00:41.640 --> 00:42.750 flavors, right? 8 00:42.750 --> 00:45.010 Vanilla, strawberry and chocolate. 9 00:45.150 --> 00:50.180 And I always thought it was really indecisive of them, instead of just picking your favorite flavor, 10 00:50.220 --> 00:50.710 right? 11 00:50.940 --> 00:57.600 But just like ice cream comes in three classic flavors, functions also come in three classic flavors. 12 00:57.660 --> 01:01.240 And what we saw just now was the vanilla version, 13 01:01.320 --> 01:04.300 the simplest form of the Javascript function. 14 01:04.320 --> 01:11.450 So let's take a look at the next flavor of functions and going back to our little house robot scenario. 15 01:11.730 --> 01:18.270 Now what if I have the ability to not only say getMilk, which executes all of the commands inside the 16 01:18.270 --> 01:22.260 getMilk function, but what if I could say getMilk, 17 01:22.260 --> 01:28.540 and inside the parentheses, I specify the number of bottles of milk that I want the robot to get? 18 01:28.680 --> 01:34.890 Well, in order to do this, we have to modify our simple function a little bit, and we have to allow it 19 01:34.890 --> 01:42.030 to accept inputs, whereas previously we had nothing between the parentheses because that function didn't 20 01:42.030 --> 01:43.440 take any inputs. 21 01:43.560 --> 01:50.040 In this case we're putting in the name of the input that is going to go into this function and allows 22 01:50.040 --> 01:54.350 it to be used inside the series of instructions. 23 01:54.510 --> 02:02.160 So, in this case, when we call getMilk, it's still going to execute all of these alerts to the robot to 24 02:02.190 --> 02:04.030 command it to do something. 25 02:04.230 --> 02:11.610 But in the middle, when we get to the buy milk section, it's going to tell it to buy a specific number 26 02:11.880 --> 02:17.070 of bottles of milk based on the input that the function gets when it gets called. 27 02:17.070 --> 02:21.050 So, when we create the function we're still using the function keyword, 28 02:21.060 --> 02:24.100 we’re still giving it the same name called getMilk, 29 02:24.270 --> 02:29.110 but in this case in between the parentheses we've got the name of the input, 30 02:29.280 --> 02:31.080 and in this case it's called bottles. 31 02:31.080 --> 02:39.960 Now that bottles is used much like a variable to contain the input, and we can now use it inside the 32 02:39.960 --> 02:45.210 function to calculate something or to do something with it. 33 02:45.210 --> 02:52.200 In this case we're calculating the cost, say if one bottle milk costs 1.5 dollars, then depending 34 02:52.200 --> 02:58.710 on the number of bottles of milk the master wanted, then we would have to calculate the amount of money 35 02:58.710 --> 03:04.110 we have to give to the shopkeeper, right? Now, when you call this function, it's similar to what we did 36 03:04.110 --> 03:10.780 previously, but this time, instead of having empty parentheses, we're giving the input of 2. 37 03:11.010 --> 03:16.170 And this will get bound to that name, bottles, inside the function. 38 03:16.170 --> 03:23.700 So if we call this function using getMilk(2), then 2 goes into bottles. 39 03:23.700 --> 03:29.790 So now we have a variable called bottles that's equal to two and then we can calculate cost which equals 40 03:29.790 --> 03:33.640 to 2 times 1.5 which equals 3. 41 03:33.660 --> 03:35.340 So the cost is $3. 42 03:35.490 --> 03:40.980 And this is the second flavor of functions which is kind of like the chocolate flavor and a little bit 43 03:40.980 --> 03:42.270 better than vanilla. 44 03:42.360 --> 03:48.880 And now when we say getMilk(2), our robot knows how many bottles of milk to get. 45 03:48.880 --> 03:54.540 It’ll also be able to use that number of bottles to calculate how much money it needs to spend at the 46 03:54.540 --> 03:58.820 store, and how much change it should get back for its master. 47 03:59.100 --> 04:03.400 So we can use the input inside the block of code. 48 04:03.510 --> 04:11.010 So, if we take a look at this inside our Chrome Developer Tools, if we modify our getMilk function to 49 04:11.010 --> 04:13.940 take an input, say called bottles, 50 04:14.040 --> 04:17.410 now we're able to use this variable, 51 04:17.410 --> 04:22.050 bottles, inside the curly braces of this function. 52 04:22.050 --> 04:31.260 So, for example, instead of simply console logging buy milk, I can now use that variable, bottles, inside 53 04:31.260 --> 04:32.190 my code. 54 04:32.190 --> 04:39.810 So now I want the console log to read, buy the number of bottles plus the string ‘bottles of milk’. 55 04:39.810 --> 04:46.230 So now, when we call this function, we have to specify an input. 56 04:46.230 --> 04:48.810 So let's say buy 12, 57 04:48.810 --> 04:49.170 right? 58 04:49.170 --> 04:51.530 So let's put 12 in here. 59 04:51.750 --> 05:00.210 Now, once I hit run, you'll see that bottles now takes on the value of 12, and it gets placed inside this 60 05:00.270 --> 05:01.770 console log statement. 61 05:01.920 --> 05:11.910 So now, if I hit command K, or control K on Windows, to clear the console, and I run the code inside my Snippets, 62 05:12.360 --> 05:16.820 then you'll see that, in addition to carrying out all the other commands, 63 05:16.950 --> 05:26.930 it also says ‘buy 12 bottles of milk’, and that 12 comes from the input that I used to call this function, 64 05:27.090 --> 05:27.870 getMilk. 65 05:27.870 --> 05:35.790 Now this is a really neat way of modifying your function so that it does more than simply repeating 66 05:35.880 --> 05:39.360 a bunch of code that you packaged together. 67 05:39.690 --> 05:47.900 So as a challenge I want you to change this code here to take money instead of bottles. 68 05:48.240 --> 05:54.070 And I want you to use it to calculate the number of bottles the robot is able to buy. 69 05:54.330 --> 06:02.400 So, for example, if you gave your robot $10 and a bottle of milk costs $1.5, you should be able to modify 70 06:02.400 --> 06:09.210 your function to calculate how many bottles of milk the robot is able to buy based on the amount of 71 06:09.210 --> 06:11.190 money that you gave the robot. 72 06:11.190 --> 06:20.100 So you should be able to say something like getMilk, maybe $5, and if one bottle of milk is say 73 06:20.100 --> 06:27.300 $1.5, then that should mean that your robot should be able to buy 5 divide by 1.5 which equals 74 06:27.420 --> 06:33.330 3.33, so it won't be able to buy a 0.3 bottle. 75 06:33.480 --> 06:38.970 Nobody's going to let it slash a bottle of milk into a third, but it will be able to buy 3 bottles 76 06:39.090 --> 06:40.750 of milk back. 77 06:40.890 --> 06:47.880 So see if you can modify this function in order to take an amount of money as an input and be able to 78 06:47.970 --> 06:54.330 change the console log to state how many bottles of milk it's going to buy based on how much money it 79 06:54.330 --> 06:54.920 got. 80 06:54.930 --> 07:00.330 So if you haven’t followed the function up till now, you can download this code here in the resources 81 07:00.330 --> 07:04.540 section of this lesson and you can use it to complete the challenge. 82 07:04.560 --> 07:06.740 So pause the video now and give it a go. 83 07:09.770 --> 07:10.060 All right. 84 07:10.070 --> 07:17.960 So this time instead of taking bottles as an input we're going to take money as the input and this is 85 07:17.960 --> 07:24.260 just a name that we're going to assign to whatever number comes in through here. 86 07:24.410 --> 07:26.840 So we're going to keep this function call the same. 87 07:26.840 --> 07:31.630 So we're calling the function getMilk, giving the input a value of 5. 88 07:31.820 --> 07:38.450 Now 5 gets bound to this word money and we can now use it inside the function. 89 07:38.450 --> 07:45.110 So, for example, we can say something like var numberOfBottles 90 07:46.440 --> 07:56.520 = money / 1.5, which we said in this scenario is the cost per bottle of milk, and then we’re 91 07:56.520 --> 08:02.390 going to say, console.log “buy “ numberOfBottles “of milk”. 92 08:02.400 --> 08:09.300 But right now, if we clean the console and run our code, you'll see that we're getting 3.3 recurring 93 08:09.300 --> 08:12.310 bottles of milk, which is not what we want, 94 08:12.330 --> 08:12.830 right? 95 08:12.840 --> 08:15.410 We want it to only say 3. 96 08:15.600 --> 08:17.860 So how can we get it to do that? 97 08:18.360 --> 08:25.350 Well, this might have required a little bit of googling, but essentially what we're trying to do is, 98 08:25.440 --> 08:32.310 how do we round down Javascript? So, we can see that the first link that we get is from the W3 Schools, 99 08:32.850 --> 08:38.400 and you can see that it’s pointing us towards something called the Javascript floor method, where you 100 08:38.400 --> 08:40.720 can write Math.floor, 101 08:40.860 --> 08:45.450 and inside the parentheses we put the number that we want to round down. 102 08:45.570 --> 08:48.240 So let's give this a go over here. 103 08:48.510 --> 08:53.600 What if we said numberOfBottles = Math.floor, 104 08:53.910 --> 09:00.910 and then inside these round parentheses we put in the number that we want to round down? 105 09:00.930 --> 09:07.530 Now, it's important that we're rounding down because even if it was 4.99 bottles, we still 106 09:07.530 --> 09:11.980 can't buy 0.99 bottles of milk, 107 09:12.000 --> 09:12.330 right? 108 09:12.330 --> 09:14.380 So we have to round it down. 109 09:14.400 --> 09:21.810 So now, if we run our code with this floor function here, then you can see that our code now tells the 110 09:21.810 --> 09:27.340 robot to buy 3 bottles of milk, which is exactly what we wanted. 111 09:27.490 --> 09:33.030 So very often, when you try to do something with code, anything that you’re trying to achieve is usually 112 09:33.120 --> 09:35.160 just a quick google away. 113 09:35.160 --> 09:37.210 So I think that challenge was interesting. 114 09:37.470 --> 09:43.440 And in the next lesson we're going to look at an even more complex form of functions, which is functions 115 09:43.440 --> 09:48.120 that can give an output back in addition to taking an input. 116 09:48.120 --> 09:51.690 So for all of that and more, I'll see you on the next lesson.