ES6から導入されたアロー関数、便利ですよね。
簡潔だし理解しやすいので、通常の関数よりも好んで使っている、という人は多いように感じます。
一方で、それじゃあ通常の関数の方はもうお役御免なのかというと、個人的にはそうは思っていません。
むしろ、アロー関数でも通常の関数でもどちらでも選べる場合に関しては、基本的に通常の方を使うのが好ましいと考えています。
通常の関数を使いたい理由
アロー関数と通常の関数、両者どちらも使える状況 (注*) では、あえてどちらかを選ぶべきかを考える際、通常の関数に関して、私は下記の点を意識するようにしています。
- 呼び出し元よりも下の行で宣言できる
-
functionという記述が先頭にある分、パッと見だと通常の関数の方が関数だと理解しやすい
まずひとつ目に関してですが、通常の関数はこのように書くことが出来ます。
sayThanksTo("Mike");
function sayThanksTo(name) {
return `Thanks ${name}`;
}
一方で、アロー関数で同じことは出来ません。
sayThanksTo("Mike"); // 👈 エラーになる
const sayThanksTo = (name) => `Thanks ${name}`;
場合によっては、例えば可読性のために関数をファイルの下部にまとめて宣言しておきたいといった事が起こりえますので、その際は通常の関数を使うことになります。
また2つ目に関してですが、プログラムの記述は横文字で左から右に読んで行きますので、一番左に位置するところに function と書いてあると、より関数だと認識しやすくなると個人的には思っています。
アロー関数と変数が混ざるような状況だと、const ~ だったり、let ~ まで読んだだけでは関数なのか変数なのか判断出来ないので、パッと全体を見渡した時の視認性の高さで言うと、通常の関数の方がより高いのかなと考えています。
アロー関数を使いたい場合
基本的には通常の関数を使用しつつ、合わせて以下の場合にアロー関数を使うようにするとより可読性が上がると考えています。
高階関数を使用する時
// ⭕️
function add(a) {
return (b) => a + b;
}
// ❌
function add(a) {
return function (b){
return a + b;
}
}
無名関数を変数に代入する時
// ⭕️
const sayThanksTo = (name) => `Thanks ${name}`;
// ❌
const sayThanksTo = function(name){ return `Thanks ${name}`; };
promise や filter、map、reduce と共に使用する時
// ⭕️
const japaneseCuisine = foods.filter((food) => food.name !== "California roll");
// ❌
const japaneseCuisine = foods.filter(function(food){
return food.name !== "California roll";
});
是非お試しを。
注釈
*... あるケースによっては、そもそもどちらかしか使えなかったりします。また、上記以外の仕様の違いもありますので、合わせてこれらの知識も頭に入れておくとより良いコードが書けるようになるかと思います: https://qiita.com/suin/items/a44825d253d023e31e4d