最終更新:2022-12-26 (月) 10:43:50 (478d)  

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

JavaScript/関数式より短い構文

=>

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

2つの理由からアロー関数が導入された

↑

関数を短く書きたい

↑

thisを束縛したくない

  • JavaScript/thisの内容は呼び出している場所によって変わる
  • アロー関数自身はthisを持たず、レキシカルスコープのthis値を使う
    • スコープに this 値がない場合、その一つ外側のスコープで this 値を探す
↑

構文 

  • (param1, param2, …, paramN) => { statements }
(param1, param2, …, paramN) => expression
         // 右と等価: (param1, param2, …, paramN) => { return expression; }

// 引数が 1 個だけの場合、丸括弧 () は任意です:
(singleParam) => { statements }
singleParam => { statements }

// 引数がない場合、丸括弧を書くべきです:
() => { statements }
↑

複数行 

  • {
}
  • で囲う、returnは省略不可能
↑

無名関数の省略記法

↑

以前 

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

ES2015 

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

特徴

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

省略

  • 引数が一つの時には「()」を省略できる
  • 関数bodyが１つのreturn文の時はブロックと「return」を省略できる。 
    [1, 2, 3].map( function (v) { return v * v } )  // [1, 4, 9]
    [1, 2, 3].map( v => v * v )  // [1, 4, 9]
  • 下記のような場合もreturnを省略可能 
    v => {
  name: "aaa",
  age: 123,
}
↑

this

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

対応

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

参考

↑

関連

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



検索：