【JavaScript】function()ではなくアロー関数を使うメリット

2015年に発表されたJavaScriptの新仕様ES6から、関数を定義する方法としてアロー関数というものが登場しました。モダンな書き方としては、従来のfunction()よりもアロー関数を利用したほうが望ましいとされています。

この記事では、function()とアロー関数の違いと、アロー関数のメリットについて書いていきます。

アロー関数とは

function hoge(arg) {
   console.log(arg);
}

const hoge = (arg) => {
   console.log(arg);
}

どちらも引数argを受け取って出力する

上は従来のfunction()で、下はアロー関数です。アロー関数ではアロー（＝＞）を使っているのが特徴ですね。どちらも引数argを受け取って、そのまま出力しています。

function()とアロー関数の大きな違い

上を見ると、別にfunction()でもアロー関数でも良いじゃん！と思うかもしれませんが、実はthisの取り扱いで違いがあります。

一言でいえば、関数内におけるthisが固定されるか、されないかの違いです。

function()のthis

this.text = 'aaa';

function hoge() { 
  console.log(this.text);
}

const obj = {
  text : 'bbb',
  func : hoge,
};

const obj_2 = {
  text : 'ccc',
  func : hoge,
};

obj.func(); // => 'bbb'
obj_2.func(); // => 'ccc'

function()がオブジェクトのメソッドとして呼び出された場合、thisはオブジェクト自身へのポインタとなります。そのため、例えばobj内の関数hoge()にあるthis.textは、obj内のtext、つまりbbbに該当します。

これは言い換えると、関数hoge()が出力する内容は、どのオブジェクトのhoge()か？によって都度変わってしまうということです。これが予期しないバグを生み出す可能性があります。

アロー関数のthis

this.text = 'aaa';

const hoge = () => { 
  console.log(this.text);
}

const obj = {
  text : 'bbb',
  func : hoge,
};

const obj_2 = {
  text : 'ccc',
  func : hoge,
};

obj.func(); // => 'aaa'
obj_2.func(); // => 'aaa'

逆にアロー関数を利用した場合。どちらも出力はaaaになります。アロー関数の場合、関数が定義された時点でthisがグローバルに定義されたthis.text、つまりaaaに固定されます。

そのため、どのオブジェクトからhoge()を呼び出しても同じaaaが出力されるので、思わぬバグを生み出すリスクがより低くなるのです。