Every bit of JavaScript code runs inside an Execution Context. This key principle is the base of the closures. Mastering closures is key when writing JS code and apps.

1. JavaScript
Execution Context (EC)
Closures
"this" keyword
...and other demons

2. Some key concepts
● JS is a high-level programming language
● Executed at runtime
● Weakly typed
● Prototype-based
○ Class-less
○ Inheritance through cloning of objects then...
○ Delegation from the prototype
var globant = {arg: 1500, uru: 150, col: 50};
var agency = {world: 1800};
agency.__proto__ = globant;
alert(agency.arg);
alert(agency.world);

3. What's going on here?
function outerFunc(externalArg) {
var localVar = 100;
function innerFunc(innerArg) {
localVar += 100;
return (externalArg + innerArg + localVar);
}
return innerFunc;
}
var globalVar = outerFunc(200);
alert(globalVar(300));
alert(globalVar(300));
globalVar = outerFunc(200);
alert(globalVar(300));

4. Execution Context Maxims
All the JS code runs within an JS Code is encapsulated
Execution Context. within a set of Objects &
properties.
Execute code!

5. Execution Context Maxims
The default Execution Context Each function( )
is the window Object. invocation has an associated
Execution Context.

6. Execution Context Maxims
If a nested function( )is When the control returns to
called a new EC is created the original EC it is available
and the execution enters that for garbage collection except
context until the when we create a closure.
function( ) returns.
Thus, running JavaScript code
generates a:
Stack of Execution Contexts

7. Activation Object
● Execution Context creates an : Activation Object
○ Behaves as an JS Object with properties
○ But has NO prototype and cannot be referenced
○ Serves to store call( )arguments & var declarations
○ Let's not care about this
Okay

8. Variable Instantiation
● Prepare the var, function(arg)declarations and
arguments to be accessible during execution
○ var globant;
○ var rock = function(arg){ alert('rock')};
● Initially assigned null properties or 'undefined' values
● They become named properties of the
var (Activation) Object
● The instantiated var will be interpreted against the scope of
the current Execution Context
Scope? Wait for it...

9. The Scope
● Each Execution Context has a Scope
● A Scope is an Activation Object
○ Part of the var Object
● Scopes can be chained by the JS interpreter
● The Scope chain is a native property of every
function( )declaration

10. Variable Resolution
● Every time a var is called the interpreter will try to resolve it
● It resolves it against the Scope of the current EC
● It will continue upwards to the next EC until the window
● If it's not found it will return 'undefined'
● This is also a Scope chain

11. Textbook definition of Closures
A "closure" is an expression (typically a
function) that can have free variables
together with an environment that binds
those variables (that "closes" the expression).

12. Closures
If an Object (var) has no Unless... we create a closure
remaining references once
the execution ends, it gets ● A closure is the local
collected by the garbage variables for a function -
collector kept alive after the function
has returned.
● A closure is an Execution
Context which is not de-
allocated when the
function returns.

13. What's going on here? Closure!
function outerFunc(externalArg) {
var localVar = 100;
function innerFunc(innerArg) {
localVar += 100;
return (externalArg + innerArg + localVar);
}
return innerFunc;
} outerFunc( ) returns a
reference to innerFunc( )
var globalVar = outerFunc(200); We declare a var that runs &
alert(globalVar(300)); holds whatever outerFunc( )
alert(globalVar(300)); returns
globalVar = outerFunc(200); When we call globalVar(300)
alert(globalVar(300)); again, we still have access to local
var defined in outerFunc( )

14. Another Closure example
function say778() {
var num = 777;
var sayAlert = function() {
alert(num);
}
num++;
return sayAlert;
}
var sayNumber = say778();
sayNumber();
alert(sayNumber);

15. The "this" keyword
● Gets assigned along every new Execution Context
● It always refers to the Object that the containing function(
) is a method of
function redColor() {
this.color = 'red';
}
redColor();
alert(redColor.color); //shows "undefined"
alert(window.color); //shows "red"

16. Closures in jQuery
$(function() {
var anchors = $('a');
anchors.each(function(i, e) {
var self = $(this);
if($(this).text() !== 'Contact me') {
$(this).click(function(e) {
var that = $(this);
that.css({'textDecoration' : 'underline'});
self.css({'color' : 'red'});
setTimeout(function(e) {
anchors
that.css({'color' : 'blue'});
}, 1000);
});
}
});
});