女性向けエンジニアスクール
3秒でわかる
JavaScriptで `=>` を使って書く関数式。短く書けるうえ自分の this を持たないため、コールバック内で this がずれる問題を避けられます。
もう少し詳しく
どういうものか
アロー関数は ES2015 で追加された関数式の書き方で、=> という矢印を使います。
const double = (n) => n * 2;引数が 1 つならカッコを省け、本体が式 1 つなら return も {} も省けます。省いた場合はその式の値がそのまま戻り値になります。
function 式との最大の違いは、アロー関数が 自分自身の this を持たない ことです。中で this を書くと、外側のスコープの this がそのまま見えます。arguments も持たず、new で呼ぶこともできません。
なぜ必要か
function で書いたコールバックは、呼び出し方によって this が変わります。メソッドの中で setTimeout(function () { this.name }) と書くと、その this はもうオブジェクトを指していません。以前は const self = this と退避したり .bind(this) を付けたりして回避していました。
アロー関数はこの回避策を言語仕様として取り込んだものです。合わせて map や filter のコールバックが 1 行で書けるようになり、配列処理の見た目が大きく変わりました。
具体例
const items = [
{ name: "coffee", price: 480 },
{ name: "latte", price: 520 },
];
const names = items.map((i) => i.name);
const total = items.reduce((sum, i) => sum + i.price, 0);
// オブジェクトを返すときは丸カッコで包む
const toRow = (i) => ({ label: i.name, yen: i.price });
const timer = {
label: "注文受付",
start() {
setTimeout(() => {
console.log(this.label); // 注文受付
}, 1000);
},
};setTimeout の中の this が timer のままである点が、アロー関数の効き目です。
つまずきやすいところ
{} を書く — (i) => { name.i } は関数本体と解釈されて undefined が返ります。({ ... }) と包みますthis は外側（多くの場合 undefined やモジュールスコープ）を指し、そのオブジェクトにはなりませんthis を使う — アロー関数だとクリックされた要素ではなく外側の this になります。要素は event.currentTarget から取りますnew して使おうとする — コンストラクタにはできず TypeError になります似た用語との違い
| 書き方 | 自分の this | new | arguments |
|---|---|---|---|
function 式 | 持つ（呼び出し方で決まる） | できる | ある |
| アロー関数 | 持たない（外側を継承） | できない | ない |
| メソッド短縮記法 | 持つ | できない | ある |
覚え方
「矢印は外を指している」と覚えます。矢印の関数は自分の中に this を作らず、外側の this を指し続けます。
