Voiceover: The last lecture was a conceptual overview
about what happens in the JavaScript engine
once we run our code, how it's parsed
and translated into machine code.
Now let's focus on the order in which the code is run,
and for that, we need to talk about execution contexts.
All JavaScript code needs to run in an environment,
and these environments are called execution contexts.
So you can imagine an execution context like a box,
or like a container, which stores variables,
and in which a piece of our code is evaluated and executed.
We will go more in depth about this in the next slides.
Now, the default execution context
is always the global context.
Remember that I said that an execution context
is where a piece of code is executed.
Well, in a global context, all the code
that is not inside of any function is executed,
and this is very important.
So, again, the global execution context is
for variables and functions
that are not inside of any function.
Now, you can also think
of an execution context as an object
Remember objects from the introductory lectures?
So the global execution context is associated
with the global object, which in case of the browser
is the window object.
So everything that we declare in the global context
automatically gets attached
to the window object in the browser.
And it works like this: declaring a variable called
lastName or window.lastName is the exact same thing.
It's like lastName is a property of the window object.
And as we talked about in the intro lectures,
properties are just variables attached to objects.
So this makes sense, right?
And I know this is a lot to absorb,
so I really encourage you to take some notes
about all these things, to reference them later.
And of course you can also watch these lectures again,
when you feel more confident with your coding.
So remember the global execution context is for code
that is not inside of any function.
But what about code that is in functions?
It's actually very simple.
Each time that we call a function,
it gets its own brand-new execution context.
Let me show you that by an example.
So this first declaration is not in any function,
So we are in a global execution context here,
as the red arrow down there shows on the right side.
So this variable is stored in a global object.
We will see how exactly that works in the next lecture.
Next up, this function declaration
is also in a global context.
So we're still here in the same execution context.
And the same about the second, and the third function.
And this is where the fun begins,
because here is where we call the very first function.
And as I mentioned before,
a new function gets its new execution context.
And what happens is that this new context is put
on top of the current context,
forming the so-called Execution Stack.
So for the duration of this first function call,
the execution context for that function
becomes the active context in which the code is executed.
Okay, so let's get inside the first function with our arrow.
So this a variable will now get stored
in the execution context for this function,
and not anymore in the global context.
And now we call the second function,
and I'm sure you can guess by now what will happen, right?
So once again, a new execution context will be created
and put on top of the execution stack.
And here we go, this is now the active context.
Okay, so now variable b is stored
in this new execution context.
And now we call the third function,
and once more, a new execution context is created
and put on top of the stack, as we already know.
So now, inside of the third function we just have
these two variable declarations, and nothing more.
So this function has now done all its work,
and so we say that the function returns.
So what happens to its execution context?
It just gets removed from the top of the stack.
Very simple.
And then, the context of the second function,
which called the third function,
is back to being the active context.
And we go back to the second function.
So this z variable gets stored
in the currently-active context,
and after the function returns,
the context also pops off the stack.
So, back to the first function now.
And here the same thing.
The function is done, it returns, and so we exit it,
and the execution context pops off the stack.
And like this, we executed all three functions,
created three execution contexts,
and popped them off the stack when the functions returned.
I hope that all of that made sense to you.
Now, you may ask,
"How are all these execution contexts actually created?
"And why is this so important?"
And the answer is in the next lecture,
so go watch that one right now.