What are Execution Stack and Execution Context
Essential Concepts of JavaScript
Bu yazıyı Türkçe olarak buradan okuyabilirsiniz.
In this blog post, and probably in the next few articles, I will try to cover the basic concepts of JavaScript and explain them to you in their simplest form.
When a JavaScript application is run, a data structure called Stack is used to hold the functions called and the information they store, and this is called the Execution Stack. Stack data structure works with LIFO (Last in First Out) logic and has a certain limit. To understand this structure, let’s think in this way. Let’s say we have a box and plates. Suppose we can only move one plate per operation. Now let’s put these plates into the box one after the other.
Later, when we want to get the first plate we placed, we have to take the plates out of the box in order and one plate at each step. Let’s call the process of putting the plates into the box as “push”, to the unboxing process as “pop”. We can briefly summarize the stack structure like this.
Now let’s go back to the JavaScript side and let’s see what exactly is kept in the Execution Stack.
Execution Context:
A definition like the structure in which all the information defined in a function is kept would be correct.
- Global Execution Context
Even when we run a JavaScript application in which we have not written any code, the structure created by the JavaScript is called the Global Execution Context. Every time the JavaScript application is started, the Global Execution Context is first pushed into the Execution Stack and the Global Object is created. The name of the object in the browser is called “window” and can be accessed with the “this” keyword. - Functional Execution Context
A special place is allocated in memory for each function executed and all information of this function is kept here. As soon as the functions are executed, its Execution Context is created and pushed to the Execution Stack. When the function finishes, the Execution Context belonging to this function is popped and removed from the stack.
function foo(){
console.log('foo');
baz();
}function baz(){
console.log('baz');
}foo();// output
// foo
// baz
To summarize what happened above, when our sample JavaScript code is run, it first creates the Global Execution Context and the Global Object to be kept in this context, and this is pushed into the Execution Stack. Then the function named foo is called with foo() and the Execution Context of this function is created and pushed into the stack. After writing “foo” on the screen, the function named baz is called with baz(). Since we haven’t left the scope of the foo function yet, the new Execution Context created for the baz function is pushed over foo into the stack. (see step 4) After that “baz” is printed on the screen and the scope of the function named baz is exited. For this reason, the Execution Context of baz first popped from the Execution Stack. Later, due to the foo function scope is exited, its context is popped from the Execution Stack. Since there is no more code to run later, the Global Execution Context will pop up from the stack and the program will terminate.
In its simplest form, we can summarize the Execution Stack and Execution Context in this way. In my next article, I will try to explain the creation stages of Execution Context and the Lexical Environment. See you here again soon.