Male Voice: So Hoisting may sound a bit confusing to you,
but it's really not, believe me.
So let me prove it to you by writing some code.
So once again I have some starter code for you
which I put here on my Desktop.
So let's just go to our text editor
and open up the project.
And in my case, it's Brackets.
And I have Brackets and Google Chrome here side by side,
such as we had before.
So incase you're using Brackets, just hit this button here
and then hit Open Folder,
and in my case it's here on the Desktop.
So I'm just going to open this project and here we are.
So in this project, I have once again
our simple HTML file, which is this bare construction
of the HTML file just the structure.
At this time I already have included the script,
which is also here already.
And I have also already set the stage here for this lecture.
Okay, so I'm just going to use some very simple functions
here because I just want you to focus
on how everything works and not exactly
on what the code is doing.
Alright, so let's start by writing a simple function
and we can actually use the one we have been using before.
So, the calculate age function.
And remember, we have been writing it like this:
calculateAge and then year.
And this time, we don't even want to return anything.
I'm just gonna console log and result to the console.
So 2016 minus the year.
Very simple, but it's enough for us.
So this is how we've been doing it up until this point.
So we first declare the function and then call the function.
So I'm going to use calculateAge and let's say 1999,
which is be John's birth date.
And now I'm going to open up our file.
Our HTML file, and here we go.
And the console.
So I told you in the last section,
that we can do Inspect to open the console,
but we can also come here to the View Menu
in Google Chrome Developer and then the JavaScript Console.
Which is the same as hitting this shortcut,
so Alt + Command + J on a Mac
and probably Alt + Control + J on a PC.
Alright, and here we already have the result.
Okay, so this is the way that we have been doing things,
but with what we learned in the last lecture,
we can also do it the other way around, right?
Let me show it to you.
I'm going to delete it, and use the function here
before I actually declare it.
Let's see how this works out.
CalculateAge and let's now put 1965 for example,
and if I now reload this, then it still works.
Okay, and this is what I've been telling you about
in the last lecture.
So this is Hoisting.
So in the creation phase of the execution context,
which is, in this case, the global execution context.
The function declaration calculateAge is stored
in the variable object and even before the code is executed.
Right?
And this is why when we then enter the execution phase,
the calculate age function is already available
for us to use it.
So we don't have to first declare the function
and then use it, but we can also first use it like this
and only later in our code declare it.
Now remember another thing that I said in the last lecture,
which was that this only works for function declarations
but there is also something called Function Expressions.
Right?
So let's see how this works out with function expressions.
So let's write another function as function expression.
And this is how we do it.
So we declare a variable and now we're going to reuse
the function that calculates the years
that we have left until retirement
based on the year of birth.
So I'm going to call it simply Retirement.
And then function and the perimeter here.
Okay and we just want a console log here the result
and the way we have been doing this
is to make sixty-five minus the age.
So it would be sixty-five minus the age
and the age is just 2016 minus the year, right?
Okay, and we need the parenthesis here
because we want this part to be calculated first,
and only after that we want then sixty-five
minus this part of the operation.
And remember if we group something together with parenthesis
it gets the maximum precedence
in the operation precedence table, right?
So this is absolute priority.
Okay so let's now use this first, like this.
So retirement 1990,
and hit reload, and here we go.
So for someone who was born in 1990
they have thirty-nine years left for retirement, right?
So now let's try and see what happens
when we do it like this.
So the way we have done it up here.
So I'm gonna go ahead and delete this,
and try to first call the function
and only after that to write it in the code.
So retirement and let's try again 1965,
and then let's use it.
Okay, and now this time it does not work.
So this is what we expected right?
And once again the reason for that
is because this function is not a function declaration
but a function expression and Hoisting with functions
only works for function declarations
which is what we have here, right?
Okay, great.
So in order to make this work again,
I'm just going to come and add it here,
but I will leave it in the code
so that you can have it for yourself
and download this code at the end.
Okay so that is function Hoisting.
Now remember that Hoisting also happens with variables
but in a different way.
So let's see some examples about that.
So here we have functions, and take away this space here.
So here, variables.
So let's once again create a variable here.
Now we'll create an age variable.
So age and set it simply to twenty-three,
and just to check everything works,
let's console log this variable just to see what happens.
Okay twenty-three, exactly as expected.
Now what happens if we use this variable,
before we actually declare it in our code.
So let's see what happens in this case, console log age.
So again we're trying here to use this variable
before we declare it in our code.
So I'm sure you know by now what's going to happen.
So here we go.
Alright, so we have undefined,
and that's exactly how Hoisting works with variables.
Because remember in the creation phase
of the variable object what happens is that the code
is scanned for variable declarations
and the variables are then set to undefined.
So imagine that we wouldn't even have
this variable declaration here.
If we then attempted to use the variable
we wouldn't get undefined, but we would get....
Exactly, an error.
Because then we wouldn't have any definition
and JavaScript would not even know this variable.
But in this case, JavaScript knows that there will be
an age variable, we simply don't have the value yet.
And that's also the reason why
it's defined exactly as undefined.
Because in one of the first lectures we saw
that variables that don't have a value yet,
will always have the data type undefined.
Okay so let's now take this one step further,
and write a small function called foo.
Which don't accept anything.
All we're going to do here is to create our own age variable
right inside this function.
And let's set this one to sixty-five for example.
And then console log.
Console log age in here.
Then call the function like this.
And then console log the age again.
So what do you think is going to happen in this example?
Let's find out.
Okay so these are the results
of these two console logs here, right?
So, line twenty-six and twenty-nine.
So twenty-six and twenty-nine.
So why does this console log here
print the age of sixty-five
and then this console log here
prints the age of twenty-three?
So it's actually pretty simple,
and it's because this age variable here
gets stored in the global execution context object, right?
So in the variable object
of the global execution context object.
Sounds a bit confusing right?
But if you go through the last lectures again,
that will make a lot of sense.
So again this age variable is declared
in this global execution context object.
And then this foo function here gets its own
execution context object in which we can also store
an age variable, and it can be the same name.
It really doesn't matter because these are
two completely different variables.
This variable age is defined in the variable object
of the execution context object of the foo function
while this age variable is defined in the variable object
of the global execution context object.
So each one gets its own variable object.
So we have two different variables,
and so the results when we print them are different.
And we can see that the Hoisting
was indeed also the same way.
Console.log
So if we attempt to print the age before we declare it here
then we will have also undefined.
So undefined comes here for line twenty-five, which is this.
Okay so I hope Hoisting is a lot more clear to you now
and the most important use case for Hoisting
is not even variables, but it's the fact that we
can use function declarations
before we actually declare them in our code.
And that's the biggest takeaway from Hoisting, actually.
So this is something very useful,
and something that confuses new JavaScript developers.
So I hope that you understand it with these lectures.
So you can take another look at the code,
or even re-watch some of the lectures that we've just seen
and then after that, once you're ready,
then let's just move on to the next lecture.