JavaScript

Foundations
Important Fundamental
Concepts
 All code in
Javascript is
executed inside an
Execution
context
 The Global
Environment & the Global Object

Global execution context

Variable Environment
Execution context
1 Whenever a code runs in JavaScript, it runs inside an Execution
context.
2 The execution context is a wrapper to help manage the
code that is running.

3 An execution context can contain things beyond what

you have written in your code like a global object, the
this variable, and a reference to the outer ( lexical )
variables environment.
Execution context
1 Any code outside a function is in the Global Scope

2 Variables and Functions written in the Global Scope, sits

on the global object.
 The Execution
context has two
phases

1 CREATION PHASE: The code is parsed line by line. Grammar of your

code is validated, Scopes are setup & Variables and function
declarations are initialized in the memory as a key-value pair

2 EXECUTION PHASE: The real assignment and execution happens

at this phase.
A simple
example
function sayName() {
PHASE - 1
The creation phase of the Global execution context
console.log('Name: ', myVar);

function sayAge() {
myVar = 36;
console.log('Age: ', myVar);
}

sayAge();
}

var myVar = 'Vivek';

sayName();

Global execution context

Variable Environment
sayName: function(){ … }
function sayName() {
PHASE - 1
The creation phase of the Global execution context
console.log('Name: ', myVar);

function sayAge() {
myVar = 36;
console.log('Age: ', myVar);
}

sayAge();
}

var myVar = 'Vivek';

sayName();

Global execution context

Variable Environment
sayName: function(){ … }
myVar: undefined
function sayName() {
PHASE - 2
The execution phase of the Global execution context
console.log('Name: ', myVar);

function sayAge() {
myVar = 36;
console.log('Age: ', myVar);
}

sayAge();
}

var myVar = 'Vivek';

sayName();

Global execution context

Variable Environment
sayName: function(){ … } Line by line code execution
myVar: ‘Vivek’
function sayName() {
PHASE - 2
The execution phase of the Global execution context
console.log('Name: ', myVar);

function sayAge() {
myVar = 36;
console.log('Age: ', myVar);
}

sayAge();
}

var myVar = 'Vivek';

sayName();

Global execution context

Variable Environment
sayName: function(){ … }
myVar: ‘Vivek’
function sayName() {
PHASE - 1
The creation phase of the sayName()’s execution context
console.log('Name: ', myVar);

function sayAge() {
myVar = 36;
console.log('Age: ', myVar);
}

sayAge();
}

var myVar = 'Vivek';

sayName();
sayName()’s execution context
Variable Environment
sayAge: function(){ … }

Global execution context

Variable Environment
sayName: function(){ … }
myVar: ‘Vivek’
function sayName() {
PHASE - 2
The execution phase of the sayName()’s execution context
console.log('Name: ', myVar);

function sayAge() {
myVar = 36;
console.log('Age: ', myVar);
}

sayAge();
}

var myVar = 'Vivek';

sayName();
sayName()’s execution context
Variable Environment
sayAge: function(){ … }

Global execution context

Variable Environment
sayName: function(){ … }
myVar: ‘Vivek’
function sayName() {
PHASE - 2
The execution phase of the sayName()’s execution context
console.log('Name: ', myVar);

function sayAge() {
myVar = 36;
console.log('Age: ', myVar);
}

sayAge();
}

var myVar = 'Vivek';

sayName();
sayName()’s execution context
Variable Environment
sayAge: function(){ … }

Global execution context

Variable Environment
sayName: function(){ … }
myVar: ‘Vivek’
function sayName() {
console.log('Name: ', myVar);

function sayAge() {
myVar = 36;
console.log('Age: ', myVar); sayAge()’s execution context
}
Variable Environment
sayAge();
}

var myVar = 'Vivek';

sayName();
sayName()’s execution context
Variable Environment
sayAge: function(){ … }

Global execution context

Variable Environment
sayName: function(){ … }
myVar: ‘Vivek’
function sayName() {
PHASE - 1
The creation phase of the sayAge()’s execution context
console.log('Name: ', myVar);

function sayAge() {
myVar = 36;
console.log('Age: ', myVar); sayAge()’s execution context
}
Variable Environment
sayAge();
}

var myVar = 'Vivek';

sayName();
sayName()’s execution context
Variable Environment
sayAge: function(){ … }

Global execution context

