寝て起きて寝て

プログラミングが出来ない情報系のブログ

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 値を探します)。

MDNから引用

どこでもアロー関数を使っていいわけではない

下記の場合エラーになる

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();