What is execution context and how does it work?

What is Execution Context?

In JavaScript, an execution context represents the environment in which code is executed, including variables, scope, and the call stack. It plays a crucial role in managing the code's runtime behavior

There are three types of execution contexts in JavaScript:

1. Global Execution Context

2. Function Execution Context

3. Eval Execution Context

Today we will discuss about Global and Function execution context, at present eval execution context is rarely used and is also considered a bad practice for modern javascript due to security concerns.

let’s see, how the below code runs in the execution environment:

var name = “front end ninja bootcamp”

function courseDetails(i_name) {

return name + "i_name";

}

let output = courseDetails("by Sahan");

console.log(output);

1. Global execution context:

Global execution context will be going through two-phase:

• Loading/creation Phase

• Execution Phase

#1 During the loading phase, it accomplishes 4 things:

• it creates a global object, global for nodejs and window for browser

• create a global variable named "this", denoting the window object

• create memory space for all variables and functions

• define default value "undefined" for variables and store function declaration at heap storage

Global execution context creation/loading phase:

• window: Global Object

• this: window

• name: undefined

• courseDetails: fn()

• output: undefined

#2: At the execution phase javascript engine executes code line by line:

Global execution context (Execution) phase:

• window: Global Object

• this: window

• name: "front end bootcamp"

• courseDetails: fn()

• output: courseDetails(i_name)

1. Function execution context

For every function call or invoke JS engine will create a function execution context, and function execution will go through the same process as the global execution context. The only difference is, that instead of creating a window global object it will create an argument object which will bear the reference of the parameter pass-by function.

courseDetail function execution context (Creation Phase)

• arguments: Local Object

• this: window

• i_name: undefined

Here, it creates an argument object, and this denotes the global window object also it defines the default value to undefined for all variables.

courseDetail Function Execution Context (Execution Phase)

• arguments*: Local Object*

• this*: window*

• i_name*:*by Sahan

Whenever the return statement comes up the function execution object will run away.

Then, Ultimately Global execution context (Execution Phase) show the output:

• window: Global Object

• this: window

• name: "front end ninja bootcamp"

• courseDetails: fn()

• output: front end ninja bootcamp by Sahan