JavaScript 関数式と無名関数と即時関数

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

関数式と無名関数	関数式と無名関数
	関数式とは
	無名関数とは
	アロー関数
	再帰処理を行う
即時関数	即時関数(即時実行関数式)
	()の位置
	strictモードの時の即時関数の注意点
	.call(this)を使用する

関数式と無名関数

関数式とは

関数式は、関数を値として変数に代入しているものです。

<script>
    const log1 = function logTest(num) {
        console.log(num);
    }
    log1("100"); // "100"が表示される
</script>

2～4行目のfunction以降を変数log1に代入しています。
関数名は、logTestです。
5行目は、変数に引数を指定して関数を実行しています。

関数式は、関数リテラルとも呼ばれます。

無名関数とは

関数式で関数名を省略したものが無名関数です。

<script>
    const log1 = function (num) {
        console.log(num);
    }
    log1("100"); // "100"が表示される
</script>

2～4行目のfunction以降を変数log1に代入しています。
関数名は、ありません。
5行目は、変数に引数を指定して関数を実行しています。
関数名がなくても変数名で関数を指定できるので問題がありません。

無名関数は、匿名関数とも呼ばれます。

アロー関数

アロー関数は、無名関数をよりシンプルに書くために作成されました。
ECMAScript2015から使用できます。

<script>
    const log1 = a => console.log(a);

    log1("100"); // "100"が表示される
</script>

2行目は=>の記号があります。アロー関数です。関数名はありません。処理を変数に代入しています。
4行目は、変数に引数を指定して処理を実行しています。
アロー関数はECMAScript2015から使用できます。

再帰処理を行う

関数式で関数名がある場合は再帰処理を行うことができます。

<script>
    const log1  = function logTest(a) {
        if (a > 3) {
            return;
        }
        console.log("ループ" + a);
        ++a;

        logTest(a); // 関数名を指定
    }
    log1 (1); //ループ1,ループ2,ループ3と表示される
</script>

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

以下は、MDNの関数式のリンクです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/function

即時関数(即時実行関数式)

(function () {
文
})();

即時関数(即時実行関数式(IIFE (Immediately Invoked Function Expression)) です。

閉じたスコープを作成できます。即時関数内の変数は即時関数内で完結します。
その結果、変数の有効範囲を限定できコードの見通しがよくなります。
一度しか行わない処理で使用します。

作り方は、関数式をかっこ()でくくり、末尾にかっことセミコロン();をつけます。
関数名はつけても省略しても同じです。

<script>
(function logTest(num) {
        console.log(num);
    })("1"); // 1
</script>

()の位置

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

<script>
(function logTest(num) {
        console.log(num);
    }("2")); // 2
</script>

2行目に関数名がありますが省略しても同じ結果になります。

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

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

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

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

.call(this)を使用する

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

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

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

以下は、MDNのIIFE (即時実行関数式)のページのリンクです。
https://developer.mozilla.org/ja/docs/Glossary/IIFE