【JavaScript入門】関数の定義方法のまとめ

よく使用する関数の定義方法と、各定義方法での違いについてまとめました。

関数の定義方法

1. function関数

2. 匿名関数

3. アロー関数(ES2015)

以下では、単純に足し算を行う関数を、それぞれの方法で定義しています。

1. function関数

お馴染みの書き方です。

2. 匿名関数(無名関数)

こちらもお馴染みの書き方です。

3. アロー関数

こちらは、ES2015(ES6)で追加された記法です。
最近のブラウザは対応しているみたいです。(ES6 compatibility table
ただ、古いブラウザは対応していないものもあるので、使用する際には実行環境を確認した方がいいかもしれません。

書式
(引数1,引数2,・・・) => { 処理を記載 }

この例では、処理の括弧 { } が省略されています。
アロー関数では、次のルールで、引数の括弧と、処理の括弧を省略することができます。

引数が1つの場合、引数を括る括弧を省略できます。(但し、引数がない場合は、省略できません)
処理が1文の場合、処理の括る括弧を省略できます。(上記の例がこちらになります)

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

4. function関数 と 匿名関数の違い

function関数 と 匿名関数 では、評価されるタイミングが異なります。

評価されるタイミング
・function関数 は、コンパイルするタイミングで関数が評価・登録されます。
・匿名関数は、実行時に関数が評価されます。

と、これだけだと分かりにくいですね。

例えば、function関数では、次のように関数の定義前に、使用してもエラーにはなりません。

これは、コンパイル時点でadd関数が評価・登録されるためです。

匿名関数は、実行時に関数が評価されるため、次のように関数定義前に使用するとエラーになります。

5. まとめ

function関数、匿名関数、アロー関数についてまとめました。

function関数と匿名関数については、古いブラウザにも対応しているので、実行環境を気にせず使用できます。
但し、匿名関数については、関数を使用する場所と、関数定義する場所に気をつける必要があります。

アロー関数については、古いブラウザでは対応していないものもあるので、実行環境を考慮する必要があります。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする