All right, then.
So I'd like to show you how to create your first function.
The first thing we need to do is write out the function keyword.
Then we give the function a name.
I'm going to call this greet.
So much like we give a variable a name.
We also give functions a name too.
Now, after the name, we place our parentheses and then we do some curly braces.
These curly braces are a code block for the function, so all of our code for the function goes inside
this code block.
Then whenever we call the function in the future, this is what is going to execute.
So for now, I'm going to keep this simple.
I'll just do a console dot log and say hello there.
So then now we have declared a function which we can then call at any point later on in our code.
Now if I was to save this at the minute and run it in the browser, nothing is going to be logged to
the console.
Because even though we've defined our function here, we've not actually called the function.
So in order to call the function, we need to say the function name, which is greet.
That's the name right there.
Then we use parentheses to call the function.
So this is known as calling the function or also invoking the function.
So if I run this now, what it's going to do is see this.
It's going to run the function, the code block for this function and hopefully log this to the console.
So over here we can see hello there.
And if we wanted to run this again multiple times, we could do so.
If I want to do it three times, it should log that three times.
Okay then.
So this way of creating a function is called a function declaration.
We're declaring a function now we can also store functions in variables and invoke them in a very similar
way.
So what I'm going to do is come down here and I'm going to create a const and call this speak.
I'm storing this in a constant because I don't want to overwrite the function later on, so I don't
want this to change.
So I'm going to set this equal now to a function.
We don't give this function a name here like we did up here because the name is now the constant or
the variable, and we add our code block at the end.
Now this is known as a function expression.
Basically, any time you get a variable and set it equal to something, whether it's a function or a
string or a number or something else that is known as an expression, okay?
And at the end of expressions, we should always have semicolons.
So I'm going to put a semicolon at the end of this function.
Now, we don't do a semicolon at the end of this function because this is not an expression.
And this semicolon down here, this is probably one of the only times you're going to see a semicolon
at the end of a code block when we use a function expression.
So then now we have this function stored in this constants.
So inside this function, I'm just going to do something like console dot log and then say good day.
Okay, so how do we call this function?
How do we invoke it?
Well, we invoke it in exactly the same way.
We just say speak and then parentheses is so the name of the constant followed by parentheses to invoke
that function.
So I'm going to comment these three out and save it and preview over here and we can see Good day Now.
Now I'm just going to duplicate this a couple of times.
Save it and we can see we get three good days.
So again, we can call this as many times as we want.
So this is a function expression when we store a function inside a variable and this is a function declaration
when we don't.
Now, most of the time these two different ways of creating functions, they behave the same way.
But there is a subtle difference when it comes to something called hoisting in JavaScript.
Now hoisting is a term that loosely describes how our functions are effectively hoisted to the top of
a file before the rest of our JavaScript actually runs.
So in essence, they're all declared before the rest of our JavaScript and it does this with function
declarations, but it doesn't do this with function expressions.
So what that means is that we could potentially declare a function using a function declaration down
here at the bottom of the file and we could still run these things over here.
Okay, so let me comment out, speak and use greet because what's happening is JavaScript is using hoisting
to hoist the function essentially to the top of the file.
That's a gross oversimplification, but essentially this is what the effect is.
So even though we've defined it down here, it's effectively hoisting it up to the top.
And therefore when we're using it here, we can use it because it's already been defined by that point.
Now, if I save this and run it, we can see all of those greet right there.
So this is still working, even though the function comes after where we call it.
So hoisting works with function declarations, but it doesn't work with function expressions.
So if I take this one now and put it at the bottom and then try to use.
Beak, then this is not going to work because JavaScript does not hoist function expressions only function
declarations.
So if I save this and preview now we get an error.
Speak is not defined.
And that's because by the time JavaScript reaches this and tries to call, speak or invoke speak, it's
not yet been defined.
This has not been hoisted to the top.
So then this might seem like a good idea to use this function declaration instead of function expression
at first, but actually it's not such a good idea to me.
It just seems jumbled up and it doesn't enforce a good coding practice when you're declaring things.
So really I think you should declare something first and then use it to keep a logical flow to your
code.
And if you don't do that, you could end up with a mishmash of functions and calls all over the place.
Therefore, I prefer most of the time to use function expressions like this, which are not hoisted
so that we have to define our functions first at the top before we use them.
So when I'm creating functions in the future, 99.9% of the time, I'm probably going to create them
like this.
