Welcome back on Pace Elsworth, and we're on to listen for hoisting hoisting in JavaScript is this idea
that all of the declarations for functions and variables are moved to the top of the scope.
So basically, first thing's first, it's going to read your code to see if there are any syntax errors
or type errors.
Once it does that, it's going to move everything to the top of the scope that's declared.
It's going to set variables to undefined so it won't break things, but it won't return the value either
until that variable set.
You can also call a function before it is declared in the code because the parser for JavaScript is
learning the whole page and prepping everything with the variables and functions declared before anything
is executed.
So let's show you what an example of this looks like.
For example, here we can assign X to the value five, and that's what happens before we declare it.
So we can also find an element and display X is the element, and these are before X is declared.
Let's show you what this looks like for variables and for functions.
All right, so let's do add equals three plus one.
So it's going to be four and then let's declare that variable and we want to see what happens if we
cancel all this before it's been changed.
And we also want to see what happens at various steps of the way, so let's see what happens there.
Let's save it.
And runit.
OK, so first things first, that we notice we can do this with bar and it's hoisted to the top where
we can it and it's undefined and then we modify it and run it again and it's four.
And then once we've declared it, it's also still four.
Will this work with let?
We'll show you.
Let kind of prevents this method of posting, so it's an uncut reference area that you cannot access
add before it is initialized.
Because it does hoist it, it knows that it's Aulet and it knows that we can't access it before it's
been initialized because we're using LET instead of FA.
So we have to get rid of that and now we can control it.
It's undefined, but if we move this value down.
Then we're totally fine.
OK, so let and concern will prevent wasting four variables.
Now let's look at an example of hoisting.
Let's just keep this variable handy.
And then you say this is bar hoisting.
And let's look at an example of function hoisting.
So what we're doing here is actually adding these two together, executing a function that doesn't exist
yet.
So let's add the function down here.
OK, so even though the function was declared later, we were able to control it ahead of time.
So if we do this, we should get four councillor's, the undefined, this port and this port and then
the final one.
Hopes Typo Council dialogue.
There we go.
So if we counsel these out or comment those out and then try again.
That's all we get, this one right here and this we can change to any value we want to seven thousand
sixty one would leave us with sixty eight so you can hoist functions and you can hoist bars, but you
cannot hoist, let or consed.
And this is totally fine just because it's understanding the definitions of the functions and the definitions
of hours before it executes the rest of the code on the page.
So that is bar hoisting and that is function hoisting.
Hoisting is not a feature in every programming language and for the most part, just like we said,
use and instead of are not a whole lot of benefit to using hoisting, it's usually the preference to
actually declare your global variables at the beginning of your scope anyway.
So the recommendation is just to put your variables at the beginning of your code if you can manage
it.
And that's it for hoisting.
In the next lesson, we're going to go over a little bit more into declaration and assignment and learn
a little bit more about those parties who might.