JavaScript 無名関数と即時関数のサンプル

JavaScriptの無名関数と即時関数のサンプルです。

目次

無名関数

  • 関数リテラルや匿名関数とも呼ばれます。
  • functionの後に関数名がありません。
  • 定義した関数を変数に代入します。
  • 変数の記述で定義した関数が実行されます。

コード

サンプルのコードです。
2行目は、functionの後に関数名がありません。定義した関数を変数testに代入しています。
6行目は、変数のtestを記述しています。定義した関数が実行されます。

<script>
	var test = function(a){
		document.write(a);
	}

	test("テスト"); // "テスト"が表示される
</script>

即時関数

  • 無名関数をかっこ()で囲み、無名関数の最後尾に引数のかっこをつけます。
    →即時に実行されます。
  • 現在のスコープを汚染せずに閉じられたスコープを作成できます。
  • 変数に代入する形にしなくても即時関数として動きます。

コード

サンプルのコードです。
正常に実行されるのは、
3-5行目の「1.無名関数をかっこでくくる+引数あり」と
18-20行目の「4.変数(var test)に代入しない+引数あり」です。
その他はイレギュラーパターンです。

<script>
	//1.無名関数をかっこでくくる+引数あり
	var test1 = (function(a){
		document.write(a);
	}("1"));	// 1が表示される
 
	//2.無名関数をかっこでくくる+引数の値なし
	var test2 = (function(a){
		document.write(a);
	}());		// undefinedが表示される
 
	//3.無名関数をかっこでくくる+引数のかっこなし
	var test3 = (function(a){
		document.write(a);
	});		// 何も表示されない
 
	//4.変数(var test)に代入しない+引数あり
	(function(a){
		document.write(a);
	}("4"));	// 4が表示される
 
	//5.変数(var test)に代入しない+引数のかっこなし
	(function(a){
		document.write(a);
	});			// 何も表示されない
</script>

再帰処理

  • 無名関数に関数名をつけると再帰処理を行うことができます。

コード

サンプルのコードです。
2行目は、test2が関数名です。
9行目は、関数名のtest2を指定しています。再帰処理になります。
11行目は、変数名を記述して無名関数を実行しています。

<script>
	var test1 = function test2(a){
		if(a>3){
			return;
		}
		document.write("ループ" + a);
		++a;
		
		test2(a); // 関数名を指定
	}
	test1(1); //ループ1,ループ2,ループ3と表示される
</script>

以下は、MDNの関数のページのリンクです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Functions

関連の記事

JavaScript クロージャのサンプル
JavaScript 高階関数のサンプル
JavaScript エスケープシーケンスのサンプル
JavaScript 例外処理のサンプル(try...catchとthrow)
JavaScript 変数の巻き上げのサンプル




△上に戻る