Scope & Functions in ECMAScript 6.0

© 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: [email protected]


d = 'ev';

var d;

console.log(d);

var d;

d = 'ev';

console.log(d);

Only the declarations themselves are hoisted, while any assignments or

other executable logic are left in place.


test(); // 1

var test;

function test() {

console.log(1);

}

test = function () {

console.log(2);

};

function test() {

console.log(1);

}

test(); // 1

test = function () {

console.log(2);

};


function add(num1, num2) {

var sum = num1 + num2;

return sum;

}

Add

[[Scope]]

Scope Chain

0

Global Object

this Windows

windows (object)

document (object)

add (function)

… …

add.length === 2;

Object.getPrototypeOf(add) === Function.prototype;


Activation object

this Windows

arguments [ 5 , 10 ]

num1 5

num2 10

sum undefined

var Total = add( 5 , 10 );

add(5,10)

Execution

context

Scope

chain

Scope Chain

0

1

Global Object

this Windows

windows (object)

document (object)

add (function)

… …


var color = "blue";

function changeColor() {

var anotherColor = "red";

function swapColors(){var tempColor = anotherColor;anotherColor = color;color = tempColor;// color, anotherColor, and tempColor// are all accessible here.

}// color and anotherColor are accessible here, // but not tempColor.swapColors();

}//only color is accessible herechangeColor();

Windows

color

changeColor()

anotherColor

swapColos() tempColor()


function addEvent() {

var id = "xdi9592";

document.getElementById("save-btn").onclick = function (event) {

saveDocument( id );};

}From parent

scope


Scope Chain

0

1

Activation object

this Windows

arguments []

id “xdi9592”

addEvent()

Execution context

Scope chain

Scope Chain

0

1

Global Object

this Windows

windows (object)

document (object)

addEvent (function)

saveDoc (function)

Closure

[[Scope]]


Scope Chain

0

1

2

Activation object

this Windows

arguments []

id “xdi9592”

Global Object

this Windows

windows (object)

document (object)

addEvent (function)

saveDoc (function)

Closure

execution context

[[Scope]]

Activation object

(closure)

this Windows

arguments []

event (object)


var funcs = [];

for ( var i = 0; i < 10; i ++) {

funcs.push( function() { console.log(i); });

}

funcs.forEach( function(func) {

func(); // outputs the number "10" ten times

});


var funcs = [];

for ( var i = 0; i < 10; i ++) {

funcs.push(( function(value) {

return function() {

console.log(value);

}

}(i)));

}


func(); // outputs 0, 1, 2, 3, up to 9

});


var funcs = [];

for ( let i = 0; i < 10; i ++) {

funcs.push( function() { console.log(i); });

}


func(); // outputs 0, 1, 2, 3, up to 9

});


const PI = 3.14159;

// Can't re-assignPI = 3; console.log(PI); // 3.14159

// Can't re-initializeconst PI = 4; console.log(PI); // 3.14159

// Can't re-declarevar PI = 4; console.log(PI); // 3.14159




Undefined

Null

function history( lang = "C", year = 1971 ) {

// lang = lang || "C";

// year = year || 1971;

return lang + " was created around the year " + year;

}


// defining rest parameters with 3 dot syntaxfunction push(array, ...items) {

items.forEach(function(item) {array.push(item);console.log( item );

});}

// 1 fixed + 3 variable parametersvar planets = [];push(planets, "Mercury", "Venus", "Earth");


Spread

operator

let values = [25, 50, 75, 100];

Math.max.apply( Math , values );

Math.max(...values);

Math.max(...values , 200 , 300 );



var f= x => x;

var f= (n1,n2) => n1+n2;

var f= id => ({id:id,name:"T"});

var f = function(x) {return x;

}

var f = function(n1,n2) {return n1 + n2;

}

var f = function(id) {

return {id: id,name: "T"

};}


var PageHandler = {id: "123456",

init: function() {document.addEventListener("click", function(event) {

this.doSomething(event.type); // error}, false);

},

doSomething: function(type) {console.log("Handling " + type + " for " + this.id);

}};

Global



init: function() {document.addEventListener("click", (function(event) {

this.doSomething(event.type);}).bind(this), false);

},

doSomething: function(type) {console.log("Handling " + type + " for " + this.id);

}}



init: function() {document.addEventListener("click",

event => this.doSomething(event.type), false);},

doSomething: function(type) {console.log("Handling "+type+" for " + this.id);

}};


let v = ( function(name) {return {

getName() {return name;

}};

}( "Eyal" ) );

let v = ( (name) => {return {

getName() {return name;

}};

})( "Eyal" );


http://www.2ality.com/

Understanding ECMAScript 6

http://ecmascript6.org/

A Few New Things Coming To JavaScript

HARMONY OF DREAMS COME TRUE

Harmony specification_drafts

http://www.2ality.com/

https://leanpub.com/understandinges6

http://ecmascript6.org/

http://addyosmani.com/blog/a-few-new-things-coming-to-javascript/

https://brendaneich.com/2012/10/harmony-of-dreams-come-true/

http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts&do=backlink


eyalvardi.wordpress.com

eyalvardi.wordpress.com

Software

Scope & Functions in ECMAScript 6.0