JavaScriptで、変数名を省略する記法

無名関数について説明する前に、JavaScriptで変数名を省略する書き方を説明します。

例えば、JavaScriptで今年の西暦を調べるには、次のようにします。

これは、dayという名前の変数の宣言を省略して、カッコで括っても同じです。つまり、下のようにも書けます。

カッコの中で、new Dateを行ない、その値のメソッドgetFullYearを使って処理をしています。

これは、変数dayを1回しか使わないのであれば、こういう書き方も出来るという例です。

JavaScriptでの関数の宣言方法は２通り

JavaScriptで関数を宣言する方法は、２通りあります。

上の２つは、どちらもhogeという名前の関数を宣言しています。

JavaScriptの無名関数

関数宣言の方法２を使って、下のような処理をするとします。

これは、今年の西暦を調べたときのように、下のように書けます。

このような、名前を宣言していない関数のことを無名関数と言います。無名関数には、引数も与えられます。

通常、関数は何度も処理を繰り返すために作るので、名前をつけて宣言しますが、1回しか使わない関数の場合は、こういう書き方も出来ます。

1回しか使わない関数とは

1回しか処理を行なわないのであれば、関数にせず、そのまま処理を書いてもいいような気もします。では、HTMLの中で下のように書いたとします。

これでも、resultは20になります。ですが、もし別の場所でも変数numが使われていたとしたらどうなるでしょう。

ブログでは、好きなようにブログパーツを設置できます。上の処理の前に別の人が作った、次のような内容のブログパーツを貼っていたとします。

この後に、先ほどの処理が行なわれると、グローバル変数のnumは、1000ではなく、2に書きかえられます。

window.onloadは、HTMLのすべてを読み終わってから動作しますので、ページ読み込み後に

「いらっしゃいませ！あなたは1000人目のお客様です！」

と表示されるはずのものが

「いらっしゃいませ！あなたは2人目のお客様です！」

と表示されてしまいます。これでは、あんまりではないですか？

こういう悲しい誤作動をなくすために、無名関数を使って、グローバル変数ではなく、ローカル変数にすることも出来ます。

無名関数を使って、関数を返す

無名関数を使って、よくやる手法で、複数回使う関数を、最初に選択しておくという方法があります。例えば下の関数を見てみましょう。

var hoge = function(elem, event, func){
	if(elem.addEventListener){
		elem.addEventListener(event, func, false);
	}else if(elem.attachEvent){
		elem.attachEvent('on'+event, func);
	}
}

この関数をそのまま使うと、呼び出す度にif文の処理をします。しかし、addEventListenerなのか、attachEventなのかは、変化するはずのない結論なので、下の様にすれば、if文の処理は最初の1回だけで済みます。

var hoge = (function(){
	if(window.addEventListener){
		return function(elem, event, func){
			elem.addEventListener(event, func, false);
		}
	}else if(window.attachEvent){
		return function(elem, event, func){
			elem.attachEvent('on'+event, func);
		}
	}
})();