In this post, I want to discuss one of the most important topics, which in a way is connected with the issue from the previous part.
However, before we get to it, I want to explain quickly what Invocation means in JavaScript terminology

Invocation

Here we have one of those definitions that don't take too long to describe.
The invocation (of a function) is simply a running a function. In JavaScript, this is done by using parentheses: ().

Let's look at a simple example.

We have in the above-mentioned example two functions: first and second.
It's easy to notice that the function first is empty, but the function second is invoking our first function.
At the very end, the function second is invoked.

Execution Stack

Here we have another simple definition. Execution Stack is what the second part of the term indicates. A stack. Imagine the well-known LEGO blocks. If we started putting a block of Lego on top of the previous block to build a tower, we would get such a stack, a stack of LEGO blocks. However, how is it useful for us?

Let's look again at the script above. With the existing knowledge, we know that:

At the very beginning, Global Execution Context is created.

  • Thanks to Global Execution Context that was created, we have a special variable: this, Global Object, which in our case is a window object.
  • The code is read line by line. The function first and the function second have been saved in memory. Remember that this is not synonymous with invoking them.
  • The last line invokes the function second.
  • Now another Execution Context is created. It is placed over the Global Execution Context, as in the case of building a tower with Lego blocks. It looks like that:

 

  • Then we see that the invocation of the function second invokes the function first. The result is the creation of another Execution Context and placing it on top of our stack.

 

Along with how the JavaScript engine works, there are several rules:

  • The most important is that what is on top is currently running.
  • Every time you invoke or execute a function in JavaScript a new Execution Context is created and put on top of Execution Stack.

  • Every Execution Context comes with its own space for variables and functions.

  • As we know already know the code is executed line by line. But when the new function is invoked like in an example a further code in that Execution Context will not be executed. Instead, another Execution Context (of newly invoked function) will be created. And when everything is done in newest Execution Context, it is going to be popped out of the stack and go back to the previous one.

Now thanks to the information contained in this part and the previous ones, you will know what is going on and how it happens. What and when is created or executed.

Next Post

In the next post, I will talk about Function Execution Context and Variable Envoronments