All language subtitles for 18. Functions Part 1 Creating and Calling Functions

All right guys. In this lesson and some of the coming lessons we're going to be learning a really really
1

crucial aspect of all programming languages, and that is how do you create functions. Now in order to
2

explain function,
3

you'll have to imagine that, let's say that I am a little house robot and my name is Angela.
4

I know I told you previously that I'm actually a real human being,
5

but let's just consider for a moment that I'm a robot,
6

and I work in your house. And all you have to do in order to command me is to give me instructions in
7

code.
8

So for example you could tell me to leave the house using alert ("leaveHouse"), and then you can tell me
9

to take two steps to the right by repeating the instruction
10

moveRight.
11

And then you could say move up four steps and move right two steps.
12

And this set of instructions takes me to the store. And at the store you'll ask me to buy you some milk.
13

And then you repeat the instructions to me backwards.
14

And that takes me home.
15

And here is your bottle of milk.
16

Now if you wanted a bottle of milk every day you would have to write out all of this code repeatedly
17

every single time you wanted the little house robot to go and buy you some milk.
18

Now that's kind of tiring.
19

And, you know, at some point your fingers are going to start hurting from writing all of this repeated
20

code,
21

right?
22

So what can you do instead?
23

Well, what if you took this series of instructions that together send the little robot to the store, buys
24

your milk and brings it back.
25

What if you packaged it into a single package of code and you gave it a name?
26

Well, this is exactly what functions are.
27

They allow you to create a series of instructions, package it into a block of code, and remember the packaging
28

is done by these curly braces,
29

the opening curly brace specifying where the series of instructions begins and the closing curly brace
30

specifying where that ends, and everything in between is the block of code that will get executed when
31

you call this function.
32

And you also get to give this function a name.
33

For example in this case it's called getMilk. And this is essentially the structure of how you would
34

create this function for getting milk.
35

You first start off with a keyword called function that tells the computer that you are constructing,
36

that you are creating a new function.
37

You give the function a name. You have a set of parentheses or round brackets. And then you have some
38

curly brackets that enclose all of the instructions that you want to be executed.
39

Now, once you have created that function, getting the robot to buy you milk is as simple as calling the
40

function getMilk, and it will carry out all of those instructions that are enclosed in that function
41

and it will know what it needs to do.
42

That saves you a lot of typing and that saves you a lot of repetition as well,
43

keeping our code dry,
44

remember? Now this is the structure of a variable.
45

We use the var keyword to create a new container.
46

The container gets a name and then finally we get to put something inside the container.
47

Well, functions work quite similarly.
48

We use the function keyword to say that we're creating a new function and then we get to give the function
49

a name to identify that block of instructions.
50

And finally we get to put in all the instructions that we want to be carried out whenever we call the
51

function getMilk. And when we do call the function getMilk, then all of the instructions inside that
52

function will get taken out and executed.
53

Now the really important thing is to know that there is a difference between when you create the function,
54

because this is when you have the function keyword,
55

this is where you give it a name and where you have the curly braces that determine what functionality
56

essentially this function is going to perform.
57

But when you want to use the function, in programming we say calling the function, when you call getMilk,
58

then all you have to write is the name of the function,
59

some parentheses, and you end the line with a semicolon.
60

And this is a command.
61

And once you do this, the computer will look to find where this function was created and it will carry
62

out all the instructions inside the curly braces.
63

If you head over to Chrome and you open up the Developer Tools, and we're going to go into the Sources
64

tab over here, and we're going to write some code in our index.js.
65

Now, I've copied over all those commands that we had for our little robot, which involves a whole bunch
66

of alerts telling it what to do
67

every step of the way.
68

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

how to open the door, how to go outside, and, you know, if I already know where the store is then I can
70

just go and buy the milk and come back.
71

But with a robot, as with a computer or a browser, it doesn't know anything that you haven't told it to
72

do.
73

So we have to give it detailed step by step instructions in order for it to carry out what we want it to
74

do.
75

So in this case we have a whole bunch of alerts.
76

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

tells our little robot what to do
78

every step of the way. Now every single time we want a bottle of milk we're going to have to write all
79

of this code out.
80

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

going to have to write out all of that code all over again.
82

And it's kind of painful,
83

right?
84

So what we learned previously is that we can package this into a function by simply creating it as one.
85

So we can do that by writing the function keyword and then we give the function a name, so we can call
86

it getMilk.
87

And remember we're still using camel casing whenever we're naming functions or variables, and all of
88

the rules that apply to naming variables apply to naming functions.
89

So, for example, you can't say 1getMilk.
90

You can't start your function name with a number.
91

So if you can't remember,
92

take a look back at all the rules around how you can name variable names.
93

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

explain this a little bit later on when we fill out those parentheses.
95

But for now, in our simplest type of function, we're just going to use the keyword function, give it a name,
96

an empty set of parentheses,
97

and finally we're going to use some curly braces to determine what is going to happen when we call this
98

function.
99

So all the code that's in between the set of curly braces is going to be executed when I call this function
100

getMilk.
101

So that means we want these curly braces to enclose all of our alerts, to look like this.
102

Now, in terms of style, when you're creating a function, it's good practice to make all of the instructions
103

that are contained inside the function, and by inside I mean inside the curly braces, to make all of those
104

lines of code indented slightly, so you can tell at a glance these are sort of the children code,
105

and this is the enclosing parent.
106

So the other thing is that, the other thing that you'll notice, is that your closing curly brace does
107

not
108

end with a closing semi-colon.
109

So this is how Javascript functions should look like.
110

Now let's go ahead and run this code.
111

So in order to execute everything that's inside this function getMilk,
112

all I have to do is write
113

getMilk, some empty parentheses,
114

and finally a semi-colon.
115

Now you'll notice I'm not writing the function keyword,
116

I don't have any curly brackets, because this is the part where I'm telling the computer to find a function
117

called getMilk and run all of the instructions that are contained inside it.
118

So now if I hit run then you can see that it's going to execute all of these functions that are inside
119

getMilk.
120

Now if you don't want to have to keep clicking OK every single time you test your function, then you
121

can change the alert to something called a console log.
122

And we can do that easily by hitting command F on Mac or control F on Windows,
123

and this allows you to find the word 'alert'.
124

Now, when you click on this A to B, it allows you to replace it with something else.
125

And we're going to replace it with console.log.
126

And then we're going to hit Replace all.
127

And what this does is that it changes all the places where we had 'alert' to 'console.log'.
128

Now what this does is that it will log the string that's contained inside here inside the console.
129

So now if I run this code, which will update our function to use console.log, and then it will call the
130

function for it to be all executed.
131

Then you'll see that instead of having a bunch of alerts which we have to click through, we get all of
132

those instructions to the robot displayed in the console.
133

Now the important difference between the console log and the alert is that the alert is something that
134

the user can see.
135

So if you had an alert on your web site, then any visitor will be able to see the alert, but the console
136

logs are only for the developer.
137

They only show up in the console, which is not intended for the user.
138

It's meant for the developer to debug your code, to find out if there were any problems, and to essentially
139

print out parts of the code into the console.
140

And we're going to use this more and more as we create more and more complex web sites.
141

But you can see that our function is still doing the same thing. It has a set of curly brackets which
142

define what needs to happen, and when we call the function getMilk, then it searches for the function
143

that has the same name and executes everything that's inside the curly braces.