Variable Environment
sayName: function(){ … }
myVar: 36
function sayName() {
PHASE - 2
The execution phase of the sayAge()’s execution context
console.log('Name: ', myVar);

function sayAge() {
myVar = 36;
console.log('Age: ', myVar); sayAge()’s execution context
}
Variable Environment
sayAge();
}

var myVar = 'Vivek';

sayName();
sayName()’s execution context
Variable Environment
sayAge: function(){ … }

Global execution context

Variable Environment
sayName: function(){ … }
myVar: 36
function sayName() {
PHASE - 2
The execution phase of the sayAge()’s execution context
console.log('Name: ', myVar);

function sayAge() {
myVar = 36;
console.log('Age: ', myVar); sayAge()’s execution context
}
Variable Environment
sayAge();
}

var myVar = 'Vivek';

sayName();
sayName()’s execution context
Variable Environment
sayAge: function(){ … }

Global execution context

Variable Environment
sayName: function(){ … }
myVar: 36
function sayName() {
PHASE - 2
The execution phase of the sayName()’s execution context
console.log('Name: ', myVar);

function sayAge() {
myVar = 36;
console.log('Age: ', myVar);
}

sayAge();
}

var myVar = 'Vivek';

sayName();
sayName()’s execution context
Variable Environment
sayAge: function(){ … }

Global execution context

Variable Environment
sayName: function(){ … }
myVar: 36
function sayName() {
PHASE - 2
The execution phase of the global execution context
console.log('Name: ', myVar);

function sayAge() {
myVar = 36;
console.log('Age: ', myVar);
}

sayAge();
}

var myVar = 'Vivek';

sayName();

Global execution context

Variable Environment
sayName: function(){ … }
myVar: 36
Execution context
1 `return` from a function, returns the control of the
program to the place where the function was invoked.
The scope chain is formed based on the lexical scope, meaning the
2 place where the variable .
A more evolved
Example
var firstName = 'Vivek';
var lastName = 'Agarwal’;

function getFullName() {
var firstName = 'Akash’;
var lastName = 'Sharma’;
var fname = getFirstName();
PHASE - 1
The creation phase of the Global
var lname = getLastName();
var fullName = fname + ' ' + lname; execution context
return fullName;
}

var getFirstName = function() {

}
return firstName; Global execution context
Variable Environment
var getLastName = function() {
return lastName; firstName: undefined
}

var fullName = getFullName();

console.log(fullName);
var firstName = 'Vivek';
var lastName = 'Agarwal’;

function getFullName() {
var firstName = 'Akash’;
var lastName = 'Sharma’;
var fname = getFirstName();
PHASE - 1
The creation phase of the Global
var lname = getLastName();
var fullName = fname + ' ' + lname; execution context
return fullName;
}

var getFirstName = function() {

}
return firstName; Global execution context
Variable Environment
var getLastName = function() {
return lastName; firstName: undefined
} lastName: undefined

var fullName = getFullName();

console.log(fullName);
var firstName = 'Vivek';
var lastName = 'Agarwal’;

function getFullName() {
var firstName = 'Akash’;
var lastName = 'Sharma’;
var fname = getFirstName();
PHASE - 1
The creation phase of the Global
var lname = getLastName();
var fullName = fname + ' ' + lname; execution context
return fullName;
}

var getFirstName = function() {

}
return firstName; Global execution context
Variable Environment
var getLastName = function() {
return lastName; firstName: undefined
} lastName: undefined
function getFullName() { … }

var fullName = getFullName();

console.log(fullName);
var firstName = 'Vivek';
var lastName = 'Agarwal’;

function getFullName() {
var firstName = 'Akash’;
var lastName = 'Sharma’;
var fname = getFirstName();
PHASE - 1
The creation phase of the Global
var lname = getLastName();
var fullName = fname + ' ' + lname; execution context
return fullName;
}

var getFirstName = function() {

}
return firstName; Global execution context
Variable Environment
var getLastName = function() {
return lastName; firstName: undefined
} lastName: undefined
function getFullName() { … }
getFirstName: undefined
var fullName = getFullName();
console.log(fullName);
var firstName = 'Vivek';
var lastName = 'Agarwal’;

function getFullName() {
var firstName = 'Akash’;
var lastName = 'Sharma’;
var fname = getFirstName();
PHASE - 1
The creation phase of the Global
var lname = getLastName();
var fullName = fname + ' ' + lname; execution context
return fullName;
}

