JavaScriptで使われている関数にはいくつかの種類があります。
以前、JavaScriptで用意されている関数の構文や使い方について解説しました。
実はそれだけではなく、JavaScriptには、無名関数が簡略化された「アロー関数」という記法があります。書き方がさらにシンプルになる他、通常の関数とは少し違った側面があるため、今回そのアロー関数の特徴を取り上げていきます。
関数の基礎についてもう少し知りたいという方は、まずは以下の記事を参考にしてみてください。そのうえでアロー関数を学習していくと、理解が深まるかと思います。
アロー関数とは
「アロー関数」は、ES6から新しく導入された関数記法で、名前の通り「=>」を使って関数を定義します。
無名関数を簡略化するために考案されたもので、書き方が似ています。
関数の構文
アロー関数の基本構文は以下です。
無名関数の「function」部分が無くなり、代わりに「=>」が使われているのがわかります。
無名関数での書き方に慣れていれば、よりシンプルで扱いやすいでしょう。
では、実際の処理をみていきましょう。
実行結果
これは3つの身長の平均を求めています。戻り値や引数の使い方は通常の関数で扱う時と変わりありません。
また、条件によってはさらに簡略化することができます。
引数がない場合
引数がない場合は、「()」の中身を空白のままにします。この時、「()」を省略することはできません。
引数がひとつだけの場合
ただし、引数がひとつだけの場合は、「()」を省略することができます。このように引数の「name」を「()」で囲む必要はありません。
処理文が一行の場合
アロー関数の処理文が戻り値を使った一行だけの場合は、「{}」と「return」を省略して書くことができます。
結果は同じですが、省略する場合の方が、見た目がスッキリとする印象になります。この省略する記述法は良く使われるため覚えておくと良いでしょう。
アロー関数と通常の関数の違い
アロー関数は、既存の関数定義を簡略化するために導入されたため、「書き方が短くなっただけ」と思われがちですが、通常の関数と別の挙動を起こすという特徴があります。
アロー関数の書き方をおさえたところで、ここではアロー関数の特徴について触れていきます。
thisを固定化する
アロー関数の一番の特徴は、通常の関数と「this」の扱いが異なる点です。
そもそも「this」とは、読み取り専用のグローバル変数のようなものであり、どこからでも参照が可能です。
通常の関数では、呼び出し元のオブジェクトを参照し、また、スコープや状況によって、thisの意味も変化します。
しかし、アロー関数では、アロー関数が定義された段階でthisが固定化されます。
つまり、アロー関数のthisが定義時に設定された対象のまま変化することがないということです。
言葉だけだとイメージしにくいため、サンプルコードをみていきましょう。
無名関数のthisは、宣言元のオブジェクトが参照されるため、thisも変化していきます。
実行結果
無名関数をアロー関数に置き換えてみると、thisが固定されていることがわかります。
実行結果
このようにアロー関数では、関数が宣言された時点でthisが確定されます。
ES5以前は、thisを意味する内容が状況によって変更されてしまうのを抑えるために、「bind」メソッドなどを使用していましたが、アロー関数の導入によってその必要がなくなりました。
逆に、その都度thisの内容を変化させたい場合には、アロー関数の使用を控える方が良いでしょう。
コンストラクタを持たない
コンストラクタとは、関数を使って定義されたオブジェクトです。
通常は、「new」を使ってオブジェクトを生成することができます。雛形としてオブジェクトを定義し、その都度生成することが可能です。
無名関数では以下のようになります。
実行結果
しかし、アロー関数ではコンストラクタを生成することができません。
実行結果
argumentsを持たない
argumentsは、関数内のみで利用できるオブジェクトです。
通常は、配列のように「aruguments[i]」という形で関数に渡された値をすべて取得することができます。
無名関数では以下のような結果になります。
実行結果
しかし、アロー関数の場合は、argumentsを持たないため、エラーになります。
実行結果
まとめ
今回はJavaScriptの中でも特徴的なアロー関数について解説しました。
はじめはメリットを感じにくいかもしれませんが、アロー関数では、ある固まった処理を行いたい時に役立ちます。
まずは以下のポイントをおさえながら、アロー関数について理解を深めていきましょう。
- アロー関数は無名関数を簡略化した関数記法
- 「this」を固定化する
- 「コンストラクタ」を持たない
- 「arguments」を持たない
Javascript関連記事
