Instructor: Okay, so in the last lecture,
we have seen when a new execution context is created,
but what about how, exactly, that happens?
So let's talk about that right now.
Let's start by creating a representation
of an execution context so that we can have
a bit more detail about how it actually works.
First off, as I mentioned in the previous lecture,
we can associate an execution context with an object,
which is what we have here,
and this object has three properties:
the variable object, which will contain function arguments
in a variable declaration
as well as function declarations;
the scope chain, which contains the current variable objects
as well as the variable objects of all its parents;
and "this" variable that we have already seen in action
in the introductory lecture about objects.
All right, so how is execution context actually created?
Let's start with what we already know.
When a function is called, a new execution context
is put on top of the execution stack,
and this happens in two phases:
the creation phase and the execution phase.
In the creation phase, we first have the creation
of the variable object,
and we will talk about that in the next slide;
then, the creation of the scope chain,
and this is a huge topic for itself,
so we'll talk about it in the next lecture;
and lastly, the "this" variable is determined and set.
So basically the properties of the execution context object
that we have here on the left side are defined.
Then, in the execution phase, the code and the function
that generated the current execution context is run
line by line, and all the variables are defined.
If it's a global context, then it's a global code
that is execute it.
So let's now look at the creation of the variable object
in the creation phase.
So this is what happens in the creation of
the variable object.
The argument object is created, which contains
all the arguments that were passed into the function.
The code is scanned for function declarations,
and for each function a property is created
in a variable object pointing to that function.
This means that all the functions will be stored
inside the variable object,
even before the code starts executing,
and this is very important for you to know.
And lastly, the code is scanned for variable declarations,
and for each variable a property is created
in a variable object and set to "undefined",
and these last two points is
what we commonly call "hoisting".
Functions and variables are hoisted in JavaScript,
which means that they are available before
the execution phase actually starts.
They are hoisted in a different way, though.
The difference between functions and variables is that
functions are already defined
before the execution phase starts,
while variables are set up to "undefined"
and will only be defined in the execution phase.
As you remember from the last slide,
the execution phase comes just after the creation phase.
Now, hoisting is something that confuses
many new JavaScript developers,
so it's really important that you understand it right now.
That's why we're going to write some code
in the next lecture, so that we can see this in practice.
So just to recap all of this once again,
each execution context has an object
which stores a lot of important data
that the function will use while it's running,
and this happens even before the code is executed.
All right, let's go to the next lecture
to see hoisting in practice.