JavaScrptには関数の書き方として、アロー関数というものがあります。
アロー関数式とは、より短く記述できる、通常の function 式の代替構文です。
この記事では、JSにおけるアロー関数の書き方について解説していきます。
目次
アロー関数とは
ES2015（ES6）から利用可能になった新しいJavaScriptの構文の一つです。
ES6とは、2015年に標準として策定されたJavaScriptの新しい文法。
アロー関数式は、より短く記述できる、通常の function 式の代替構文です。また、
this,arguments,super,new.targetを束縛しません。アロー関数式は、メソッドでない関数に最適で、コンストラクタとして使うことはできません。
アロー関数が導入された理由は「関数を短く書きたい」「thisを束縛したくない」の２つです。
この記事では、関数をアロー関数に変換するステップを解説しています。thisの束縛については追記します。
ステップで普通の関数をアロー関数にしていく
ステップに分けて、アロー関数にしていく過程を解説していきます。
まずはこちらが普通の関数ですね。
与えられた数字を二倍にして返す関数doubleがあるとします。
const double = function(number) {
return 2 * number;
}【世界で2万人が受講】JavaScriptエンジニアのためのES6完全ガイドで解説されているコードを元にしています。
ステップ1 「さっそくアロー関数にする」
まずはアロー関数にします。
const add = (number) => {
return 2 * number;
}
ステップ1でやったことは簡単。以下の２つです。
- functionを削除
- 引数の後ろに「=>」を追加
実はこれでもうアロー関数の完成です。
ここで終わり、と言っても過言ではないです。
ですが、JavaScriptのプロジェクトではこれよりも更に短縮されたりするので、以降解説を続けます。
ステップ2「中括弧をとる」
ステップ2です。中括弧を取ってスッキリさせました。
さっきより見やすいですね。
const double = (number) => 2 * number;ステップ2では、returnが消えていますよね。
アロー関数においては、returnする対象が１つであれば、中括弧とreturnを省略してもOKです。
中括弧を外した場合では、暗黙的にreturnが返されるというわけですね。
ステップ3「引数の丸括弧を削除する」
ステップ3、最後です。
const double = number => 2 * number;引数の丸括弧を消しました。
これが一番省略された形のアロー関数ですね。
注意点としては、引数の丸括弧を削除できるのは「引数が１つの場合のみ」です。
なので、例えば以下のように引数が２つである場合は、丸括弧の省略はできません。
const double = (number1, number2) => {
return 2 * number1 + 2 * number2;
}
また引数が存在しない場合でも丸括弧はできません。あくまで「引数が１つの場合のみ」ですね。
以上で関数をアロー関数に変換するステップ終了です。
アロー関数を使って読みやすくなる処理
アロー関数を使うことで読みやすくなる処理を紹介します。
まずは普通の関数です。
const numbers = [1, 2, 3];
numbers.map(function(number) => {
return 2 * number;
});アロー関数にすると一気にこうなり、読みやすくなりました。
const numbers = [1, 2, 3]
numbers.map((number) => 2 * number);引数が１つなので、中括弧が省略できます。
const numbers = [1, 2, 3]
numbers.map(number => 2 * number);最初の関数よりもはるかに読みやすくなりました。
JavaScriptでの重要な要素の１つであるアロー関数、使いこなせると便利ですね。
終わりに
【世界で2万人が受講】JavaScriptエンジニアのためのES6完全ガイド
という講座を多く参考にしています。
ES6で追加された関数などの使い方が詳しく、分かりやすく解説されているのでまだ慣れていない方はチェックしてみてください。
参考
【世界で2万人が受講】JavaScriptエンジニアのためのES6完全ガイド
アロー関数 – JavaScript | MDN
