Execution context, Scope chain and JavaScript internals

is defined as the environment in which JavaScript code is executed. By environment I mean the value of , variables, objects, and functions JavaScript code has access to, constitutes its environment. Execution context (EC) this Execution context in JavaScript are of three types: : This is the default execution context in which JS code start its execution when the file first loads in the browser. All the global code are executed inside global execution context. Global execution context cannot be more than one because only one global environment is possible for JS code execution. Global execution context (GEC) : Functional execution context is defined as the context created by the execution of code inside a function. Each function has its own execution context. It can be more than one. Functional execution context have access to all the code of global execution context. While executing global execution context code, if JS engine finds a function call, it creates a new functional execution context for that function. In the browser context, if the code is executing in strict mode value of is else it is object in the function execution context. Functional execution context (FEC) this undefined window : Execution context inside eval function. Eval Execution context stack is a stack data structure to store all the execution stacks created while executing the JS code. Global execution context is present by default in execution context stack and it is at the bottom of the stack. While executing global execution context code, if JS engines finds a function call, it creates a functional execution context of that function and pushes that function execution context on top of execution context stack. JS engine executes the function whose execution context is at the top of the execution context stack. Once all the code of the function is executed, JS engines pop’s out that function’s execution context and start’s executing the function which is below it. Execution context stack (ECS): Let’s understand this with the help of an example: As soon as the above code loads into the browser, JS engine pushes global execution context in the execution context stack. When functionA is called from global execution context, JS engines pushes functionA execution context in the execution context stack and starts executing functionA. When functionB is called from functionA execution context, JS engine pushes functionB execution context in the execution context stack. Once all the code of functionB gets executed, JS engines pops out functionB execution context. After this, as functionA execution context is on top of the execution context stack, JS engine starts executing remaining code of functionA. Once all the code from functionA gets executed, JS engines pops out functionA execution context from execution context stack and starts executing remaining code from the global execution context. When all the code is executed JS engines pops out the global execution context and execution of JavaScript ends. So far we have discussed how JavaScript engine handles the execution context. Now, we will see how JavaScript engine creates the execution context. JavaScript engine creates the execution context in the following two stages: Creation phase Execution phase Creation phase is the phase in which JS engines has called a function but its execution has not started. In the creation phase, JS engine is in the compilation phase and it scans over the function to compile the code. In creation phase, JS engine performs the following task: : Activation object is a special object in JS which contain all the variables, function arguments and inner functions declarations information. As activation object is a special object it does not have the property. Creates the Activation object or the variable object dunder proto Once the activation object gets created, JS engine initializes the scope chain which is a list of all the variables objects inside which the current function exists. This also includes the variable object of global execution context. Scope chain also contains the current function variable object. Creates the scope chain: After the scope chain, JavaScript engine initialize the value of Determines the value of this: ‘this’. Let’s understand how JavaScript engines creates the activation object with an example Just after funA is called and before code execution of funA starts, JS engine creates an executonContextObj for funcA which can be represented as shown below: Activation object or variable object contains argument object which have details about the arguments of the function. It will have a property name for each of the variables and functions which are declared inside the current function Activation object or the variable object in our case will be as shown below: : JS engines will create the argument object as shown in the above code. It will also have the length property indicating the total number of arguments in the function. ArgumentObject Now, for each variable in the function, JS engine will create a property on the Activation object and will initialize it with undefined. As arguments are also variables inside the function, they are also present as a property of the argument object. If the variable already exists as a property of the argument object JS engine will not do anything and will move to the next line. When JS engines encounters a function definition inside the current function, JS engine will create a new property by the name of the function. Function definitions are stored in heap memory, they are not stored in the execution context stack. Function name property points to its definition in the heap memory. Hence, first will get the value of as it is a variable but when JS engine encounters a function with the same name it overrides its value to point it to the definition of function stored in the heap. d undefined d After this JS engines will create the scope chain and will determine the value of . this Execution phase: In the execution phase, JS engines will again scan through the function to update the variable object with the values of the variables and will execute the code. After the execution stage, variable object will look like this: Complete example: Consider the code below. When the above code loads in the browser, JS engine will enter the compilation phase to create the execution objects. In the compilation phase JS engine will handle only the declarations, it does not bother about the values. This is the creation phase of execution context. : In the line variable is assigned a value of , so JS engines does not think of it as a variable declaration or function declaration and it moves to line 3. It does not do anything with this line in compilation phase as it is not any declaration. Line 1 a 1 : As the above code is in global scope and it’s a variable declaration, JS engines will create a property with the name of this variable in the global execution context object and will initialize it with value. Line 3 undefined : JS engine finds a function declaration, so it will store the function definition in a heap memory and create a property which will point to location where function definition is stored. JS engines doesn’t know what is inside of . Line 5 cFunc : This code is not any declaration hence, JS engine will not do anything. Line 13 Global Execution Context object after the creation phase stage: As further there is no code, JS engine will now enter the and will scan the function again. Here, it will update the variable value and will execute the code. execution phase : JS engines find that there is no property with name in the variable object, hence it adds this property in the global execution context and initializes its value to 1. Line 1 a : JS engines checks that there is a property with name in the variable object and hence update its value with 2. Line 3 b : As it is a function declaration, it doesn’t do anything and moves to line 18. Line 5 Global execution context object after the execution phase: : Here, is called, so JS engine again enters the compilation phase to create the execution context object of by scanning it. Line 18 cFunc cFunc As has as an argument, JS engine will add in the argument object of execution context object and create a property by the name of and will initialize it with 2. cFunc e e cFunc e : JS engine will check if is a property in the activation object of . As there is no property by that name, it will add as a property and will initialize with value. Line 6 c cFunc c undefined : Same as line 6 Line 7 : As this line is not a declaration, JS engine will move to next line Line 9 : JS engine finds a function declaration, so it will store the function definition in the heap memory and create a property which will point to location where function definition is stored. JS engines doesn’t know what is inside . Line 11 dFunc dFunc cFunc execution context object after compilation phase: : As this statement is not a declaration, JS engine will not do anything. Line 15 As further there are no lines in this function JS engine will enter the execution phase and will execute by scanning it again. cFunc : and gets the value of 10 and 15 respectively Line 6 and 7 c d : As is not a property on execution context object and it’s not a declaration, JS engine will move to the global execution context with the help of scope chain and checks if a property with name exists in global execution context object. If the property does not exists, it will create a new one and will initialize it. Here, as property with already exists on the global execution context object, it will updates its value to 3 from 1. JS engines moves to global execution context in this case only i.e. when it finds a variable in the execution phase which is not a property on the current execution context object Line 9 a cFunc a a : JS engines will create a property and will points to its heap location Line 11 dFunc Execution context object of cFunc after the execution phase: : As this is a function call, JS engines will again enter the compilation phase to create execution context object. Line 15 dFunc execution context object has access to all the variables and functions defined on and in the global scope using the scope chain. dFunc cFunc Similarly has access to all the variables and objects in the global scope but it does not have any access to the variables and objects. cFunc dFunc Global execution context does not have access to or variables or objects. cFunc dFunc With the above concepts, I guess it will be easy to understand how works in JavaScript. hoisting Scope Chain: Scope chain is a list of all the variable objects of functions inside which the current function exists. Scope chain also consists of the current function execution object. Consider the below code: Here, when function is called from the global execution context, scope chain of will look like this cFunc cFunc Scope chain of cFunc = [ cFunc variable object,Global Execution Context variable object] When is called from , as is inside , scope chain consists of variable object, variable object and variable object. dFunc cFunc dFunc cFunc dFunc’s dFunc cFunc global execution context Scope chain of dFunc = [dFunc variable object,cFunc variable object,Global execution context variable object] When we try to access inside , JS engines checks if is available inside variable object. If it finds value it value. f dFunc f dFunc’s f’s console.log f’s When we try to access variable inside , JS engines checks if is available inside variable object. If the variable is not available, then it will move to variable object. c dFunc c dFunc’s cFunc As variable is not available inside variable object, JS engines moves to variable object. As is available on variable object, it will value. c dFunc’s cFunc’s c cFunc console.log c’s When we try to log value inside , JS engines will check if is available inside variable object. If is not available inside variable object, it will move to the next item in scope chain i.e. variable object. JS engines will check if variable object as variable . Here, variable is not available on variable object hence, it will check the next items in scope chain i.e. variable object. Here is available on variable object and it will console value. a’s dFunc a dFunc’s a dFunc’s cFunc’s cFunc’s a a cFunc’s dFunc’s global execution context a dFunc’s a’ s Similarly, in case of , JS engine will find variable value from global execution object. cFunc a’s does not know that variable exists. Hence if we try to access from it will give error. But, function has access and variable using the scope chain cFunc f f cFunc dFunc c d Closures can be explained using the scope chain context in JavaScript. Other article: An Extensive Guide to Progressive Web Applications Let’s get this ‘this’ once and for all Service Workers Service Workers implementation Virtual DOM in ReactJS Prototypes in JavaScript ‘this’ in JavaScript Object.create in JavaScript Inheritance in JavaScript Create objects in JavaScript Objects in JavaScript