JavaScript:通常関数・無名関数・アロー関数・即時関数

JavaScript の通常関数・無名関数・アロー関数・即時関数の違いを調べました。

 

概要

  • 通常関数より無名関数を使う方がよい
  • アロー関数は、無名関数の一部(集合記号で表すと、アロー関数 ⊂ 無名関数)
  • 通常関数・無名関数・アロー関数全てに、即時関数がある

 

 

1. 検証プログラムのひな型

 

Prog.1 検証プログラムのひな型

Prog.1 は、「検証プログラムのひな型」です。

Prog.1 の、8行目~11行目までを、入れ替えることで、各種関数(通常・無名・アロー・即時)を検証します。

 

 

 

2. 通常関数・無名関数・アロー関数

 

2.1. 通常関数

通常関数は、JavaScript で最初に学習する関数です。

通常関数の定義と実行は、以下の形式です。

  • 関数定義:function  関数名(仮引数){処理内容}
  • 関数実行:関数名(実引数)

 

Prog.2 通常関数

 

 

 

2.2. 無名関数

function の後に、関数名がないので、無名関数と呼ばれています。

関数名が無い代わりに、変数(関数名変数)を使って、関数を実行します。

無名関数の定義と実行は、以下の形式です。

  • 関数定義:var  関数名変数  =  function(仮引数){処理内容}
  • 関数実行:関数名変数(実引数)

 

Prog.3 無名関数

 

 

 

2.3. アロー関数

無名関数から、アロー関数にするには、以下のステップとなります。

  1. 「function」を削除
  2. 仮引数後の閉括弧「  )」の後ろに、矢印「  =>  」を付ける

アロー関数の定義と実行は、以下の形式です。

  • 関数定義:var  関数名変数  =  (仮引数)=>{処理内容}
  • 関数実行:関数名変数(実引数)

 

Prog.4 アロー関数

 

 

 

 

3. 即時関数

通常関数・無名関数・アロー関数全て、即時関数にできます。

各関数(通常・無名・アロー)を即時関数にするには、原則、以下の形式にします。

  • 各関数の即時関数:(各関数の関数定義)(実引数)

 

例えば、通常関数の即時関数は、以下となります。

  • 通常関数の即時関数:(通常関数の関数定義)(実引数)

 

以下で、各関数について、具体的に見ていきます。

 

 

3.1. 通常関数

通常関数を、上で述べた通りに、即時関数にすると、以下となります。

  • 即時関数:(function  関数名(仮引数){処理内容})(実引数)

 

Prog.5 通常関数の即時関数

 

 

 

3.2. 無名関数

無名関数の場合、そのまま即時関数にすると、以下となります。

  • 即時関数:(var  関数名変数  =  function(仮引数){処理内容})(実引数)

これだと、「var って、何ですか」といった内容のエラーになります。

 

そこで、var を削除すると、以下となり、検証プログラムは正常動作します。

  • 即時関数:(関数名変数  =  function(仮引数){処理内容})(実引数)

ただ、上式を見ると、明らかに、「関数名変数」はいらなそうです。

(ここだけで使用し、どこからも呼ばれないので、関数名変数はいらない!)

 

関数名変数を削除すると、最終的に以下となります。

  • 即時関数:(function(仮引数){処理内容})(実引数)

 

Prog.6 無名関数の即時関数

 

 

 

3.3. アロー関数

アロー関数の場合、そのまま即時関数にすると、以下となります。

  • 即時関数:(var  関数名変数  =  (仮引数)=>{処理内容})(実引数)

これだと、「var って、何ですか」といった内容のエラーになります。

 

そこで、var を削除すると、以下となり、検証プログラムは正常動作します。

  • 即時関数:(関数名変数  =  (仮引数)=>{処理内容})(実引数))

ただ、上式を見ると、明らかに、「関数名変数」はいらなそうです。

(ここだけで使用し、どこからも呼ばれないので、関数名変数はいらない!)

 

関数名変数を削除すると、最終的に以下となります。

  • 即時関数:((仮引数)=>{処理内容})(実引数)

 

Prog.6 アロー関数の即時関数1

 

 

Prog.6 は、Prog.7 まで、単純化できます。

 

Prog.7 アロー関数の即時関数2

 

 

参考HP

  1. cly7796.net:無名関数と即時関数について:cly7796.net
  2. GitHubGist:akkey247/main.js:【Node.js】いろんな関数の書き方
  3. Qiita:【JavaScript】アロー関数式を学ぶついでにthisも復習する話

 

 

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。