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