var getFirstName = function() {

}
return firstName; Global execution context
Variable Environment
var getLastName = function() {
return lastName; firstName: undefined
} lastName: undefined
function getFullName() { … }
getFirstName: undefined
var fullName = getFullName(); getLastName: underfined
console.log(fullName);
var firstName = 'Vivek';
var lastName = 'Agarwal’;

function getFullName() {
var firstName = 'Akash’;
var lastName = 'Sharma’;
var fname = getFirstName();
PHASE - 1
The creation phase of the Global
var lname = getLastName();
var fullName = fname + ' ' + lname; execution context
return fullName;
}

var getFirstName = function() {

}
return firstName; Global execution context
Variable Environment
var getLastName = function() {
return lastName; firstName: undefined
} lastName: undefined
function getFullName() { … }
getFirstName: undefined
var fullName = getFullName(); getLastName: underfined
console.log(fullName); fullName: undefined
var firstName = 'Vivek';
var lastName = 'Agarwal’;

function getFullName() {
var firstName = 'Akash’;
var lastName = 'Sharma’;
var fname = getFirstName();
PHASE - 2
The Execution phase of the Global
var lname = getLastName();
var fullName = fname + ' ' + lname;
execution context
return fullName;
}

var getFirstName = function() {

}
return firstName; Global execution context
Variable Environment
var getLastName = function() {
return lastName; firstName: ‘Vivek’
} lastName: undefined Executes your
function getFullName() { … } code line by
getFirstName: undefined line
var fullName = getFullName(); getLastName: underfined
console.log(fullName); fullName: undefined
var firstName = 'Vivek';
var lastName = 'Agarwal’;

function getFullName() {
var firstName = 'Akash’;
var lastName = 'Sharma’;
var fname = getFirstName();
PHASE - 2
The Execution phase of the Global
var lname = getLastName();
var fullName = fname + ' ' + lname;
execution context
return fullName;
}

var getFirstName = function() {

}
return firstName; Global execution context
Variable Environment
var getLastName = function() {
return lastName; firstName: ‘Vivek’
} lastName: ‘Agarwal’ Executes your
function getFullName() { … } code line by
getFirstName: undefined line
var fullName = getFullName(); getLastName: underfined
console.log(fullName); fullName: undefined
var firstName = 'Vivek';
var lastName = 'Agarwal’;

function getFullName() {
var firstName = 'Akash’;
var lastName = 'Sharma’;
var fname = getFirstName();
PHASE - 2
The Execution phase of the Global
var lname = getLastName();
var fullName = fname + ' ' + lname;
execution context
return fullName;
}

var getFirstName = function() {

}
return firstName; Global execution context
Variable Environment
var getLastName = function() {
return lastName; firstName: ‘Vivek’
} lastName: ‘Agarwal’ Executes your
function getFullName() { … } code line by
getFirstName: undefined line
var fullName = getFullName(); getLastName: underfined
console.log(fullName); fullName: undefined
var firstName = 'Vivek';
var lastName = 'Agarwal’;

function getFullName() {
var firstName = 'Akash’;
var lastName = 'Sharma’;
var fname = getFirstName();
PHASE - 2
The Execution phase of the Global
var lname = getLastName();
var fullName = fname + ' ' + lname;
execution context
return fullName;
}

var getFirstName = function() {

}
return firstName; Global execution context
Variable Environment
var getLastName = function() {
return lastName; firstName: ‘Vivek’
} lastName: ‘Agarwal’ Executes your
function getFullName() { … } code line by
getFirstName: function() { … } line
var fullName = getFullName(); getLastName: underfined
console.log(fullName); fullName: undefined
var firstName = 'Vivek';
var lastName = 'Agarwal’;

function getFullName() {
var firstName = 'Akash’;
var lastName = 'Sharma’;
var fname = getFirstName();
PHASE - 2
The Execution phase of the Global
var lname = getLastName();
var fullName = fname + ' ' + lname;
execution context
return fullName;
}

var getFirstName = function() {

}
return firstName; Global execution context
Variable Environment
var getLastName = function() {
return lastName; firstName: ‘Vivek’
} lastName: ‘Agarwal’ Executes your
function getFullName() { … } code line by
getFirstName: function() { … } line
var fullName = getFullName(); getLastName: function() { … }
console.log(fullName); fullName: undefined
var firstName = 'Vivek';
var lastName = 'Agarwal’;

