Who converts code into web page?
Web browsers - browsers can run the code and create the web pages. Inside web browsers, we have something called javaScript engine which executes the javaScript code. Browser reads through HTML and any javaScript code encountered will be sent to JS engine.
Execution Context:
JavaScript engines creates an environment for executing javaScript that is called execution context. Execution context contains the code that is currently running and everything that is needed for that code to execute.
There are types of Execution contexts in JS:
- Global Execution Context
- Function Execution Context
Global Execution Context (GEC):
JavaScript engine initially creates a default execution context while running the JS code file. This default execution context/GEC will execute all the JS code that is not inside functions.
For every JS file, there will be only one GEC.
Process Flow:
- GEC is created
- GEC is pushed into call stack
- Code executes in GEC
- GEC is popped out of call stack
- GEC vanishes
Note: A call stack is a mechanism for an JS Engine to keep track of its place in a JS file.
We can observe something called as anonymous in the call stack which is nothing but GEC.
Function Execution Context (FEC):
When a function is invoked during the JS code execution, JS engine will create another execution context known as FEC within the GEC. New FEC is created whenever a function is invoked to execute the code defined in function.
Process Flow:
- GEC is created
- GEC is pushed into call stack.
- Code executes in GEC
- If any function is invoked, FEC is created
- FEC is pushed into call stack
- Code inside function gets executed
- FEC is popped out of call stack
- FEC is vanished
- Code execution continues in GEC
- GEC is popped out of call stack
- GEC vanishes
When the function ex is invoked, it is pushed into call stack on top of GEC (anonymous).
Execution Contexts In detail:
Execution Contexts has two phases:
- Creation Phase
- Execution Phase
1. Creation Phase:
Creation Phase is associated with the creation of Execution Context Object(ECO). ECO contains all the data required by execution context during the code execution.
The properties of ECO are defined and set in three stages in creation phase.
- Creation of variable object (VO)
- Creation of Scope Chain
- Setting
thiskeyword
Creation of variable object (VO):
Variable Object stores variables and functions defined in the code. Variables declared with var keyword will be added as property(with value undefined) to the VO. For functions, a new property is added to VO pointing to that function(reference is stored).
On the other hand FEC does not construct a VO. Rather, it generates an array-like object called the 'argument' object.
Note: This process of storing variables and functions in the memory gives us a new feature called hoisting. That is variables and functions are accessible in the code even before they are declared.
Creation of Scope Chain:
Scope is nothing but how a piece of code is accessible to other parts of the code.
When a function is defined in another function, the inner function has access to the code defined in that of the outer function, and that of its parents. This behavior is called lexical scoping. However, the outer function does not have access to the code within the inner function.
Each Function Execution Context creates its scope: the space/environment where the variables and functions it defined can be accessed through a process called Scoping.
While running the code, JS engine will check for variables within its FEC scope. If there is no match, then it checks the FEC parent's scope and this process of checking parent scope goes on until JS engine finds out the variable. This idea of the JavaScript engine traversing up the scopes of the execution contexts, that a function is defined in, to resolve variables and functions invoked in them is called the scope chain.
Setting '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.
this in The Global Context: In the GEC (outside of any function and object), this refers to the global object, which is the window object.
this in Functions: In the case of the FEC, it doesn't create the this object. Rather, it get's access to that of the environment it is defined in. Here that'll be the window object, as the function is defined in the GEC.
In objects, the this keyword doesn't point to the GEC, but to the object itself. Referencing this within an object.
2. Execution Phase:
This is the stage where the actual code execution begins. VO contains variables with the values of undefined. If the code is run at this point it 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 converted to executable byte code, and finally gets executed.
🙏Thanks for reading my blog✍️.
Happy coding journey🙂