関数リテラル(匿名関数/無名関数)

広告

数値や文字列、またはオブジェクトや配列でもリテラルを記述することができました。例えば配列リテラルは次のように記述していました。 

[値1, 値2, 値3, ...]

同じように関数についても関数リテラルを記述することができます。関数リテラルは匿名関数や無名関数とも呼ばれますが次のように記述します。 

function(引数1, 引数2, ...){
  実行する処理;
  ...
}

関数を定義する場合と基本的な構成は同じですが、関数リテラルの場合は関数名を記述しません(記述することもできます)。その為匿名関数や無名関数などとも呼ばれます。

関数リテラルは配列リテラルやオブジェクトリテラルなどと同じように変数に代入することができます。 

var func = function(引数1, 引数2, ...){実行する処理;};

この場合、配列の場合などと同じく関数リテラルに対する参照が変数に代入されることになります。

関数リテラルの呼び出し

関数リテラルを変数に代入した場合、変数には関数リテラルへの参照が格納されています。そこで次のように関数リテラルを呼び出すことができます。 

var func = function(引数1, 引数2, ...){実行する処理;};

func(引数1, 引数2, ...);

また関数リテラルを変数に代入せずに関数リテラルを直接呼び出すこともできます。 

(function(引数1, 引数2, ...){実行する処理;})(引数1, 引数2, ...);

具体的には次のように記述します。 

var num = (function(x, y){return (x + y)/2;})(10, 8);

上記の場合、変数numには(10 + 8)/2の結果である9が代入されることになります。

関数リテラルの使い方

関数リテラルは関数を一度定義してその関数を呼び出す場合と違い関数名を付ける必要がありません。例えば一度しか使われないような関数を一つ一つ定義していくと、関数名が他の関数や変数名とかぶっていないかどうかを気にしなくてはなりません。関数リテラルであれば関数名を使用しませんのでその心配が不要となります。

一度しか利用されない関数というのはイベント処理やコールバック関数などといった用途で利用されることがあります。また具体的な例は実際に使う時に記述したいと思います。

また関数リテラルは変数に代入することができるように、関数呼び出しの引数に関数リテラルを指定することもできます。次の例を見てください。 

function plus(num1, num2, disp){
  var sum = num1 + num2;
  disp(sum);
}

plus(10, 8, function(num){alert(num);});
plus(7, 15, function(num){document.write("<p>" + num + "</p>");});

あまり意味が無い例ですが関数sumへの3番目の引数として関数リテラルを渡しています。関数sumでは引数として渡されてきた関数リテラルを利用して出力方式を切り替えています。

サンプルコード

では簡単なサンプルで試してみます。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>JavaScript テスト</title>
</head>
<body>

<script type="text/javascript" src="./js/script5_1.js">
</script>

</body>
</html>

var heikin = (function(x, y){return (x + y) / 2;});

document.write("<p>");
document.write("平均 = " + heikin(10, 8));
document.write("</p>");

var num = (function(x, y){if (x < y) return y - x; else return x - y;})(23, 11);

document.write("<p>");
document.write("差分 = " + num);
document.write("</p>");

上記を実際にブラウザ見てみると次のように表示されます。

p5-1

( Written by Tatsuo Ikura )