Understand JavaScript Execution Context.
By: Nwafor Jude
Tags: Execution Stack, Call Stack, Javascript Development, Execution Context, JavaScript

Understanding how JavaScript runs your code is the key to becoming a seasoned developer. Execution context is one of the key concepts one has to understand if you are to know how your code runs.

Knowing this will help you to fully understand scope, hoisting, closure, improve your debugging skills and improve your ability to read large code base.

We would approach this concept using lay man words to lessen the complexity surrounding this concept. So, lets have an understanding of lexical environment which will help us to understand execution context. Lexical environment of a code is the physical location of a code in a program.

let me = 'i am inside an environment called me' function whereIsMe() {

let me = 'i am inside an environment called me';

console.log(me);

} console.log(me);

whereIsMe()

In the above code, we have two variables called me; both me is living in two different environments. Looking physically at the code, the first me is living in a global environment and the other me in a function. This represents their lexical environment.

Having known that the environment of a code is important to JavaScript, what the heck is execution context?. In programming, execution means to run your code and context means where or place.

Hence, execution context is a wrapper or an environment that manages your code that is running. So, at a point in time in the life cycle of your program, there is at most one execution context running, that is known as the running execution context.

A new execution context is created whenever control is transferred from the executable code associated with the currently running execution context to executable code that is not associated with that execution context. The newly created execution context is pushed onto the stack and becomes the running execution context.

A bucket or a data structure called call stack is created to keep track of the current execution context and all the execution contexts. The stack puts the current one that is running at the top which is the last to enter the stack. This design pattern is referred to as LIFO meaning last-in first-out.

call stack

We have three execution context in JavaScript viz: Global execution context, function execution context and exec execution context.

Global Execution Context (GEC).

Global execution context is an object wrapper or an environment JS Engine creates immediately a js file is loaded to the browser even when you have not written single line of code.

When a script executes for the first time, the JavaScript engine creates a Global Execution Context. During this creation phase, it performs the following tasks:

Create a global object i.e., window in the web browser or global in Node.js. Create a this object binding which points to the global object above. Setup a memory heap for storing variables and function references. Store the function declarations in the memory heap and variables within the global execution context with the initial values set as undefined.

GlobalExecutionContext : {

GlobalObject: {}

variableEnvironment: {

EnvironmentalRecord: {

//keeps tracks of the environmental variables

a: 'undefined'

b: 'undefinde'

c: <Pointer to Fec for c>

} thisBinding: window || global

outerRef:

}

}

Note: this = GlobalObject only in Global execution context.

JavaScript engine creates the execution context in the following two stages: Creation phase, Execution phase.

In the creation phase JavaScript engine doesn’t execute any code. Rather, it compiles the code by scanning over your program. In the creation phase, JS engine performs the following task:

Creates VariableEnvironment Object: This contain all the variables, function arguments and inner functions declaration information.

2. Creates the LexicalEnvironment: The 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 the global execution context. Scope chain also contains the current function variable object.

3. Determine the value of this: the JavaScript engine initializes the value of this. The value of this can either be the global object or an object containing the function in terms of function execution context.

In the execution phase, JS engines will again scan through your code to update the variableEnvironment variables which was initially set to undefined with the values of the variables and execute the code.

After the execution stage, the variable object will look like this:

GlobalExecutionContext : {

GlobalObject: {}

variableEnvironment: {

EnvironmentalRecord: {

//keeps tracks of the environmental variables

a: 'i have been updated'

b: 3

c: <Pointer to Fec for c>

} thisBinding: window || global

outerRef:

}

}

Function Execution Context (FEC).

This is an environment that is created by JavaScript engine every time we call a function. The Function Execution Context is similar to the Global Execution Context but instead of creating the global object, it creates the arguments object that contains a reference to all the parameters passed into the function.

This keeps track of the number of arguments passed to the function using the length property in the argumentObject. It also follows the same pattern for execution and creation phase we discussed above with global execution context.

variableEnvironment = {

argumentObject : {

0: a,

1: b,

length: 2

}, a: 3,

b: 2,

} FunctionExectionContext = {

VariableEnvironment: {

ArgumentObject: {

0: a,

1: b,

length: 2

}, a: 3, b: 2, outer: <GlobalLexicalEnvironment>,

ThisBinding: <Global Object or undefined>

} }

About The Author

Jude Nwafor is a software engineer @sterling_bank Plc. You can follow me on twitter @thaddydore