Panda Noir

JavaScript の限界を究めるブログでした。最近はいろんな分野を幅広めに書いてます。

関数はアロー関数と function どちらで書くべきなのか?

結論: (トップレベルで関数を宣言するときに限り)function かアロー関数かは好みの問題。

アロー関数が出てきた当初と状況が変わってきた

www.pandanoir.info

2016年に「function よりアロー関数を使うべき(function は適切な場面でのみ使うべき)」という記事(↑)を書きました。それから年数が経って状況が変わったので改めて2023年現在の意見を書こうと思います。

おさらい: function は役割が4つある

function は呼び出し方によって役割が異なります。以下の4つが function の呼び出し方です。

  • 関数として
  • クラスのコンストラクタとして
  • クラスのメソッドとして
  • apply、callを使って

対してアロー関数は関数としてしか呼び出せません。

コレがアロー関数と function の大きな違いです*1

アロー関数で書くべきだった理由

一見できることが多い function が良さそうですが、 逆に言えば呼び出し方を見るまで function がどの役割を担っているのか区別できません。そのため、用途が狭いアロー関数の方が優位でした。

このように、以前はアロー関数に圧倒的なメリットがあり、function とアロー関数のどちらを使うかは単なる好みの問題ではありませんでした

function はもはや関数としてしか扱われていない

ただし、function は今やほぼ関数としてしか使われていません。クラスのコンストラクタは class で書けますし、.apply と .call も .bind でほぼカバーできます。そのため、this にまつわる諸問題を考慮して function を書くことはほとんどありません。

結論

class や .bind の登場により function が担うべき役割はほぼ関数として(or クラスメソッドとして)のみになりました。そのため、「アロー関数は関数だと明白に分かって良い」という主張は弱まっています。

もはや実務上のクリティカルな問題はほぼ有りません。そのため、トップレベルで関数を宣言する時に function とアロー関数のどちらを使うかは好みの問題です。

逆に言えば、トップレベル以外(関数内部など)で関数を宣言するときは this をどう扱いたいかによって使い分ける必要があります(function を使うと that = this と書かざるを得ないシーンがある)。この時は好みの問題でもなんでもありません。ちゃんと使い分けましょう。

(注: arguments や apply を使う、クラスコンストラクタとして function を使うことは断固として勧めません。もはやバッドプラクティスと言って良いでしょう)

*1:他にも arguments が使えるか、巻き上げがあるかなど違いがあります