All language subtitles for 22. Functions Part 2 Parameters and Arguments

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.