function getFullName() {
var firstName = 'Akash’;
var lastName = 'Sharma’;
var fname = getFirstName();
PHASE - 2
The Execution phase of the Global
var lname = getLastName();
var fullName = fname + ' ' + lname;
execution context
return fullName;
}

var getFirstName = function() {

}
return firstName; Global execution context
Variable Environment
var getLastName = function() {
return lastName; firstName: ‘Vivek’
} lastName: ‘Agarwal’ Executes your
function getFullName() { … } code line by
getFirstName: function() { … } line
var fullName = getFullName(); getLastName: function() { … }
console.log(fullName); fullName: return value of getFullName()
var firstName = 'Vivek';
var lastName = 'Agarwal’;
PHASE - 1
The Creation phase of the getFullName()’s execution context

function getFullName() {
var firstName = 'Akash’; getFullName()’s execution context
var lastName = 'Sharma’;
var fname = getFirstName();
var lname = getLastName(); Variable Environment
var fullName = fname + ' ' + lname;
return fullName; firstName: undefined
}

var getFirstName = function() {

return firstName;
}

var getLastName = function() {

Global execution context
return lastName;
}
Variable Environment
firstName: ‘Vivek’
var fullName = getFullName(); lastName: ‘Agarwal’ Executes your
console.log(fullName); … code line by
fullName: return value of getFullName() line
var firstName = 'Vivek';
var lastName = 'Agarwal’;
PHASE - 1
The Creation phase of the getFullName()’s execution context

function getFullName() {
var firstName = 'Akash’; getFullName()’s execution context
var lastName = 'Sharma’;
var fname = getFirstName();
var lname = getLastName(); Variable Environment
var fullName = fname + ' ' + lname;
return fullName; firstName: undefined
} lastName: undefined

var getFirstName = function() {

return firstName;
}

var getLastName = function() {

Global execution context
return lastName;
}
Variable Environment
firstName: ‘Vivek’
var fullName = getFullName(); lastName: ‘Agarwal’ Executes your
console.log(fullName); … code line by
fullName: return value of getFullName() line
var firstName = 'Vivek';
var lastName = 'Agarwal’;
PHASE - 1
The Creation phase of the getFullName()’s execution context

function getFullName() {
var firstName = 'Akash’; getFullName()’s execution context
var lastName = 'Sharma’;
var fname = getFirstName();
var lname = getLastName(); Variable Environment
var fullName = fname + ' ' + lname;
return fullName; firstName: undefined
} lastName: undefined
fname: undefined

var getFirstName = function() {

return firstName;
}

var getLastName = function() {

Global execution context
return lastName;
}
Variable Environment
firstName: ‘Vivek’
var fullName = getFullName(); lastName: ‘Agarwal’ Executes your
console.log(fullName); … code line by
fullName: return value of getFullName() line
var firstName = 'Vivek';
var lastName = 'Agarwal’;
PHASE - 1
The Creation phase of the getFullName()’s execution context

function getFullName() {
var firstName = 'Akash’; getFullName()’s execution context
var lastName = 'Sharma’;
var fname = getFirstName();
var lname = getLastName(); Variable Environment
var fullName = fname + ' ' + lname;
return fullName; firstName: undefined
} lastName: undefined
fname: undefined
lname: undefined
var getFirstName = function() {
return firstName;
}

var getLastName = function() {

Global execution context
return lastName;
}
Variable Environment
firstName: ‘Vivek’
var fullName = getFullName(); lastName: ‘Agarwal’ Executes your
console.log(fullName); … code line by
fullName: return value of getFullName() line
var firstName = 'Vivek';
var lastName = 'Agarwal’;
PHASE - 1
The Creation phase of the getFullName()’s execution context

function getFullName() {
var firstName = 'Akash’; getFullName()’s execution context
var lastName = 'Sharma’;
var fname = getFirstName();
var lname = getLastName(); Variable Environment
var fullName = fname + ' ' + lname;
return fullName; firstName: undefined
} lastName: undefined
fname: undefined
lname: undefined
var getFirstName = function() { fullName: undefined
return firstName;
}

var getLastName = function() {

Global execution context
return lastName;
}
Variable Environment
firstName: ‘Vivek’
var fullName = getFullName(); lastName: ‘Agarwal’ Executes your
console.log(fullName); … code line by
fullName: return value of getFullName() line
var firstName = 'Vivek';
var lastName = 'Agarwal’;
PHASE - 1
The Creation phase of the getFullName()’s execution context

