It's time to discuss one of the important and waited things in JavaScript, which is frequently confusing
and unknown, especially for new job developers.
I'm going to talk about hoisting.
There are a lot of online resources where you can find information about what hoisting is, and most
of them tells us that hoisting is the same process as they were hoisting itself means.
But actually it's not quite correct at first.
Let's go back to our text editor and write some simple example.
Create a variable A equals to ten and then below grid function.
B.
And then return, let's say, 20.
Let's log in council.
The Deferrable A and then call function B might consider to be.
Reload and we have 10 and 20, the result, what you were expecting.
So, as you already know, JavaScript engine reads and executes code line by line.
It starts from top.
And when it comes to cancel that log aid, the engine knows that there exists variable AI with its value
and therefore we get in console 10.
The same happens with function when the engine is considered log be it knows that there exists function
B which returns the value to there is not something new or unusual until we move this code up and write
them before variable and function B, then something weird happens.
You see that we have undefined and then 20.
So what has happened?
We got undefined instead of 10.
You know that undefined is a primitive data type.
So it is a value if JavaScript engine executes code line by line, as you already know, and at first
it finds console dot log a, then how does it know that this variable exists?
And at the same time it's more word that variable A has a value undefined.
It would be more logical to get an error that tells us A is not defined, which is actually different
from undefined and it means that the variable doesn't exist.
But instead of that we get undefined.
Something different happens with function at first engine finds in location or function B and it gives
us a value 20, which is correct.
But the question is that how does the engine execute the function before it actually reach this line
of code?
The answer on those questions is in hoisting.
In order to understand better what hosting is, let's talk deeper about how the code is actually executed.
You already know what is an execution context and how it works.
So what the code is running, the execution context is created and it has two stages creation and execution
in creation stage, global object.
The special key, this and scope chain is created.
Syntex Pass or go through the code, and at this time, JavaScript engine creates memory space for variables
and functions a lot.
This happens before the engine actually starts executing the code.
So when JavaScript engine creates memory space for variables, it assigns to all those variables the
value undefined as a default.
And remember that this happens always in creation stage.
As for the functions in creation stage, the engine set up memory space and for them nothing is changed.
Functions don't get any temporary values.
Actually, all the stuff in creation stage, I mean, to set up the memory space for variables and functions
is called hoisting.
Sometimes you may hear or find the definition of hoisting like that variable and function declarations
are physically moved to the top of your coding, but this is not what really happens.
Your code doesn't move physically.
What does happen is that variable and function declarations are put into memory during the creation
phase, but stays exactly where you typed it in in your coding.
After the creation stage starts, the second phase, which is execution in this stage, JavaScript engine
executes code line by line and the variable AI, which had as a default undefined, gets its value 10.
All right, let's switch back over and go to brackets right below Castlewood, log A.
Then refresh, we have undefined 20 and 10 when JavaScript engine moves to execution stage and reads
this line of code, it checks the memory space for this variable and finds that at this point has the
value undefined.
But when it reaches this line of code where variable equals ten, then it change the value and define
into ten.
And after another, cancel that log eight.
We got 10.
All right, if we use function expression, I mean, if we assign it to the variable and then reload,
we will get an error, which tells us that the B is not A function, because at this point, Variable
B is undefined as well.
If we get rid of the parentheses, then we will get undefined.
In order to avoid such unexpected results and errors, remember that it's always a better practice to
invoke functions and use variables after their declarations.
OK, let's use another example in order to make it clearer and use in this case, if else statement
so right.
If then as the condition.
Right, just through because we need the condition to be true, then instead the color braces create
variable aid and the right equals the ten.
Then inside L's statement create another variable babi equals to 20.
And below, lock them in Castle, right, Castle, that log a.
And then, B, reload the page and you see that we have ten and undefined.
We know that if the condition is true, then the block of code inside if it's executed.
So here we have true and therefore we got the value of variable a ten.
But at the same time, when the condition of if is true, then the block of code inside our statement
is not executed.
In the creation phase, JavaScript engine has set the values for variables and be undefined.
So when the second stage was started, I made the execution.
Then because of that, the condition in its statement was true.
Only this line of code was executed and we got ten.
But this line of code has never been executed and for variable B, the value undefined was remained.
If we change the condition through into false.
Then.
We will get at first undefined and then 20, because the block of code inside each statement is not
executed, but in our statement it does.
Therefore, we got undefined and 20.
All right, the hosting for many developers is confusing or maybe unknown behavior of JavaScript.
So if you don't understand it, well, your code may cause errors and bugs and to avoid them.
Remember that you need to declare all variables at the beginning of every scope and invoked function
expressions after their declarations.
OK, let's move on.