【JavaScript】アロー関数の書き方とthisを使う場合の注意点

アロー関数とは？

アロー関数 | MDN

アロー関数式 は、その名のとおり矢印を使って記述し、function 式より短い構文で同様な内容を記述することができます。なおthis, arguments, super, new.target を束縛しません。また、アロー関数式は、メソッドでない関数に最適で、コンストラクタとして使うことはできません。

アロー関数とは通常の関数を省略した記法です。
しかし完全に同じという訳ではないため間違いを生んでしまうこともあります。
この記事ではアロー関数の書き方と、関数内でthisを使う場合の注意点について書きました。

アロー関数の書き方

一例として、数値を受け取り倍にして返す関数を書いて比較してみましょう。
アロー関数では引数を（）で囲った後、=>（アロー）を使って記述します。

通常の関数とアロー関数

// 通常の関数
const func = function(number) {
  return number * 2;
};

// アロー関数
const arrowFunc = (number) => {
  return number * 2;
};

また、アロー関数はいくつかの条件が揃えばさらに記法を省略することができます。
- 引数が1つであれば（）を省略できる
- 本体が一文の場合ブロックスコープとreturnを省略できる

さきほどのアロー関数もこの条件を満たしているため省略してみましょう。

省略したアロー関数

const arrowFunc = number => number * 2;

このように短縮することができました。

アロー関数内でthisを使用する

通常の関数ではthisの値は呼び出される時に決まりますが、アロー関数では関数が宣言された時に決まります。

試しに2つの関数内でthisを使った比較を見てみましょう。

通常の関数とアロー関数のthisを比較

const person = {
  age: 20,
  func: function() {
    return this.age;
  },
  arrowFunc: () => {
    return this.age;
  },
};

console.log(person.func()); // 20
console.log(person.arrowFunc()); // undefined

上記の場合、アロー関数内のthisはグローバルオブジェクトを参照しているためageがundefinedになってしまいました。
アロー関数は単純な省略記法ではないので注意が必要です。