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.