0 1 00:00:00,510 --> 00: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 2 00:00:09,030 --> 00: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 3 00:00:17,130 --> 00:00:18,510 name of the function. 3 4 00:00:18,510 --> 00:00:25,350 Now if any of that was confusing then I'd recommend reviewing the last lesson and playing around with 4 5 00:00:25,350 --> 00:00:30,660 the basic function yourself either in the Chrome Developer Tools or through using Karel the robot, 5 6 00:00:31,050 --> 00:00:35,700 and just making sure that you fully understand what's going on before you proceed. 6 7 00:00:35,700 --> 00:00:41,640 Now, when I was little my parents used to love buying these Neapolitan ice creams, which come in three 7 8 00:00:41,640 --> 00:00:42,750 flavors, right? 8 9 00:00:42,750 --> 00:00:45,010 Vanilla, strawberry and chocolate. 9 10 00:00:45,150 --> 00:00:50,180 And I always thought it was really indecisive of them, instead of just picking your favorite flavor, 10 11 00:00:50,220 --> 00:00:50,710 right? 11 12 00:00:50,940 --> 00:00:57,600 But just like ice cream comes in three classic flavors, functions also come in three classic flavors. 12 13 00:00:57,660 --> 00:01:01,240 And what we saw just now was the vanilla version, 13 14 00:01:01,320 --> 00:01:04,300 the simplest form of the Javascript function. 14 15 00:01:04,320 --> 00: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 16 00:01:11,730 --> 00:01:18,270 Now what if I have the ability to not only say getMilk, which executes all of the commands inside the 16 17 00:01:18,270 --> 00:01:22,260 getMilk function, but what if I could say getMilk, 17 18 00:01:22,260 --> 00:01:28,540 and inside the parentheses, I specify the number of bottles of milk that I want the robot to get? 18 19 00:01:28,680 --> 00: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 20 00:01:34,890 --> 00:01:42,030 to accept inputs, whereas previously we had nothing between the parentheses because that function didn't 20 21 00:01:42,030 --> 00:01:43,440 take any inputs. 21 22 00:01:43,560 --> 00: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 23 00:01:50,040 --> 00:01:54,350 it to be used inside the series of instructions. 23 24 00:01:54,510 --> 00: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 25 00:02:02,190 --> 00:02:04,030 command it to do something. 25 26 00:02:04,230 --> 00: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 27 00:02:11,880 --> 00:02:17,070 of bottles of milk based on the input that the function gets when it gets called. 27 28 00:02:17,070 --> 00:02:21,050 So, when we create the function we're still using the function keyword, 28 29 00:02:21,060 --> 00:02:24,100 we’re still giving it the same name called getMilk, 29 30 00:02:24,270 --> 00:02:29,110 but in this case in between the parentheses we've got the name of the input, 30 31 00:02:29,280 --> 00:02:31,080 and in this case it's called bottles. 31 32 00:02:31,080 --> 00: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 33 00:02:39,960 --> 00:02:45,210 function to calculate something or to do something with it. 33 34 00:02:45,210 --> 00:02:52,200 In this case we're calculating the cost, say if one bottle milk costs 1.5 dollars, then depending 34 35 00:02:52,200 --> 00:02:58,710 on the number of bottles of milk the master wanted, then we would have to calculate the amount of money 35 36 00:02:58,710 --> 00: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 37 00:03:04,110 --> 00:03:10,780 previously, but this time, instead of having empty parentheses, we're giving the input of 2. 37 38 00:03:11,010 --> 00:03:16,170 And this will get bound to that name, bottles, inside the function. 38 39 00:03:16,170 --> 00:03:23,700 So if we call this function using getMilk(2), then 2 goes into bottles. 39 40 00:03:23,700 --> 00: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 41 00:03:29,790 --> 00:03:33,640 to 2 times 1.5 which equals 3. 41 42 00:03:33,660 --> 00:03:35,340 So the cost is $3. 42 43 00:03:35,490 --> 00:03:40,980 And this is the second flavor of functions which is kind of like the chocolate flavor and a little bit 43 44 00:03:40,980 --> 00:03:42,270 better than vanilla. 44 45 00:03:42,360 --> 00:03:48,880 And now when we say getMilk(2), our robot knows how many bottles of milk to get. 45 46 00:03:48,880 --> 00: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 47 00:03:54,540 --> 00:03:58,820 store, and how much change it should get back for its master. 47 48 00:03:59,100 --> 00:04:03,400 So we can use the input inside the block of code. 48 49 00:04:03,510 --> 00:04:11,010 So, if we take a look at this inside our Chrome Developer Tools, if we modify our getMilk function to 49 50 00:04:11,010 --> 00:04:13,940 take an input, say called bottles, 50 51 00:04:14,040 --> 00:04:17,410 now we're able to use this variable, 51 52 00:04:17,410 --> 00:04:22,050 bottles, inside the curly braces of this function. 52 53 00:04:22,050 --> 00:04:31,260 So, for example, instead of simply console logging buy milk, I can now use that variable, bottles, inside 53 54 00:04:31,260 --> 00:04:32,190 my code. 54 55 00:04:32,190 --> 00:04:39,810 So now I want the console log to read, buy the number of bottles plus the string ‘bottles of milk’. 55 56 00:04:39,810 --> 00:04:46,230 So now, when we call this function, we have to specify an input. 56 57 00:04:46,230 --> 00:04:48,810 So let's say buy 12, 57 58 00:04:48,810 --> 00:04:49,170 right? 58 59 00:04:49,170 --> 00:04:51,530 So let's put 12 in here. 59 60 00:04:51,750 --> 00: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 61 00:05:00,270 --> 00:05:01,770 console log statement. 61 62 00:05:01,920 --> 00: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 63 00:05:12,360 --> 00:05:16,820 then you'll see that, in addition to carrying out all the other commands, 63 64 00:05:16,950 --> 00: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 65 00:05:27,090 --> 00:05:27,870 getMilk. 65 66 00:05:27,870 --> 00:05:35,790 Now this is a really neat way of modifying your function so that it does more than simply repeating 66 67 00:05:35,880 --> 00:05:39,360 a bunch of code that you packaged together. 67 68 00:05:39,690 --> 00:05:47,900 So as a challenge I want you to change this code here to take money instead of bottles. 68 69 00:05:48,240 --> 00:05:54,070 And I want you to use it to calculate the number of bottles the robot is able to buy. 69 70 00:05:54,330 --> 00: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 71 00:06:02,400 --> 00:06:09,210 your function to calculate how many bottles of milk the robot is able to buy based on the amount of 71 72 00:06:09,210 --> 00:06:11,190 money that you gave the robot. 72 73 00:06:11,190 --> 00:06:20,100 So you should be able to say something like getMilk, maybe $5, and if one bottle of milk is say 73 74 00:06:20,100 --> 00: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 75 00:06:27,420 --> 00:06:33,330 3.33, so it won't be able to buy a 0.3 bottle. 75 76 00:06:33,480 --> 00: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 77 00:06:39,090 --> 00:06:40,750 of milk back. 77 78 00:06:40,890 --> 00: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 79 00:06:47,970 --> 00: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 80 00:06:54,330 --> 00:06:54,920 got. 80 81 00:06:54,930 --> 00:07:00,330 So if you haven’t followed the function up till now, you can download this code here in the resources 81 82 00:07:00,330 --> 00:07:04,540 section of this lesson and you can use it to complete the challenge. 82 83 00:07:04,560 --> 00:07:06,740 So pause the video now and give it a go. 83 84 00:07:09,770 --> 00:07:10,060 All right. 84 85 00:07:10,070 --> 00: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 86 00:07:17,960 --> 00:07:24,260 just a name that we're going to assign to whatever number comes in through here. 86 87 00:07:24,410 --> 00:07:26,840 So we're going to keep this function call the same. 87 88 00:07:26,840 --> 00:07:31,630 So we're calling the function getMilk, giving the input a value of 5. 88 89 00:07:31,820 --> 00:07:38,450 Now 5 gets bound to this word money and we can now use it inside the function. 89 90 00:07:38,450 --> 00:07:45,110 So, for example, we can say something like var numberOfBottles 90 91 00:07:46,440 --> 00:07:56,520 = money / 1.5, which we said in this scenario is the cost per bottle of milk, and then we’re 91 92 00:07:56,520 --> 00:08:02,390 going to say, console.log “buy “ numberOfBottles “of milk”. 92 93 00:08:02,400 --> 00: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 94 00:08:09,300 --> 00:08:12,310 bottles of milk, which is not what we want, 94 95 00:08:12,330 --> 00:08:12,830 right? 95 96 00:08:12,840 --> 00:08:15,410 We want it to only say 3. 96 97 00:08:15,600 --> 00:08:17,860 So how can we get it to do that? 97 98 00:08:18,360 --> 00:08:25,350 Well, this might have required a little bit of googling, but essentially what we're trying to do is, 98 99 00:08:25,440 --> 00: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 100 00:08:32,850 --> 00:08:38,400 and you can see that it’s pointing us towards something called the Javascript floor method, where you 100 101 00:08:38,400 --> 00:08:40,720 can write Math.floor, 101 102 00:08:40,860 --> 00:08:45,450 and inside the parentheses we put the number that we want to round down. 102 103 00:08:45,570 --> 00:08:48,240 So let's give this a go over here. 103 104 00:08:48,510 --> 00:08:53,600 What if we said numberOfBottles = Math.floor, 104 105 00:08:53,910 --> 00:09:00,910 and then inside these round parentheses we put in the number that we want to round down? 105 106 00:09:00,930 --> 00:09:07,530 Now, it's important that we're rounding down because even if it was 4.99 bottles, we still 106 107 00:09:07,530 --> 00:09:11,980 can't buy 0.99 bottles of milk, 107 108 00:09:12,000 --> 00:09:12,330 right? 108 109 00:09:12,330 --> 00:09:14,380 So we have to round it down. 109 110 00:09:14,400 --> 00: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 111 00:09:21,810 --> 00:09:27,340 robot to buy 3 bottles of milk, which is exactly what we wanted. 111 112 00:09:27,490 --> 00:09:33,030 So very often, when you try to do something with code, anything that you’re trying to achieve is usually 112 113 00:09:33,120 --> 00:09:35,160 just a quick google away. 113 114 00:09:35,160 --> 00:09:37,210 So I think that challenge was interesting. 114 115 00:09:37,470 --> 00: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 116 00:09:43,440 --> 00:09:48,120 that can give an output back in addition to taking an input. 116 117 00:09:48,120 --> 00:09:51,690 So for all of that and more, I'll see you on the next lesson.