Scope & Functions in ECMAScript 6.0

© 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com 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.

© 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com 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); };

© 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com 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;

© 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com 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) … …

© 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com 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 here changeColor(); Windows color changeColor() anotherColor swapColos() tempColor()

© 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com function addEvent() { var id = "xdi9592"; document.getElementById("save-btn").onclick = function (event) { saveDocument( id ); }; } From parent scope

© 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com 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]]

© 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com 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)

© 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com 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 });

© 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com var funcs = []; for ( var i = 0; i < 10; i ++) { funcs.push(( function(value) { return function() { console.log(value); } }(i))); } funcs.forEach( function(func) { func(); // outputs 0, 1, 2, 3, up to 9 });

© 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com var funcs = []; for ( let i = 0; i < 10; i ++) { funcs.push( function() { console.log(i); }); } funcs.forEach( function(func) { func(); // outputs 0, 1, 2, 3, up to 9 });

© 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com const PI = 3.14159; // Can't re-assign PI = 3; console.log(PI); // 3.14159 // Can't re-initialize const PI = 4; console.log(PI); // 3.14159 // Can't re-declare var PI = 4; console.log(PI); // 3.14159

© 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com  Undefined  Null function history( lang = "C", year = 1971 ) { // lang = lang || "C"; // year = year || 1971; return lang + " was created around the year " + year; }

© 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com // defining rest parameters with 3 dot syntax function push(array, ...items) { items.forEach(function(item) { array.push(item); console.log( item ); }); } // 1 fixed + 3 variable parameters var planets = []; push(planets, "Mercury", "Venus", "Earth");

© 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com Spread operator let values = [25, 50, 75, 100]; Math.max.apply( Math , values ); Math.max(...values); Math.max(...values , 200 , 300 );

© 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com 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" }; }

© 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com 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

© 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com var PageHandler = { id: "123456", init: function() { document.addEventListener("click", (function(event) { this.doSomething(event.type); }).bind(this), false); }, doSomething: function(type) { console.log("Handling " + type + " for " + this.id); } }

© 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com var PageHandler = { id: "123456", init: function() { document.addEventListener("click", event => this.doSomething(event.type), false); }, doSomething: function(type) { console.log("Handling "+type+" for " + this.id); } };

© 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com let v = ( function(name) { return { getName() { return name; } }; }( "Eyal" ) ); let v = ( (name) => { return { getName() { return name; } }; })( "Eyal" );

© 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com 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

Scope & Functions in ECMAScript 6.0

More Related Content

What's hot

Viewers also liked

Similar to Scope & Functions in ECMAScript 6.0

More from Eyal Vardi

Recently uploaded

Scope & Functions in ECMAScript 6.0