最終更新:2020-06-05 (金) 02:08:24 (29d)  

JavaScript/アロー関数
Top / JavaScript / アロー関数

JavaScript/関数式より短い構文

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/arrow_functions

構文

  • (param1, param2,, paramN) => { statements }
    (param1, param2,, paramN) => expression
             // 右と等価: (param1, param2, …, paramN) => { return expression; }
    
    // 引数が 1 個だけの場合、丸括弧 () は任意です:
    (singleParam) => { statements }
    singleParam => { statements }
    
    // 引数がない場合、丸括弧を書くべきです:
    () => { statements }

無名関数の省略記法

以前

  • var fn = function (a, b) { }

ES2015

  • var fn = (a, b) => { }

特徴

  • 名前を付けることができない(常に匿名関数)
  • thisが静的に決定する
  • functionキーワードに比べて短く書くことができる
  • newできない(コンストラクタ関数ではない)
  • argumentsを持たない

メモ

  • 引数が一つの時には「()」を省略できる
  • 関数bodyが1つのreturn文の時はブロックと「return」を省略できる。
    [1, 2, 3].map( function (v) { return v * v } )  // [1, 4, 9]
    [1, 2, 3].map( v => v * v )  // [1, 4, 9]

this

  • 「this」は関数が定義されたスコープでのthisをそのまま指す。

対応

  • Google Chrome 45?
  • Firefox 22? (22.0)
  • Opera 32?
  • Safari 10?

参考

関連

  • ジェネレータ関数?
  • ブロックレベル関数?