アロー関数

メモ

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

構文

(パラメータリスト) => {関数処理}
(パラメータリスト) => 

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


・パラメータリストが１個の引数 (x)：括弧は省略可
x => {関数処理}
x => 


・パラメータリストが０個の引数：括弧のみ
() => {関数処理}
() =>

例

// 通常の関数
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

// アロー関数 (１個の引数)
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 {}

外部リンク (英語)

Arrow Function Definitions
ES2024 (15) ES2023 (14) ES2022 (13)
Functions and Classes
ES2024 (15) ES2023 (14) ES2022 (13)