All right guys. In this lesson and some of the coming lessons we're going to be learning a really really
crucial aspect of all programming languages, and that is how do you create functions. Now, in order to
explain function,
you'll have to imagine that, let's say that I am a little house robot and my name is Angela.
I know I told you previously that I'm actually a real human being,
but let's just consider for a moment that I'm a robot,
and I work in your house. And all you have to do in order to command me is to give me instructions in
code.
So for example you could tell me to leave the house using alert ("leaveHouse"), and then you can tell me
to take two steps to the right by repeating the instruction
"moveRight".
And then you could say move up four steps and move right two steps.
And this set of instructions takes me to the store. And at the store you'll ask me to buy you some milk.
And then you repeat the instructions to me backwards.
And that takes me home.
And here is your bottle of milk.
Now if you wanted a bottle of milk every day you would have to write out all of this code repeatedly
every single time you wanted the little house robot to go and buy you some milk.
Now that's kind of tiring.
And, you know, at some point your fingers are going to start hurting from writing all of this repeated
code,
right?
So what can you do instead?
Well, what if you took this series of instructions that together send the little robot to the store, buys
your milk and brings it back.
What if you packaged it into a single package of code and you gave it a name?
Well, this is exactly what functions are.
They allow you to create a series of instructions, package it into a block of code, and remember the packaging
is done by these curly braces,
the opening curly brace ({) specifying where the series of instructions begins and the closing curly brace (})
specifying where that ends, and everything in between is the block of code that will get executed when
you call this function.
And you also get to give this function a name,
for example, in this case, it's called getMilk. And this is essentially the structure of how you would
create this function for getting milk.
You first start off with a keyword called function that tells the computer that you are constructing,
that you are creating a new function.
You give the function a name. You have a set of parentheses or round brackets. And then you have some
curly brackets that enclose all of the instructions that you want to be executed.
Now, once you have created that function, getting the robot to buy you milk is as simple as calling the
function getMilk, and it will carry out all of those instructions that are enclosed in that function
and it will know what it needs to do.
That saves you a lot of typing and that saves you a lot of repetition as well,
keeping our code dry,
remember? Now this is the structure of a variable.
We use the "var" keyword to create a new container.
The container gets a name and then finally we get to put something inside the container.
Well, functions work quite similarly.
We use the "function" keyword to say that we're creating a new function and then we get to give the function
a name to identify that block of instructions.
And finally we get to put in all the instructions that we want to be carried out whenever we call the
function, getMilk. And when we do call the function, getMilk, then all of the instructions inside that
function will get taken out and executed.
Now the really important thing is to know that there is a difference between when you create the function,
because this is when you have the function keyword,
this is where you give it a name and where you have the curly braces that determine what functionality
essentially this function is going to perform.
But when you want to use the function, in programming we say calling the function, when you call getMilk,
then all you have to write is the name of the function,
some parentheses, and you end the line with a semicolon.
And this is a command.
And once you do this, the computer will look to find where this function was created and it will carry
out all the instructions inside the curly braces.
If you head over to Chrome and you open up the Developer Tools, and we're going to go into the Sources
tab over here, and we're going to write some code in our index.js.
Now, I've copied over all those commands that we had for our little robot, which involves a whole bunch
of alerts telling it what to do
every step of the way.
Now, if you told me, Angela the person, go and get some milk, I already know how to, for example, put on my shoes,
how to open the door, how to go outside, and, you know, if I already know where the store is then I can
just go and buy the milk and come back.
But with a robot, as with a computer or a browser, it doesn't know anything that you haven't told it to
do.
So we have to give it detailed step by step instructions in order for it to carry out what we want it to
do.
So in this case, we have a whole bunch of alerts,
and if I run this code right now then you can see that we're going to get a whole bunch of alerts that
tells our little robot what to do
every step of the way. Now every single time we want a bottle of milk we're going to have to write all
of this code out.
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
going to have to write out all of that code all over again.
And it's kind of painful,
right?
So what we learned previously is that we can package this into a function by simply creating it as one.
So we can do that by writing the function keyword and then we give the function a name, so we can call
it getMilk.
And remember we're still using camel casing whenever we're naming functions or variables, and all of
the rules that apply to naming variables apply to naming functions.
So, for example, you can't say 1getMilk.
You can't start your function name with a number.
So if you can't remember,
take a look back at all the rules around how you can name variable names.
So, now that our function has a name, we're going to give it a set of empty parentheses, and we're going to
explain this a little bit later on when we fill out those parentheses.
But for now, in our simplest type of function, we're just going to use the keyword function, give it a name,
an empty set of parentheses,
and finally we're going to use some curly braces to determine what is going to happen when we call this
function.
So all the code that's in between the set of curly braces is going to be executed when I call this function
getMilk.
So that means we want these curly braces to enclose all of our alerts, to look like this.
Now, in terms of style, when you're creating a function, it's good practice to make all of the instructions
that are contained inside the function, and by inside I mean inside the curly braces, to make all of those
lines of code indented slightly, so you can tell at a glance these are sort of the children code,
and this is the enclosing parent.
So the other thing that you'll notice, is that your closing curly brace does
not
end with a closing semi-colon.
So this is how Javascript functions should look like.
Now let's go ahead and run this code.
So in order to execute everything that's inside this function getMilk,
all I have to do is write
getMilk, some empty parentheses,
and finally a semi-colon.
Now you'll notice I'm not writing the function keyword,
I don't have any curly brackets, because this is the part where I'm telling the computer to find a function
called getMilk and run all of the instructions that are contained inside it.
So now if I hit run then you can see that it's going to execute all of these functions that are inside
getMilk.
Now, if you don't want to have to keep clicking OK every single time you test your function, then you
can change the alert to something called a console.log().
And we can do that easily by hitting command F on Mac or control F on Windows,
and this allows you to find the word 'alert'.
Now, when you click on this A to B, it allows you to replace it with something else.
And we're going to replace it with console.log.
And then we're going to hit Replace all.
And what this does is that it changes all the places where we had 'alert' to 'console.log'.
Now, what this does is that it will log the string that's contained inside here inside the Console.
So now if I run this code, which will update our function to use console.log, and then it will call the
function for it to be all executed.
Then you'll see that instead of having a bunch of alerts which we have to click through, we get all of
those instructions to the robot displayed in the console.
Now the important difference between the console log and the alert is that the alert is something that
the user can see.
So if you had an alert on your website, then any visitor will be able to see the alert, but the console
logs are only for the developer.
They only show up in the console, which is not intended for the user.
It's meant for the developer to debug your code, to find out if there were any problems, and to essentially
print out parts of the code into the console.
And we're going to use this more and more as we create more and more complex websites.
But you can see that our function is still doing the same thing. It has a set of curly brackets which
define what needs to happen, and when we call the function getMilk, then it searches for the function
that has the same name and executes everything that's inside the curly braces.