How JavaScript Code Gets Executed
The browser doesn't understand the high-level JavaScript code that we write in our applications. It needs to be converted into a format that the browser and our computers can understand – machine code.
The browser's JavaScript engine then creates a special environment to handle the transformation and execution of this JavaScript code. This environment is known as the Execution Context. The Execution Context contains the code that's currently running, and everything that aids in its execution. During the Execution context runtime, the variables and functions are stored in memory, executable byte-code gets generated, and the code gets executed.
Execution Context types
There are two kinds of Execution Context in JavaScript:
Global Execution Context (GEC)
Functional Execution Context (FEC)
Global Execution Context (GEC)
Whenever the JavaScript engine receives a script file, it first creates a default Execution Context known as the Global Execution Context. The GEC is the base/default Execution Context where all JavaScript code that is not inside of a function gets executed.
NOTE: For every JavaScript file, there can only be one GEC.
Functional Execution Context (GEC)
Whenever a function is called, the JavaScript engine creates a different type of Execution Context known as a Function Execution Context (FEC) within the GEC to evaluate and execute the code within that function.
NOTE: Since every function call gets its own FEC, there can be more than one FEC in the run-time of a script.
How are Execution Contexts Created?
The creation of an Execution Context (GEC or FEC) happens in two phases:
- Creation Phase
- Execution Phase
CREATION PHASE
In the creation phase, the Execution Context is first associated with an Execution Context Object (ECO). The Execution Context Object stores a lot of important data which the code in the Execution Context uses during its run-time.
The creation phase occurs in 3 stages. These stages are:
Creation of the Variable Object (VO)
Creation of the Scope Chain
Setting the value of the this keyword
CREATION PHASE : Creation Of The Variable Object (VO)
The Variable Object (VO) is an object-like container created within an Execution Context. It stores the variables and function declarations defined within that Execution Context.
In the GEC, for each variable declared with the var keyword, a property is added to VO that points to that variable and is set to 'undefined'.
Also, for every function declaration, a property is added to the VO, pointing to that function, and that property is stored in memory. This means that all the function declarations will be stored and made accessible inside the VO, even before the code starts running.
The FEC, on the other hand, does not construct a VO. Rather, it generates an array-like object called the 'argument' object, which includes all of the arguments supplied to the function. Learn more about the argument object here.
CREATION PHASE : Creation of The Scope Chain
After the creation of the Variable Object (VO) comes the creation of the Scope Chain as the next stage in the creation phase of an Execution Context.
Scope in JavaScript is a mechanism that determines how accessible a piece of code is to other parts of the codebase. Scope answers the questions: from where can a piece of code be accessed? From where can't it be accessed? What can access it, and what can't?
Each Function Execution Context creates its scope: the space/environment where the variables and functions it defined can be accessed via a process called Scoping.
CREATION PHASE : Setting The Value of The "this" Keyword
The next and final stage after scoping in the creation phase of an Execution Context is setting the value of the this keyword.The JavaScript this keyword refers to the scope where an Execution Context belongs. Once the scope chain is created, the value of 'this' is initialized by the JS engine.
EXECUTION PHASE
Finally, right after the creation phase of an Execution Context comes the execution phase. This is the stage where the actual code execution begins.
Up until this point, the VO contained variables with the values of undefined. If the code is run at this point it is bound to return errors, as we can't work with undefined values. At this stage, the JavaScript engine reads the code in the current Execution Context once more, then updates the VO with the actual values of these
variables. Then the code is parsed by a parser, gets transpired to executable byte code, and finally gets executed.
The Call Stack
The Call Stack keeps track of all the Execution Contexts created during the life cycle of a script.
JavaScript is a single-threaded language, which means that it is capable of only executing a single task at a time. Thus, when other actions, functions, and events occur, an Execution Context is created for each of these events. Due to the single-threaded nature of JavaScript, a stack of piled-up execution contexts to be executed is created, known as the Execution Stack.
When scripts load in the browser, the Global context is created as the default context where the JS engine starts executing code and is placed at the bottom of the execution stack.
The JS engine then searches for function calls in the code. For each function call, a new FEC is created for that function and is placed on top of the currently executing Execution Context.
The Execution Context at the top of the Execution stack becomes the active Execution Context, and will always get executed first by the JS engine.
As soon as the execution of all the code within the active Execution Context is done, the JS engine pops out that particular function's Execution Context of the execution stack, moves towards the next below it, and so on.
Top comments (0)