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 の無名関数と即時関数についての
解説を終了します。
ありがとうございました。

スポンサーリンク
スポンサーリンク

フォローする

スポンサーリンク
スポンサーリンク