javascript アロー関数のサンプル

javascript アロー関数のサンプル

ES2015(ES6)から利用できるJavaScriptの構文であるアロー関数のサンプルコードを記述してます。アロー関数を使用することにより「function」を記述することがなくので、より簡潔にコードを書くことができます。

環境

  • OS windows10 pro 64bit
  • Apache 2.4.43
  • ブラウザ chrome 84.0.4147.105

※windows10にApacheのインストールはこちら

アロー関数サンプル

以下は、通常の関数をアロー関数で記述したサンプルとなります。

通常の関数

アロー関数に変更すると、以下のように記述することができます。

即時関数として利用

以下のように、すぐ実行できる即時関数としても、利用できます。

return省略

return命令を省略することも可能です。

ただし、オブジェクト返す場合は、( )がなければエラーとなります。

( )を使用するとエラーにはなりません。

改行もできます。

ただし「=>」の前で改行するとエラーとなります。

引数が1つ

引数が1つしかない場合は、()も省略して記述することができます。

引数なし

引数がない場合は、以下のように記述することができます。

厳格モード

厳格モードでもエラーにはなりません。

サンプルコード

filterなどのコールバック関数に使用すると、コードを短縮化することができます。

通常の関数

アロー関数

その他は下記に記載してます。

thisの参照先の違い

thisの参照先

アロー関数と通常の関数では、呼び出し方によっては、thisの参照先が異なります。

アロー関数の場合は「宣言された時点で、thisが確定」され、
通常の関数は「宣言された時点では、thisが何かは決まってない」ので呼び出し元により、変わります。

例えば以下のように、通常の関数の場合は、宣言された元のオブジェクトが参照されますが、

アロー関数の場合は、宣言された時点でthisが確定されます。ようするにアロー関数はthisを持っていないことになります。

ちなみに、「use strict」で厳格モード時は以下の場合は、エラーとなります。

アロー関数は、thisを持たないので、以下のようなコードを実行するとwindowオブジェクトを参照します。

実行結果

addEventListenerに使用する

例えば「onclick」イベントを通常の関数とアロー関数で記述した場合は「this」の参照先が異なります。

通常の関数の場合は、ハンドラー(コールバック関数)の中の「this」の値は要素への参照となるため「button」そのものが参照されます。

実行結果(通常の関数)

アロー関数の場合は、windowオブジェクトが参照されます。

実行結果(アロー関数)

なので、アロー関数は通常の関数のように、windowオブジェクトが参照する際に、bind()メソッドを使用しなくてもよくなります。

実行結果(通常の関数 bind使用時)

コールバック関数に利用

また、アロー関数はコールバック関数に利用すると同様にbind()メソッド使用しなくてもよくなります。

実行結果(アロー関数)

通常の関数の場合は、thisを持つので、この場合はwindowオブジェクトを見ます。

実行結果(通常の関数)

その他の違い

newできない

アロー関数は、newすることができません。コンストラクタとして使用することができません。

なので、以下のような使用方法はできません。

継承できない

継承することもできません。

arguments使用できない

argumentsを使用することもできません。

ie11でエラー

ie11ではアロー関数は、構文エラーとなります。

アロー関数のブラウザ対応状況はこちらで確認できます。

また無名関数であれば、ie11でも利用することは可能です。

呼び出す順番

アロー関数は、コードを記述してからでないと呼び出せません。

無名関数も同様なので、変数の宣言順序によるエラーとなります。

prototypeプロパティ

アロー関数に、prototypeプロパティはありません。

同じ名前の引数

アロー関数の場合は、同じ名前の引数を使用することはできません。

ちなみに、「use strict」で厳格モード時は通常の関数でもエラーとなります。

アロー関数を使用しない方がいいパターン

オブジェクト内でのthisの参照

以下のように、thisをオブジェクト内のメソッドで参照している場合は
「NAN」が返ります。

prototypeメソッドでも同じです。

イベント発生時に自身を操作したい場合

「onclick」イベント時に、クリックした要素自体の色を変えたい時などの場合に、thisを使用するとアロー関数の場合はエラーとなります。

実行結果(アロー関数)

通常の関数の場合は、正しく動作します。

実行結果(通常の関数)