アロー関数

メモ

  • アロー関数は、匿名関数の冗長性を排除 (他言語では、ラムダ式)
  • this は定義位置で決定 (function は呼び出し元で決定)
  • arguments【引数リスト】はアクセス不可

構文

(【パラメータリスト】) => {【関数処理】}
(【パラメータリスト】) => 【戻り値】

【パラメータリスト】:カンマ区切りの引数


・【パラメータリスト】が1個の引数 (x):括弧は省略可
x => {【関数処理】}
x => 【戻り値】

・【パラメータリスト】が0個の引数:括弧のみ
() => {【関数処理】}
() => 【戻り値】

// 通常の関数
var func01 = function(x, y) { return x * y;};
var func02 = function(x) { return x * x;};
var func03 = function() { return 123;};
console.log(func01(2, 3));  // 出力:6
console.log(func02(2));     // 出力:4
console.log(func03());      // 出力:123

// アロー関数 (複数引数)
var arrow11 = (x, y) => { return x * y; };
console.log(arrow11(2, 3));  // 出力:6
var arrow12 = (x, y) => x * y;
console.log(arrow12(2, 3));  // 出力:6

// アロー関数 (1個の引数)
var arrow21 = x => { return x * x; };
console.log(arrow21(2));     // 出力:4
var arrow22 = x => x * x;
console.log(arrow22(2));     // 出力:4

// アロー関数 (引数なし)
var arrow31 = () => { return 123; };
console.log(arrow31());      // 出力:123
var arrow32 = () => 123;
console.log(arrow32());      // 出力:123
var obj = {
  func: function () {
    var funcIn = function() { console.log(this); };
    funcIn();
    var arrowIn = () => { console.log(this); };
    arrowIn();
  }
};
obj.func();
// 出力:Window {} ブラウザから呼び出しの場合
// 出力:Object {}