HOW WORKS

By
Sivakumar G.R.
 WHAT HAPPENS TO YOUR
CODE ?
• We must know how the JavaScript programs are executed internally.

• To understand core concepts like Hoisting, Scope and Closure, we must know how Execution

Context (EC) and Execution Stack (ES) work.

• Execution Context has 2 important work
 First is parsing the code line by line.
 Second is storing the variables and functions into the memory.
 WHAT IS EXECUTION
CONTEXT
 An abstract concept that holds information about the environment within which the current code is

being executed.

 Each statement of your code is executed in a certain Execution Context.

 Types of Execution Context

Function EC N
 Global EC

 Function EC

 Eval EC Function EC 2

Function EC 1

Global Execution Context

 EXECUTION CONTEXT STACK
 When JavaScript code runs, JavaScript engine create Execution Context and push it

to Execution Context Stack.

 Execution Context Stack — is a placed where our Global and Function Execution Context was

handled and manipulated.

 HOW IS THE EXECUTION CONTEXT
CREATED?
 In JS engine execution context is created in two phases
 Creation phase

 Execution phase
Lexical Environment
 Creation Phase
 In this phase two components are created
Variable Environment
 EC has two components
Execution Context
 Lexical Environment

 Variable Environment
 LEXICAL ENVIRONMENT
 A lexical environment is a structure that holds identifier-variable mapping. 

 identifier refers to the name of variables/functions.

 variable is the reference to actual object [including function object and array object] or

primitive value.

 Each Lexical Environment has three components:

 Environment Record
1. Environment Record
 Outer Environment
2. Reference to the outer environment,  ‘this’ binding

3. this binding. Lexical Environment

 ENVIRONMENT RECORD
 The environment record is the place where the variable and function declarations are stored inside
the lexical environment.
 There are also two types of environment record 
 Declarative environment record — As its name suggests stores variable and function declarations.
The lexical environment for function code contains a declarative environment record.
 Object environment record — The lexical environment for global code contains a objective
environment record and its also stores a global binding object (window object in browsers)
 For the function code, the environment record also contains an arguments object that contains the
mapping between indexes and arguments passed to the function and the length(number) of the
arguments passed into the function.

ER Type

Declarative ER Object ER
OUTER ENVIRONMENT & THIS
BINDING
Outer Environment
 The reference to the outer environment means it has access to its outer lexical environment. 

 That means that the JavaScript engine can look for variables inside the outer environment if they are
not found in the current lexical environment.

this binding
 the value of this is determined or set.

 In the global execution context, the value of this refers to the global object. (in browsers, this refers
to the Window Object).
 In the function execution context, the value of this depends on how the function is called.

 If it is called by an object reference, then the value of this is set to that object, otherwise, the value
of this is set to the global object or undefined(in strict mode).
 VARIABLE ENVIRONMENT
 It’s also a Lexical Environment whose Environment Record holds bindings created by Variable

Statements within this execution context.

 So it has all the properties and components of a lexical environment as defined above.

 Environment Record
 Outer Environment
 ‘this’ binding

Lexical Environment

 Environment Record
 Outer Environment
 ‘this’ binding

Variable Environment
OVERVIEW OF EXECUTION
CONTEXT

 Environment Record
 Outer Environment
 ‘this’ binding

Lexical Environment

 Environment Record
 Outer Environment
 ‘this’ binding

Variable Environment

Execution Context
OVERVIEW OF GLOBAL &
FUNCTION EC
 Environment Record
 Outer Environment
 ‘this’ binding
Lexical Environment

 Environment Record
 Outer Environment
 ‘this’ binding

Variable Environment

 Environment Record
 Outer Environment
 ‘this’ binding
Lexical Environment

 Environment Record
 Outer Environment
 ‘this’ binding

Variable Environment
Function EC
Global Execution Context
 Lexical Environment
 Environment Record
 Outer Environment
 ‘this’ binding Variable Environment
Lexical Environment
getManagerDetails( ) EC

 Environment Record
 Outer Environment
Lexical Environment
 ‘this’ binding

Variable Environment Variable Environment

Function EC onBoard( ) EC

Global Execution Context Global Execution context