ES6で追加されたアロー関数基礎知識メモ
書き方
・ES5では
const add = function(a, b){ return a+b; }
・ES6では
const add = (a, b)=>{ a++; return a+b; };
1行で完結するのであれば
{}とreturnを省略できる
const add = (a, b)=>a+b;
引数が”””1つ”””なのであれば
引数の()を省略できる
const add = a => a+2;
引数が0個なら
引数の()は省略できない
const ReturnVal = () => 24;
アロー関数の利点
エラーが出る例
下記の場合'teamName' が undefinedになる
const team = { members:['太郎','花子'], teamName:'スーパーチーム', teamSummary:function(){ return this.members.map(function(member){ //ここのthisはteamオブジェクトではないためエラーになる return `${member}は${this.teamName}の所属です。`; }); } };
ES5のエラー回避方法
①
const team = { members:['太郎','花子'], teamName:'スーパーチーム', teamSummary:function(){ return this.members.map(function(member){ return `${member}は${this.teamName}の所属です。`; }.bind(this)); } };
②
const team = { members:['太郎','花子'], teamName:'スーパーチーム', teamSummary:function(){ let self = this; return this.members.map(function(member){ return `${member}は${self.teamName}の所属です。`; }); } };
ES6のエラー回避方法
const team = { members:['太郎','花子'], teamName:'スーパーチーム', teamSummary:function(){ return this.members.map(member => `${member}は${this.teamName}の所属です。`); } };
なぜ回避できるのか
これはレキシカルスコープという概念ができたから
アロー関数自身は this を持ちません。レキシカルスコープの this 値を使います。つまり、アロー関数内の this 値は通常の変数検索ルールに従います(スコープに this 値がない場合、その一つ外側のスコープで this 値を探します)。
どこでもアロー関数を使っていいわけではない
下記の場合エラーになる
const profile = { name: '太郎', getName:()=>{return this.name} }; profile.getName();
ここでは前後関係ができていないので
TypeError: Cannot read property 'name' of undefined
となる
正しくはこうする
const profile = { name: '太郎', getName:function(){return this.name;} }; profile.getName();