TL;DR
JavaScript で、従来の関数式の代わりに (a, b) => a + b のように短く書ける関数の式。従来の関数式とは意味に違いがあり、使い方にも意図的な制限がある。自分の this を持たず、それを囲むスコープの this を使う。
なぜ必要か
JavaScript の this は、関数の呼ばれ方によって値が変わる。ES2015 で導入されたアロー関数は、自分では this を結び付けず、それを囲む構文上のコンテキストの this を保持する。コールバックの中で外側の this を使いたいときに、bind で固定する必要がなくなる。
仕組み
本体が式 1 つなら、その値がそのまま戻り値になる。{ } のブロックで書いたときは、return が必要である。引数が 1 つだけなら、括弧を省ける。
例
const add = (a, b) => a + b
const add2 = (a, b) => {
console.log(a, b)
return a + b
}
const obj = {
count: 10,
doSomethingLater() {
setTimeout(() => {
this.count++ // this は外側のメソッドの this（obj）
}, 300)
},
}注意点
- 式の本体でオブジェクトリテラルを返すときは、
() => ({ foo: 1 })のように括弧で囲む。括弧がないと{ }がブロックとして解釈される。 this、arguments、superを持たないので、メソッドには向かない。argumentsの代わりには残余引数を使う。- コンストラクタとして
newで呼べず、yieldも使えない。 - Effective TypeScript 項目69 によると、ES2022 以降はクラスフィールドにアロー関数を使えば、その中の
thisは正しくインスタンスを指す。