(Fat) arrow function
var y = (x) => x + 1 var y = function(x) {
return x + 1;
}
ES6 ES5
Slide 10
Slide 10 text
(Fat) arrow function
var y = function(x) {
return x + 1;
}
ES6 ES5
Syntax sugar
var y = (x) => x + 1
Slide 11
Slide 11 text
(Fat) arrow function
var y = function(x) {
return x + 1;
}
ES6 ES5
Syntax sugar
Lexical `this` binding
var y = (x) => x + 1
Slide 12
Slide 12 text
(Fat) arrow function
var y = function(x) {
return x + 1;
}
ES6 ES5
No constructor
Syntax sugar
Lexical `this` binding
var y = (x) => x + 1
Slide 13
Slide 13 text
var y = (x) =>
{return x + 1}
var y = function(x) {
return x + 1;
}
ES6 ES5
Slide 14
Slide 14 text
var y = (x) =>
{return x + 1}
var y = function(x) {
return x + 1;
}
var z = (x, y) =>
({
x: x,
y: y
})
var z = function(x, y) {
return {
x: x,
y: y
};
}
ES6 ES5
Slide 15
Slide 15 text
var mapFn = words =>
words.map((w) => w.length);
var mapFn = function(words) {
return words.map(function(w) {
return w.length;
}
}
ES6
ES5
mapFn([‘sea’, ‘beach’, ‘do’]); // [3,5,2]
Slide 16
Slide 16 text
var obj = {
doIt: function(){},
handle: function(){
var that = this;
document.addEventListener(‘click’, function(e) {
that.doIt();
});
}
}
ES3
Slide 17
Slide 17 text
var obj = {
doIt: function(){},
handle: function(){
document.addEventListener(‘click’, function(e) {
this.doIt();
}.bind(this));
}
}
ES5
var obj = {
doIt: function(){},
handle: function(){
var that = this;
document.addEventListener(‘click’, function(e) {
that.doIt();
});
}
}
ES3
Block Scoping
Each BLOCK has got its lexical environment
let/const bind variables to the lexical environment
Variables declared with let/const are NOT hoisted
Slide 25
Slide 25 text
var vs let
(function() {
console.log(y) // “undefined”
if (true) {
var y = “value”;
}
console.log(y) // “value”
}());
Slide 26
Slide 26 text
var vs let
(function() {
if (true) {
let y = “value”;
}
console.log(y) // ERROR!!
}());
(function() {
console.log(y) // “undefined”
if (true) {
var y = “value”;
}
console.log(y) // “value”
}());
Slide 27
Slide 27 text
const
(function() {
const X;
X = “foo”; // ERROR: x unitialized
}());
(function() {
const X = “foo”;
X = “foo2”; // ERROR: x is read-only
}());
Slide 28
Slide 28 text
Block functions
if (true) {
function fn () {}
}
!
fn(); // ERROR!
var array = [“a”, “b”, “c”];
!
for (let [index, el] of array.entries()) {
console.log(index, el); // 0 “a”
// 1 “b”
// 2 “c”
}
!
for (let index of array.keys()) {
console.log(index);
}
!
for (let el of array.values()) {
console.log(el);
}
!