JavaScript 無名関数と即時関数

JavaScript の無名関数

「無名関数」はその名の通り関数名がない関数のことです。「匿名関数」ともいいます。

無名関数の宣言と処理の書式

var 変数名 = function (){
    実行する処理;
 }

無名関数は、名前のない関数を変数に代入して使用します。

無名関数の呼び出し

無名関数が代入されている変数名();

コード例

var output = function(){
   document.write("出力用関数です。</br>") //画面出力処理を定義
 }
 for(var i = 0; i < 5; i++){
    output();　　　　　　　　　　　　　　　　//無名関数の呼び出し
 }

コードの解説

1~3行目【var output = function(){
document.write(“出力用関数です。”)
}】
document【ﾄﾞｷｭﾒﾝﾄ】オブジェクトのwrite【ﾗｲﾄ】メソッドを使用して文字列と改行を出力する処理をfunction【ﾌｧﾝｸｼｮﾝ】文で関数として定義し、varキーワードを使用して宣言した変数「output」に代入します。

4~6行目【for(var i = 0; i < 5; i++){
output();
}】
for【ﾌｫｰ】文を使用した繰り返し処理の中変数「output」に格納された無名関数を呼び出して実行します。

実行結果

引数がある無名関数の書式

var 変数名 = function(引数1,引数2,・・・・){
          実行する処理;
　}

関数に値を渡して利用することができます。関数に渡す値のことを「引数」といいます。

引数がある無名関数の呼び出しの書式

無名関数で宣言した変数名(引数1,引数2,・・・);

コード例

var output = function(count){
    document.write(count+"回目の関数呼び出しです。</br>")
  }
  for(var i = 0; i < 5; i++){
     output(i+1);
  }

コードの解説

1~3行目【var output = function(count){
document.write(count+”回目の関数呼び出しです。</br>”)
}】
function文に値を受け取る引数「count」を設定してdocumentオブジェクトのwriteメソッドを使用して引数「count」の値と文字列と改行を出力する処理を定義した関数を定義します。

4~6行目【for(var i = 0; i < 5; i++){
output(i+1);
}】
for文を使用して繰り返し処理を定義し、その中で変数「output」に格納した無名関数に変数「i」+1の値、つまり繰り返しの回数を引数として渡して無名関数を実行します。

実行結果

戻り値がある無名関数の書式

var 変数名 = function(){
         実行する処理;
　　　　　return 戻り値;
}

関数は、処理をした結果を「呼び出し元」に返すことができます。呼び出し元に返す値は「戻り値」といい「戻り値」を「呼び出し元」に返す場合は、return【ﾘﾀｰﾝ】キーワードを使用します。

戻り値がある関数の呼び出しの書式

 var 変数名 = 無名関数が格納されている変数名()

「呼び出し元」で関数の「戻り値」をうけとるには上記の書式で「変数」に「戻り値」を代入します。

コード例

var output = function (){
    return "戻り値です。";
  }
  for(var i = 0; i < 5; i++){
     var result = output();
     document.write(result+"</br>");
  }

コードの解説

1~3行目【var output = function (){
return “戻り値です。”;
}】
varキーワードを使用して変数「output」を宣言しreturn【ﾘﾀｰﾝ】キーワードを使用して戻り値の文字列を設定し、function文で無名関数を定義します。

4~7行目【for(var i = 0; i < 5; i++){
var result = output();
document.write(result+””);
}】
for文を使用して5回の繰り返し処理を定義します。

繰り返し処理の中でvarキーワドを使用して変数「result」を宣言し、戻り値がある無名関数が格納されている変数「output」を代入します。

documentオブジェクトのwriteメソッドを使用して変数「result」に格納されている値と改行を出力します。

実行結果

引数と戻り値がある無名関数の書式

var 変数名 = function(引数1,引数2,・・・){
         実行する処理;
　　　　　return 戻り値;
}

引数と戻り値がある無名関数の呼び出しの書式

 var 変数名 = 無名関数が格納されている変数名(引数1,引数2,・・・)

コード例

var triangle = function(width,height){
   return width*height/2;
 }
     var triangle2D = [[5,5],[10,10],[20,10]];
 for(var i = 0; i < 3; i++){
     var width = triangle2D[i][0];
     var height = triangle2D[i][1];
     var result = triangle(width,height);
         document.write(i+1+"つ目の三角形の面積は"+result+"です。</br>");
 }

コードの解説

1~3行目【var triangle = function(width,height){
return width*height/2;
}】
function文で無名関数を定義して引数(受け取る値)に三角形の底辺の幅が格納されている変数「width」と三角形の高さの長さが格納されている変数「height」を設定し、returnキーワードを使用して戻り値として三角形の面積を求める計算式を設定しvarキーワードを使用して変数「triangle」を宣言して無名関数を代入します。

4行目【var triangle2D = [[5,5],[10,10],[20,10]];】
varキーワードを使用して三角形の底辺と高さの値を2次元配列変数「triangle2D」に代入します。

5~8行目【 for(var i = 0; i < 3; i++){
var width = triangle2D[i][0];
var height = triangle2D[i][1];
var result = triangle(width,height);】
for文を使用して変数「i」を宣言し、繰り返し処理の中で変数「i」の値が0~2に変化するように定義します。

varキワードを使用して変数「width」を宣言して2次元配列変数「triangle2D」のi行の1列目の値を代入します。

varキワードを使用して変数「height」を宣言して2次元配列変数「triangle2D」のi行の2列目の値を代入します。

varキワードを使用して変数「result」を宣言して変数「triangle」に格納されている無名関数を呼び出して実行し、変数「result」に実行結果（三角形の面積）を代入します。

9~10行目【 document.write(i+1+”つ目の三角形の面積は”+result+”です。”);
}】
documentオブジェクトのwriteメソッドを使用して0~2に変化する変数「i」の値に1を加算して回数を出力し、変数「result」に格納されている三角形の面積と改行を出力します。

実行結果

即時関数

即時関数はJavaScriptが読み込まれたときに1回だけ実行される「無名関数」です。

即時関数は関数の定義と同時に即実行されるため関数を呼び出す必要がありません。

即時関数の宣言と書式

var 変数名 = (function(引数1,引数2,・・・・){
         実行する処理;
    return 戻り値;
})(即時関数への引数1,即時関数への引数2,・・・・);

即時関数で使用された変数は「ローカル変数」となり即時関数外から参照することはできません。

これは、即時関数を使用するメリットでありプログラムが意図しない動作をすることを防ぐことにもつながります。

コード例

var triangle = (function(width,height){
   return width*height/2;
 })(10,10);
  document.write("三角形の面積は"+triangle+"です。</br>");

実行結果

以上で、JavaScript の無名関数と即時関数についての解説を終了します。ありがとうございました。