function getFullName() {
var firstName = 'Akash’; getFullName()’s execution context
var lastName = 'Sharma’;
var fname = getFirstName();
var lname = getLastName(); Variable Environment
var fullName = fname + ' ' + lname;
return fullName; firstName: undefined
} lastName: undefined
fname: undefined
lname: undefined
var getFirstName = function() { fullName: undefined
return firstName;
}

var getLastName = function() {

Global execution context
return lastName;
}
Variable Environment
firstName: ‘Vivek’
var fullName = getFullName(); lastName: ‘Agarwal’ Executes your
console.log(fullName); … code line by
fullName: return value of getFullName() line
var firstName = 'Vivek';
var lastName = 'Agarwal’;
PHASE - 2
The Execution phase of the getFullName()’s execution context

function getFullName() {
var firstName = 'Akash’; getFullName()’s execution context
var lastName = 'Sharma’;
var fname = getFirstName();
var lname = getLastName(); Variable Environment
var fullName = fname + ' ' + lname;
return fullName; firstName: undefined Executes your
} lastName: undefined code line by
fname: undefined line
lname: undefined
var getFirstName = function() { fullName: undefined
return firstName;
}

var getLastName = function() {

Global execution context
return lastName;
}
Variable Environment
firstName: ‘Vivek’
var fullName = getFullName(); lastName: ‘Agarwal’ Executes your
console.log(fullName); … code line by
fullName: return value of getFullName() line
var firstName = 'Vivek';
var lastName = 'Agarwal’;
PHASE - 2
The Execution phase of the getFullName()’s execution context

function getFullName() {
var firstName = 'Akash’; getFullName()’s execution context
var lastName = 'Sharma’;
var fname = getFirstName();
var lname = getLastName(); Variable Environment
var fullName = fname + ' ' + lname;
return fullName; firstName: ‘Akash’ Executes your
} lastName: undefined code line by
fname: undefined line
lname: undefined
var getFirstName = function() { fullName: undefined
return firstName;
}

var getLastName = function() {

Global execution context
return lastName;
}
Variable Environment
firstName: ‘Vivek’
var fullName = getFullName(); lastName: ‘Agarwal’ Executes your
console.log(fullName); … code line by
fullName: return value of getFullName() line
var firstName = 'Vivek';
var lastName = 'Agarwal’;
PHASE - 2
The Execution phase of the getFullName()’s execution context

function getFullName() {
var firstName = 'Akash’; getFullName()’s execution context
var lastName = 'Sharma’;
var fname = getFirstName();
var lname = getLastName(); Variable Environment
var fullName = fname + ' ' + lname;
return fullName; firstName: ‘Akash’ Executes your
} lastName: ‘Sharma’ code line by
fname: undefined line
lname: undefined
var getFirstName = function() { fullName: undefined
return firstName;
}

var getLastName = function() {

Global execution context
return lastName;
}
Variable Environment
firstName: ‘Vivek’
var fullName = getFullName(); lastName: ‘Agarwal’ Executes your
console.log(fullName); … code line by
fullName: return value of getFullName() line
var firstName = 'Vivek';
var lastName = 'Agarwal’;
PHASE - 2
The Execution phase of the getFullName()’s execution context

function getFullName() {
var firstName = 'Akash’; getFullName()’s execution context
var lastName = 'Sharma’;
var fname = getFirstName();
var lname = getLastName(); Variable Environment
var fullName = fname + ' ' + lname;
return fullName; firstName: ‘Akash’ Executes your
} lastName: ‘Sharma’ code line by
fname: return value of getFirstName() line
lname: undefined
var getFirstName = function() { fullName: undefined
return firstName;
}

var getLastName = function() {

Global execution context
return lastName;
}
Variable Environment
firstName: ‘Vivek’
var fullName = getFullName(); lastName: ‘Agarwal’ Executes your
console.log(fullName); … code line by
fullName: return value of getFullName() line
 PHASE - 1
The Creation phase of the getFirstName()’s execution context
var firstName = 'Vivek';
var lastName = 'Agarwal’;
getFirstName()’s execution context
function getFullName() {
var firstName = 'Akash’; Variable Environment
var lastName = 'Sharma’;
var fname = getFirstName();
var lname = getLastName();
var fullName = fname + ' ' + lname;
return fullName;
}
getFullName()’s execution context
var getFirstName = function() {
return firstName; Variable Environment
}
firstName: ‘Akash’ Executes your
lastName: ‘Sharma’ code line by
fname: return value of getFirstName()
var getLastName = function() { line
lname: undefined
return lastName;
fullName: undefined
}

