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




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

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

アロー関数とは

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

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

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

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

function()のthis

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

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

アロー関数のthis

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

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