Original subtitles

0 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.