Scope & Functions in ECMAScript 6.0

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 here
changeColor();
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-assign
PI = 3;
console.log(PI); // 3.14159
// Can't re-initialize
const PI = 4;
// Can't re-declare
var PI = 4;

 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 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");

Spread
operator
let values = [25, 50, 75, 100];
Math.max.apply( Math , values );
Math.max(...values);
Math.max(...values , 200 , 300 );

var PageHandler = {
id: "123456",
init: function() {
document.addEventListener("click",
event => this.doSomething(event.type), false);
},
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

eyalvardi.wordpress.com

Scope & Functions in ECMAScript 6.0

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Scope & Functions in ECMAScript 6.0

Similar to Scope & Functions in ECMAScript 6.0 (20)

More from Eyal Vardi

More from Eyal Vardi (20)

Recently uploaded

Recently uploaded (20)

Scope & Functions in ECMAScript 6.0