アロー関数
functionキーワード、ブロックの{}、returnの省略
アロー関数
// ES5
var add = function(a, b) {
return a + b;
};
// ES6
var add = (a, b) => {
return a + b;
};
var add = (a, b) => a + b;
var square = n => n * n;
[1, 2, 3, 4].filter(n => n% 2 === 0).map(n => n * n);
http://es6-features.org/#ExpressionBodies
http://es6-features.org/#StatementBodies
アロー関数のthisの補足
アロー関数を定義したコンテキストでthisを補足する。
ES5の場合、setTimeout関数の引数に指定された無名関数の内部ではthisがグローバルオブジェクトを指してしまうので、外側で一度thisをself変数に保存、もしくはbindメソッドによってthisを束縛する必要がある。
アロー関数を使うとthisは自動的に補足されるため、selfやbindを自分で書く必要がない。
thisの補足
// ES5
var john = {
name: "John",
helloLater: function() {
// this (john) を保存しておく
var self = this;
setTimeout(function() {
// ここでのthisはjohnではないのでselfを使う
console.log("Hello, I'm " + self.name);
}, 1000);
}
}
john.helloLater();
// 「"Hello, I'm John"」が１秒後に表示される
// ES6
var john = {
name: "John",
helloLater: function() {
// アロー関数を使うと、
setTimeout(() => {
// ここでのthisはjohnなのでそのまま使える
console.log("Hello, I'm " + this.name);
}, 1000);
}
}