var fullName = getFullName();

console.log(fullName); Global execution context
Variable Environment
firstName: ‘Vivek’
lastName: ‘Agarwal’ Executes your
 PHASE - 2
The Execution phase of the getFirstName()’s execution context
var firstName = 'Vivek';
var lastName = 'Agarwal’;
getFirstName()’s execution context
function getFullName() {
var firstName = 'Akash’; Variable Environment Executes your code
var lastName = 'Sharma’;
var fname = getFirstName(); line by line
var lname = getLastName();
var fullName = fname + ' ' + lname;
return fullName;
}
getFullName()’s execution context
var getFirstName = function() {
return firstName; Variable Environment
} Executes your
firstName: ‘Akash’
lastName: ‘Sharma’ code line by
fname: return value of getFirstName() line
var getLastName = function() {
lname: undefined
return lastName;
fullName: undefined
}

var fullName = getFullName();

console.log(fullName); Global execution context
Variable Environment
firstName: ‘Vivek’
lastName: ‘Agarwal’ Executes your
 PHASE - 2
The Execution phase of the getFullName()’s execution context

var firstName = 'Vivek';

var lastName = 'Agarwal’;

function getFullName() {
var firstName = 'Akash’;
var lastName = 'Sharma’;
var fname = getFirstName();
var lname = getLastName();
var fullName = fname + ' ' + lname;
return fullName;
}
getFullName()’s execution context
var getFirstName = function() {
return firstName; Variable Environment
} Executes your
firstName: ‘Akash’
lastName: ‘Sharma’ code line by
fname: ‘Vivek’ line
var getLastName = function() {
lname: return value of getLastName()
return lastName;
fullName: undefined
}

var fullName = getFullName();

console.log(fullName); Global execution context
Variable Environment
firstName: ‘Vivek’
lastName: ‘Agarwal’ Executes your
 PHASE - 1
The Creation phase of the getLastName()’s execution context
var firstName = 'Vivek';
var lastName = 'Agarwal’;
getLastName()’s execution context
function getFullName() {
var firstName = 'Akash’; Variable Environment
var lastName = 'Sharma’;
var fname = getFirstName();
var lname = getLastName();
var fullName = fname + ' ' + lname;
return fullName;
}
getFullName()’s execution context
var getFirstName = function() {
return firstName; Variable Environment
}
firstName: ‘Akash’ Executes your
lastName: ‘Sharma’ code line by
fname: ‘Vivek’
var getLastName = function() { line
lname: return value of getLastName()
return lastName;
fullName: undefined
}

var fullName = getFullName();

console.log(fullName); Global execution context
Variable Environment
firstName: ‘Vivek’
lastName: ‘Agarwal’ Executes your
 PHASE - 2
The Execution phase of the getLastName()’s execution context
var firstName = 'Vivek';
var lastName = 'Agarwal’;
getLastName()’s execution context
function getFullName() {
var firstName = 'Akash’; Variable Environment Executes your
var lastName = 'Sharma’;
var fname = getFirstName();
code line by line
var lname = getLastName();
var fullName = fname + ' ' + lname;
return fullName;
}
getFullName()’s execution context
var getFirstName = function() {
return firstName; Variable Environment
}
firstName: ‘Akash’
Executes your
lastName: ‘Sharma’
code line by
fname: ‘Vivek’
var getLastName = function() {
lname: return value of getLastName() line
return lastName;
fullName: undefined
}

var fullName = getFullName();

console.log(fullName); Global execution context
Variable Environment
firstName: ‘Vivek’
lastName: ‘Agarwal’ Executes your
 PHASE - 2
The Execution phase of the getFullName()’s execution context
var firstName = 'Vivek';
var lastName = 'Agarwal’;

function getFullName() {
var firstName = 'Akash’;
var lastName = 'Sharma’;
var fname = getFirstName();
var lname = getLastName();
var fullName = fname + ' ' + lname;
return fullName;
}
getFullName()’s execution context
var getFirstName = function() {
return firstName; Variable Environment
}
firstName: ‘Akash’
lastName: ‘Sharma’ Executes your
fname: ‘Vivek’ code line by
var getLastName = function() { line
lname: ‘Agarwal’
return lastName;
fullName: undefined
}

