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

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

目次

無名関数

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

コード

比較用として最初に通常の関数のサンプルです。

<script>
function test1(a){
	console.log(a);
}
test1("100"); // "100"が表示される

</script>

2~4行目は、通常の関数です。2行目のtest1が関数名です。
5行目は、引数を指定して関数を実行しています。

次は、無名関数のサンプルです。

<script>
const test2 = function(b){
	console.log(b);
}
console.log(test2); // ƒ (b){console.log(b);}

test2("200"); // "200"が表示される

</script>

2~4行目は、無名関数です。
2行目は、functionの後に関数名がありません。
また、定義した関数をリテラルとして変数test2に代入しています。
リテラルとは、コードに記述された値のことです。
5行目は、変数の値を表示しています。2~4行目の関数の定義が入っていることがわかります。
7行目は、引数を指定して関数を実行しています。

 

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

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

コード

無名関数で再帰処理を行うサンプルです。

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

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

 

即時関数

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

コード

即時関数のサンプルです。

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

 

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

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

 

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

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

 

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

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

console.log(test3); //1000
</script>

 

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

strictモードのときに、即時関数内でthisを指定するとundefinedになってしまいます。thisはwindowオブジェクトを指します。

コード

strictモードのときの即時関数でthisを使用したサンプルです。

<script>
"use strict";

(function(){
	console.log(this.screen.width); //undefined
}());	
	
</script>

2行目は、strictモードにしています。
5行目は、即時関数内でthisを指定していますがundefinedになります。
strictモードでないときはundefinedにならず画面の幅の1920などが表示されます。
thisはwindowオブジェクトを指します。

.call(this)を使用する

上記コードの対策をしたサンプルです。
.call(this)を使用します。

<script>
"use strict";

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

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

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

関連の記事

JavaScript 関数のサンプル
JavaScript クロージャのサンプル
JavaScript 引数/戻り値が関数のサンプル(高階関数)

△上に戻る