JavaScript 無名関数(アロー関数式)と即時関数のサンプル

JavaScriptの無名関数(アロー関数式)と即時関数のサンプルです。

無名関数
無名関数をアロー関数式で書く
無名関数で再帰処理を行う
即時関数
strictモードの時の即時関数の注意点

無名関数

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

コード

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

<script>
const test = function(a){
	console.log(a);
}

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

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

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

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

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

コード

アロー関数式のサンプルです。

<script>

const test1 = function(a){ //アロー関数式と比較するため記述
	return(a + "です");
}
console.log(test1("赤")); // 赤です


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


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


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

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

</script>

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

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

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

コード

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

<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