var fullName = getFullName();

console.log(fullName); Global execution context
Variable Environment
firstName: ‘Vivek’
lastName: ‘Agarwal’ Executes your
 PHASE - 2
The Execution phase of the getFullName()’s execution context
var firstName = 'Vivek';
var lastName = 'Agarwal’;

function getFullName() { getFullName()’s execution context

var firstName = 'Akash’;
var lastName = 'Sharma’;
var fname = getFirstName(); Variable Environment
var lname = getLastName();
var fullName = fname + ' ' + lname; firstName: ‘Akash’ Executes your
return fullName; lastName: ‘Sharma’ code line by
} fname: ‘Vivek’
line
lname: ‘Agarwal’
fullName: undefined
var getFirstName = function() {
return firstName;
}
Global execution context
var getLastName = function() {
return lastName;
Variable Environment
}
firstName: ‘Vivek’
lastName: ‘Agarwal’ Executes your
var fullName = getFullName(); … code line by
console.log(fullName); fullName: return value of getFullName() line
 PHASE - 2
The Execution phase of the getFullName()’s execution context
var firstName = 'Vivek';
var lastName = 'Agarwal’;

function getFullName() { getFullName()’s execution context

var firstName = 'Akash’;
var lastName = 'Sharma’;
var fname = getFirstName(); Variable Environment
var lname = getLastName();
var fullName = fname + ' ' + lname; firstName: ‘Akash’ Executes your
return fullName; lastName: ‘Sharma’ code line by
} fname: ‘Vivek’
line
lname: ‘Agarwal’
fullName: ’Vivek Agarwal’
var getFirstName = function() {
return firstName;
}
Global execution context
var getLastName = function() {
return lastName;
Variable Environment
}
firstName: ‘Vivek’
lastName: ‘Agarwal’ Executes your
var fullName = getFullName(); … code line by
console.log(fullName); fullName: return value of getFullName() line
 PHASE - 2
The Execution phase of the getFullName()’s execution context
var firstName = 'Vivek';
var lastName = 'Agarwal’;

function getFullName() { getFullName()’s execution context

var firstName = 'Akash’;
var lastName = 'Sharma’;
var fname = getFirstName(); Variable Environment
var lname = getLastName();
var fullName = fname + ' ' + lname; firstName: ‘Akash’ Executes your
return fullName; lastName: ‘Sharma’ code line by
} fname: ‘Vivek’
line
lname: ‘Agarwal’
fullName: ’Vivek Agarwal’
var getFirstName = function() {
return firstName;
}
Global execution context
var getLastName = function() {
return lastName;
Variable Environment
}
firstName: ‘Vivek’
lastName: ‘Agarwal’ Executes your
var fullName = getFullName(); … code line by
console.log(fullName); fullName: return value of getFullName() line
 PHASE - 2
The Execution phase of the getFullName()’s execution context
var firstName = 'Vivek';
var lastName = 'Agarwal’;

function getFullName() { getFullName()’s execution context

var firstName = 'Akash’;
var lastName = 'Sharma’;
var fname = getFirstName(); Variable Environment
var lname = getLastName();
var fullName = fname + ' ' + lname; firstName: ‘Akash’ Executes your
return fullName; lastName: ‘Sharma’ code line by
} fname: ‘Vivek’
line
lname: ‘Agarwal’
fullName: ’Vivek Agarwal’
var getFirstName = function() {
return firstName;
}
Global execution context
var getLastName = function() {
return lastName;
Variable Environment
}
firstName: ‘Vivek’
lastName: ‘Agarwal’ Executes your
var fullName = getFullName(); … code line by
console.log(fullName); fullName: ‘Vivek Agarwal’ line
 PHASE - 2
The Execution phase of the getFullName()’s execution context
var firstName = 'Vivek';
var lastName = 'Agarwal’;

function getFullName() {
var firstName = 'Akash’;
var lastName = 'Sharma’;
var fname = getFirstName();
var lname = getLastName();
var fullName = fname + ' ' + lname;
return fullName;
}

var getFirstName = function() {

return firstName;
}
Global execution context
var getLastName = function() {
return lastName;
Variable Environment
}
firstName: ‘Vivek’
lastName: ‘Agarwal’ Executes your
var fullName = getFullName(); … code line by
console.log(fullName); fullName: ‘Vivek Agarwal’ line