In previous lectures, we have referred what the execution context is and how the global execution context
is created as a default when the page is loaded in this lecture, I'm going to consider what the execution
context and the execution stack are.
As I remember, when the HTML page is loaded in Web browser, then the global execution context is created
and then it creates global window object.
And the special keyword, this.
All this stuff happens before the JavaScript code starts executing.
Now let's see what happens when the JavaScript engine actually executes the code and how execution's
tag is created.
All right.
Suppose that we have some JavaScript code variable for its name, which is logged in console, then
two functions and B, below a function, A code.
And then we have another variable last name and insert function A function B is called.
Let's describe step by step how this code is executed.
At first, when the page is loaded, as remember, global execution context is created and it's the
first member of executions attack that the global window object and this will be created.
After that, Syntex parser will check the code syntactically line by line, and if it's valid, then
engine will start execution the code line by line.
You see that variable and functions are created lexically on global level.
So the engine will start from the very first name.
Then we have that lock and the first result after execution, these two lines will be gone.
Then the engine will continue.
And because of that, functions are not invoked yet.
It won't execute the code in Sadikoglu races until it switches to the line of code where a function
is called.
So the engine invokes function AI and therefore new execution context is created by the function A.
In this case, Function A is an active mode, and its execution context is second member of the execution
stack.
Up to that, the engine executes the code inside function eight and we get the results.
Hello.
Then the function B is called.
It means that new execution context is created by the function B, which is in active mode at this point,
this execution context is at the top of the execution stack.
Inside the races, we have cars that look high and therefore will get the result high.
OK, after the ending of the execution of Function B, its execution context will be gone because of
that function, A doesn't have any line of code to execute that its execution conscious will be gone
as well.
After these steps, global execution contests will continue executing the rest of the lines of code
where we have variable last name, which is locked in council, and so it will be a lost output in console
and will get Smith.
All right, in order to get this, well, I'm going to demonstrate some practical examples.
Let's go back to our text editor and create a function function A.
Down inside the Dakota races, let's create variable name equal John.
And luggage in Castle.
Costel Deathlok Nade.
That's copied and pasted twice.
And that change the names of the functions and also names of the variables, right, Bob?
And that Nick.
And then call the function a write below A with parentheses.
Inside the function A, let's call function B, but write it up to a variable name and in the same way
inside the function B, let's call function C.
Before we run them in council, I want you to think about what the results will be.
I mean, what will be the sequence of the names?
So as I remember at first, JavaScript engine will invoke function a useful function, A function,
B, it will be called, and then inside function B, function C will be called.
So you may expect the following result.
John, Bob and Nick.
That's without an AC that we have the opposite Nick, Bob and John.
OK, let me explain what has happened and once more, consider how the execution stack works.
So when the page is loaded, global execution context is created.
Dan, as we said, JavaScript engine invokes Function A, which creates its execution context that the
block of code inside A is executed line by line.
So for us, we have variable name John and then the function B is called.
So before the name John is out to put it in council function B, it will create its execution context
and a block of code inside.
Function B starts execution.
Inside function B, we have variable name pop, and in this same way before Bob is outputted in council
function C is called, which creates its execution context as well.
And it's the last member of the execution stack.
Because of that, we don't have any other function to invoke inside function, see, therefore the block
of code of the function will be executed where we have variable name Nick locked in council.
So here we will get our first output Neek.
And the execution context of functions will be gone.
After that JavaScript engine goes back to execute the rest of the lines of Function B, which is in
an active mode at this point, so it executes console dialog name and we get the second output.
Bob?
That in the same way, execution context of Function B is gone and JavaScript engine goes back to the
function A, which is in Excel mode at this point, it executes console, the clock name and we get
the third output, John, as the last one.
After that, the execution context of Function A. is gone.
Because that the whole code was executed and nothing is currently running, the global execution context
will be gone to.
All right, the last and interesting thing I want to show you is that execution style has its limit.
So let's go back to your text editor, get rid of this code and create a simple function.
Call it a.
And that's invoked dysfunction in a standard way.
And also call it inside, it's curly braces.
With all the peach and acid that we have an error which tells us that maximum called stack sizes exceeded.
So when we wrote a outside function, it has called function first time and then a inside the code of
races has started calling the function again and again infinitely.
Because of that, each JavaScript engine has its limits for execution style.
Therefore, we got an error.
All right, this was all about execution context and execution style.
I hope that it makes sense for you and you really understand it well, because those are one of the
main concepts of how JavaScript works behind the scenes.
Let's go ahead.