Introduction
Execution context is an abstract concept describing the environment within which JavaScript code is executed. The execution context will dictate if a variable, object, or another block of code is accessible or not. There are two types of execution contexts: global and function. Let’s examine the global execution context first.
Global execution context
The global execution context is the default execution context. Variables and other blocks of code that are not within a function are executed inside the global execution context. The global context is attached to the window object and there is only one global execution context throughout code execution. For example:
let greeting = 'hello'; console.log(greeting === window.greeting); true
The global variable greeting is a property of the global window object. Therefore, true
is returned. The global execution context therefore, does the following:
1. Creates the window object as the global execution context
2. Creates a reference to the window object using this
Function execution context
The code within a function is executed within a function execution context. There are two phases concerning the function execution context:
1. Creation phases
2. Execution phase
Let’s discuss these starting with the creation phases.
Creation phase
When a function call is encountered, the creation phase begins. This phase will setup up
everything for execution. At this point the JavaScript engine has called a function but not yet executed it. A couple of things happen during the creation phase:
1. An activation object is setup: Memory is set up in the activation object. This is a
special object which contains all the variables defined within the function, the
arguments object for the function, function arguments and any inner functions
declaration inside the main function
2. Scope chain is created: The scope chain is a list of all the variables within the
function. This also includes all the variables in the global scope. It forms a
connection to the outer environment.
3. Create a this context: The value of this is initialized after the creation of the scope
chain
Hoisting is an important part of the creation phase. During the creation phase memory is
setup for all variable and function declarations to be saved. Therefore, before execution the JavaScript engine already has a reference to variable and function declarations. This is how you have access to variables before they are declared. For example:
console.log(a); //undefined var a = 5;
The variables are initialized in memory with a default value of undefined during the
creation phase. This is why you are able to access a before its declaration. Variables
declared with let and const are not assigned any initial values and trying to access them
before declaration results in a ReferenceError:
console.log(a); //ReferenceError: can't access lexical declaration 'a' before initialization let a = 5;
The entire body of a function statement is hoisted, therefore you have access to the entire function statement before its declaration:
sum(1);
function sum(x){
console.log(x + Math.floor(Math.random() * 10));
}
The entire body of function sum(x) is available before it is declared. Now moving on let’s
briefly discuss the execution phase of the function execution context.
Execution phase
During this phase, code is parsed line by line by the interpreter. The variable object is
updated with the values assigned to the variable by a user. And function calls are executed. If a new function call is encountered, it will stop executing the current function and the creation of a new execution context for that function will begin. A new outer reference to the immediate execution context will be setup.
