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 definitions

A few definitions

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 definitions

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 definitions

var declarations are function-scoped

foo is accessible in all of main():

function main() {{ // block starts

var foo = 4;} // block endsconsole.log(foo); // 4

}

ECMAScript 6: block-scoped variable declarations via let.


A few definitions

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

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 variablesDiscard afterwards (usually)

Solution: stack of execution contexts (references to environments)


Environments

var foo = 'abc';function fac(n) {

if (n <= 1) {return 1;

}return n * fac(n - 1);

}// YOU ARE HEREfac(2);

0…fac

'abc'foo

Lexical environmentsExecution contexts


Environments




}fac(2);

10

…fac'abc'foo

2n



Environments




}fac(2);

210

…fac'abc'foo

1n


2n


Environments

Static (lexical) dimension: nested scopes

function f(x) {var foo;function g(y, z) {

var bar;}

}

Environment: field outer points to“surrounding” environment.

Search environment chain forvariables.

Function: property [[Scope]]points to environment “in which”function was created.

Function call: set up outer via[[Scope]].


Environments


var bar;}g(7, 1);

}// YOU ARE HEREf(2);

0 …f



Environments


var bar;}g(7, 1);

}f(2);

10 …f

…gundefinedfoo

2x

outer



Environments


var bar;}g(7, 1);

}f(2);

210 …f

…gundefinedfoo

2x

outer


undefinedbar1z7y

outer


Closures

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: closuresStep 1



};}var inc = createInc(5);

0undefinedinc

createInc

Lexical environmentsExecution contexts Functions

[[Scope]]


Closures

Step 2




10

undefinedinccreateInc

5startValueouter


[[Scope]]


Closures

Step 3




0inccreateInc

5startValueouter

[[Scope]]


[[Scope]]


Closures

Step 4function createInc(startValue) {

return function (step) {startValue += step;return startValue; }; }

var inc = createInc(5);console.log(inc(1)); // 6

10

inccreateInc

5startValue

1step

outer

outer

[[Scope]]


[[Scope]]


Closures

Step 5



};}var inc = createInc(5);console.log(inc(1)); // 6

0inccreateInc

5startValueouter

[[Scope]]


[[Scope]]


Thank you!

Free online: speakingjs.com

http://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



Right: one environment per function, with snapshot of i

function f() {var result = [];for (var i=0; i<3; i++) {

(function () { // step 1: IIFEvar pos = i; // step 2: copyvar func = function () {

return pos;};result.push(func);

}());}return result;

}console.log(f()[1]()); // 1


Bonus: example

Bonus: example

Example: environments

Step 1function myFunction(myParam) {

var myVar = 123;return myFloat;

}var myFloat = 1.3;// Step 1myFunction('abc'); // Step 2

01.3myFloat

myFunction

Chain of environments(lexical)

Stack of execution contexts (dynamic)

[[Scope]]function (myParam) { ...}

Functions


Bonus: example

Step 2function myFunction(myParam) {

var myVar = 123;return myFloat;

}var myFloat = 1.3;// Step 1myFunction('abc'); // Step 2

[[Scope]]10

1.3myFloatmyFunction

myVar 123'abc'myParam

outer

function (myParam) { ...}

Chain of environments(lexical)

Stack of execution contexts (dynamic)

Functions


Internet

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