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

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

目次

無名関数

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

コード

2行目は、
1.functionの後に関数名がありません。
2.定義した関数を変数testに代入しています。
 →testという変数に関数をリテラルとして代入しています。
 →リテラルとは、コードに記述された値のことです。
6行目は、変数のtestを記述しています。文字列の"テスト"は引数です。関数が実行されます。
8行目は、変数の値を表示しています。関数が表示されます。

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

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

	console.log(test); // f(a){ document.write(a);}
			
</script>

 

無名関数をアロー関数式で書く

無名関数をアロー関数式で書くことができます。
アロー関数式は、ECMAScript2015からできるようになりました。

3-5行目は通常の無名関数です。

9行目以降はアロー関数式です。
9行目はfunctionがありません。また引数の後に=>が追加されています。
15行目は引数を囲んでいる()がありません。引数が一つのときのみ可能です。
21行目は戻り値を返すreturnと{}と;がありません。命令がひとつのときのみ可能です。

<script>

	var test1 = function(a){
		return(a + "です");
	}
	console.log(test1("赤")); // 赤です


	var test2 = (a) => {
		return(a + "です");
	}
	console.log(test2("黄")); // 黄です


	var test3 = a => {
		return(a + "です");
	}
	console.log(test3("青")); // 青です


	var test4 = a => a + "です";

	console.log(test4("緑")); // 緑です

</script>

 

無名関数で再帰処理を行う

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

コード

2行目は、test2が関数名です。
3行目は、引数の値のaが3より大きくなったら4行目のreturnが実行され処理を抜けます。
9行目は、2行目のtest2を指定しています。再帰処理となり2行目から再度処理が行われます。

11行目は、変数名を記述して処理を実行しています。

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

 

即時関数

  • 無名関数をかっこ()で囲み、無名関数の最後尾に引数のかっこをつけます。
    →即時に実行されます。
  • 変数に代入する形にしなくても即時関数として動きます。
  • 閉じたスコープを作成できます。即時関数内の変数は即時関数内で完結します。
    →変数の有効範囲を限定できコードの見通しがよくなります。

コード

即時関数のコードです。

<script>
	(function(){
		document.write("test1"); // test1が表示される
	}());	
</script>

 

以下のコードは、上記と比べて4行目の()の位置が違います。
同じように実行できます。

<script>
	(function(){
		document.write("test1"); // test1が表示される
	})();	
</script>

 

即時関数で引数があるコードです。

<script>
	(function(a){
		document.write(a); // test2が表示される
	}("test2"));
</script>

 

即時関数で戻り値があるコードです。

<script>
	var test3 = (function(){
		return 1000;
	}());

	document.write(test3); //1000
</script>

 

strictモードの時の即時関数の注意点

strictモードの時の即時関数の注意点です。

2行目はstrictモードにしています。
strictモードのときに、5行目のように即時関数内でthisを指定するとundefinedになってしまいます。thisはwindowオブジェクトを指します。
※strictモードでないときはundefinedになりません。

<script>
	'use strict';

	(function(){
		document.write(this.screen.width); //undefined
	}());	
</script>

.call(this)を使用する

上記コードの6行目に.call(this)を追加しました。
5行目は、undefinedにならず、値が表示されます。

<script>
	'use strict';

	(function(){
		document.write(this.screen.width); //1920
	}).call(this);	
</script>

 

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

関連の記事

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



△上に戻る