Original subtitles

0 Now in the last lesson we saw the most basic type of Javascript functions and that is a way of allowing 1

us to package a number of instructions into a block of code which we can execute at once by using the 2

name of the function. 3

Now if any of that was confusing then I'd recommend reviewing the last lesson and playing around with 4

the basic function yourself either in the Chrome Developer Tools or through using Karel the robot, 5

and just making sure that you fully understand what's going on before you proceed. 6

Now, when I was little my parents used to love buying these Neapolitan ice creams, which come in three 7

flavors, right? 8

Vanilla, strawberry and chocolate. 9

And I always thought it was really indecisive of them, instead of just picking your favorite flavor, 10

right? 11

But just like ice cream comes in three classic flavors, functions also come in three classic flavors. 12

And what we saw just now was the vanilla version, 13

the simplest form of the Javascript function. 14

So let's take a look at the next flavor of functions and going back to our little house robot scenario. 15

Now what if I have the ability to not only say getMilk, which executes all of the commands inside the 16

getMilk function, but what if I could say getMilk, 17

and inside the parentheses, I specify the number of bottles of milk that I want the robot to get? 18

Well, in order to do this, we have to modify our simple function a little bit, and we have to allow it 19

to accept inputs, whereas previously we had nothing between the parentheses because that function didn't 20

take any inputs. 21

In this case we're putting in the name of the input that is going to go into this function and allows 22

it to be used inside the series of instructions. 23

So, in this case, when we call getMilk, it's still going to execute all of these alerts to the robot to 24

command it to do something. 25

But in the middle, when we get to the buy milk section, it's going to tell it to buy a specific number 26

of bottles of milk based on the input that the function gets when it gets called. 27

So, when we create the function we're still using the function keyword, 28

we’re still giving it the same name called getMilk, 29

but in this case in between the parentheses we've got the name of the input, 30

and in this case it's called bottles. 31

Now that bottles is used much like a variable to contain the input, and we can now use it inside the 32

function to calculate something or to do something with it. 33

In this case we're calculating the cost, say if one bottle milk costs 1.5 dollars, then depending 34

on the number of bottles of milk the master wanted, then we would have to calculate the amount of money 35

we have to give to the shopkeeper, right? Now, when you call this function, it's similar to what we did 36

previously, but this time, instead of having empty parentheses, we're giving the input of 2. 37

And this will get bound to that name, bottles, inside the function. 38

So if we call this function using getMilk(2), then 2 goes into bottles. 39

So now we have a variable called bottles that's equal to two and then we can calculate cost which equals 40

to 2 times 1.5 which equals 3. 41

So the cost is $3. 42

And this is the second flavor of functions which is kind of like the chocolate flavor and a little bit 43

better than vanilla. 44

And now when we say getMilk(2), our robot knows how many bottles of milk to get. 45

It’ll also be able to use that number of bottles to calculate how much money it needs to spend at the 46

store, and how much change it should get back for its master. 47

So we can use the input inside the block of code. 48

So, if we take a look at this inside our Chrome Developer Tools, if we modify our getMilk function to 49

take an input, say called bottles, 50

now we're able to use this variable, 51

bottles, inside the curly braces of this function. 52

So, for example, instead of simply console logging buy milk, I can now use that variable, bottles, inside 53

my code. 54

So now I want the console log to read, buy the number of bottles plus the string ‘bottles of milk’. 55

So now, when we call this function, we have to specify an input. 56

So let's say buy 12, 57

right? 58

So let's put 12 in here. 59

Now, once I hit run, you'll see that bottles now takes on the value of 12, and it gets placed inside this 60

console log statement. 61

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

then you'll see that, in addition to carrying out all the other commands, 63

it also says ‘buy 12 bottles of milk’, and that 12 comes from the input that I used to call this function, 64

getMilk. 65

Now this is a really neat way of modifying your function so that it does more than simply repeating 66

a bunch of code that you packaged together. 67

So as a challenge I want you to change this code here to take money instead of bottles. 68

And I want you to use it to calculate the number of bottles the robot is able to buy. 69

So, for example, if you gave your robot $10 and a bottle of milk costs $1.5, you should be able to modify 70

your function to calculate how many bottles of milk the robot is able to buy based on the amount of 71

money that you gave the robot. 72

So you should be able to say something like getMilk, maybe $5, and if one bottle of milk is say 73

$1.5, then that should mean that your robot should be able to buy 5 divide by 1.5 which equals 74

3.33, so it won't be able to buy a 0.3 bottle. 75

Nobody's going to let it slash a bottle of milk into a third, but it will be able to buy 3 bottles 76

of milk back. 77

So see if you can modify this function in order to take an amount of money as an input and be able to 78

change the console log to state how many bottles of milk it's going to buy based on how much money it 79

got. 80

So if you haven’t followed the function up till now, you can download this code here in the resources 81

section of this lesson and you can use it to complete the challenge. 82

So pause the video now and give it a go. 83

All right. 84

So this time instead of taking bottles as an input we're going to take money as the input and this is 85

just a name that we're going to assign to whatever number comes in through here. 86

So we're going to keep this function call the same. 87

So we're calling the function getMilk, giving the input a value of 5. 88

Now 5 gets bound to this word money and we can now use it inside the function. 89

So, for example, we can say something like var numberOfBottles 90

= money / 1.5, which we said in this scenario is the cost per bottle of milk, and then we’re 91

going to say, console.log “buy “ numberOfBottles “of milk”. 92

But right now, if we clean the console and run our code, you'll see that we're getting 3.3 recurring 93

bottles of milk, which is not what we want, 94

right? 95

We want it to only say 3. 96

So how can we get it to do that? 97

Well, this might have required a little bit of googling, but essentially what we're trying to do is, 98

how do we round down Javascript? So, we can see that the first link that we get is from the W3 Schools, 99

and you can see that it’s pointing us towards something called the Javascript floor method, where you 100

can write Math.floor, 101

and inside the parentheses we put the number that we want to round down. 102

So let's give this a go over here. 103

What if we said numberOfBottles = Math.floor, 104

and then inside these round parentheses we put in the number that we want to round down? 105

Now, it's important that we're rounding down because even if it was 4.99 bottles, we still 106

can't buy 0.99 bottles of milk, 107

right? 108

So we have to round it down. 109

So now, if we run our code with this floor function here, then you can see that our code now tells the 110

robot to buy 3 bottles of milk, which is exactly what we wanted. 111

So very often, when you try to do something with code, anything that you’re trying to achieve is usually 112

just a quick google away. 113

So I think that challenge was interesting. 114

And in the next lesson we're going to look at an even more complex form of functions, which is functions 115

that can give an output back in addition to taking an input. 116

So for all of that and more, I'll see you on the next lesson.