CodeFest 2014. Axel Rauschmayer — JavaScript’s variables: scopes, environments, closures

JavaScript’s variables: scopes, environments, closures
Dr. Axel Rauschmayer
2ality.com
2014-03-30
CodeFest 2014

A few deﬁnitions
Scope of a variable
Where is the variable accessible?
function foo() {
var x;
}
foo() is direct scope of x.
Dr. Axel Rauschmayer (2ality.com) JavaScript’s variables 2014-03-30 3 / 32

A few deﬁnitions
Static versus dynamic
Adjectives for describing phenomena in programming languages:
Static: pertaining to the source code
⇒ The scope of a variable is static
function f() {
var x = 3;
... // no effect on scope of x
}
⇒ Variables in JavaScript are statically scoped (or lexically scoped)
Dynamic: at runtime
⇒ function calls are dynamic
function g() { }
function f() { g() }

A few deﬁnitions
var declarations are function-scoped
foo is accessible in all of main():
function main() {
{ // block starts
var foo = 4;
} // block ends
console.log(foo); // 4
}
ECMAScript 6: block-scoped variable declarations via let.

A few deﬁnitions
Nested scopes
Everything from outer scopes is accessible from inner scopes.
function foo(arg) {
function bar() {
console.log('arg: ' + arg);
}
bar();
}
console.log(foo('hello')); // arg: hello
Outer scope: foo()
Inner scope: bar()
arg is accessible in its direct scope foo() and the inner scope bar().

Environments
Environments: managing variables
Environments:
Data structure for storing variables
Maps from variable names to values

Environments
Dimensions of environments
Environments must support:
Fresh variables (local, parameters) per function call (dynamic
dimension).
Nested scopes (static dimension).

Environments
Dynamic dimension: calling functions
function fac(n) {
if (n <= 1) {
return 1;
}
return n * fac(n - 1);
}
For each invocation:
Allocate storage for parameters and local variables
Discard afterwards (usually)
Solution: stack of execution contexts (references to environments)

Environments
var foo = 'abc';
function fac(n) {
if (n <= 1) {
return 1;
}
}
// YOU ARE HERE
fac(2);
0
…fac
'abc'foo
Lexical environmentsExecution contexts

Environments
var foo = 'abc';
function fac(n) {
if (n <= 1) {
return 1;
}
}
fac(2);
1
0
…fac
'abc'foo
2n

Environments
var foo = 'abc';
function fac(n) {
if (n <= 1) {
return 1;
}
}
fac(2);
2
1
0
…fac
'abc'foo
1n
2n

Environments
Static (lexical) dimension: nested scopes
function f(x) {
var foo;
function g(y, z) {
var bar;
}
}
Environment: ﬁeld outer points to
“surrounding” environment.
Search environment chain for
variables.
Function: property [[Scope]]
points to environment “in which”
function was created.
Function call: set up outer via
[[Scope]].

Environments
function f(x) {
var foo;
function g(y, z) {
var bar;
}
g(7, 1);
}
// YOU ARE HERE
f(2);
0 …f

Environments
function f(x) {
var foo;
function g(y, z) {
var bar;
}
g(7, 1);
}
f(2);
1
0 …f
…g
undeﬁnedfoo
2x
outer

Environments
function f(x) {
var foo;
function g(y, z) {
var bar;
}
g(7, 1);
}
f(2);
2
1
0 …f
…g
undeﬁnedfoo
2x
outer
undeﬁnedbar
1z
7y
outer

Closures
Closures: Functions Stay Connected to Their Birth Scopes
function createInc(startValue) {
return function (step) {
startValue += step;
return startValue;
};
}
# var inc = createInc(5);
# inc(1)
6
# inc(2)
8

Closures
What is a closure?
Closure = function + connection to birth scope
Via internal property [[Scope]] of functions

Closures
Example: closures
Step 1
startValue += step;
return startValue;
};
}
var inc = createInc(5);
0
undeﬁnedinc
createInc
Lexical environmentsExecution contexts Functions
[[Scope]]

Closures
Step 2
startValue += step;
return startValue;
};
}
1
0
undeﬁnedinc
createInc
5startValue
outer
[[Scope]]

Closures
Step 3
startValue += step;
return startValue;
};
}
0
inc
createInc
5startValue
outer
[[Scope]]
[[Scope]]

Closures
Step 4
startValue += step;
return startValue; }; }
console.log(inc(1)); // 6
1
0
inc
createInc
5startValue
1step
outer
outer
[[Scope]]
[[Scope]]

Closures
Step 5
startValue += step;
return startValue;
};
}
console.log(inc(1)); // 6
0
inc
createInc
5startValue
outer
[[Scope]]
[[Scope]]

Thank you!
Free online: speakingjs.com

Bonus: inadvertent sharing
Wrong: all functions share the same i
function f() {
var result = [];
for (var i=0; i<3; i++) {
var func = function () {
return i;
};
result.push(func);
}
return result;
}
console.log(f()[1]()); // 3

Bonus: inadvertent sharing
Right: one environment per function, with snapshot of i
function f() {
var result = [];
for (var i=0; i<3; i++) {
(function () { // step 1: IIFE
var pos = i; // step 2: copy
var func = function () {
return pos;
};
result.push(func);
}());
}
return result;
}
console.log(f()[1]()); // 1

Bonus: example
Example: environments
Step 1
function myFunction(myParam) {
var myVar = 123;
return myFloat;
}
var myFloat = 1.3;
// Step 1
myFunction('abc'); // Step 2
0
1.3myFloat
myFunction
Chain of environments
(lexical)
Stack of execution
contexts (dynamic)
[[Scope]]
function (myParam)
...
}
Functions

Bonus: example
Step 2
function myFunction(myParam) {
var myVar = 123;
return myFloat;
}
var myFloat = 1.3;
// Step 1
myFunction('abc'); // Step 2
[[Scope]]
1
0
1.3myFloat
myFunction
myVar 123
'abc'myParam
outer
function (myParam)
...
}
Chain of environments
(lexical)
Stack of execution
contexts (dynamic)
Functions

CodeFest 2014. Axel Rauschmayer — JavaScript’s variables: scopes, environments, closures

More Related Content

What's hot

Viewers also liked

Similar to CodeFest 2014. Axel Rauschmayer — JavaScript’s variables: scopes, environments, closures

More from CodeFest

CodeFest 2014. Axel Rauschmayer — JavaScript’s variables: scopes, environments, closures