【JavaScript】即時実行関数式（IIFE）

JavaScript

2019.06.022020.03.25

ここでは、JavaScriptにおける即時実行関数式を扱います。

これはIIFE (Immediately Invoked Function Expression：即時実行関数式) と略され、即時関数とも言われます。

このIIFEは定義されるとすぐに実行される JavaScriptの関数です。ちなみにIIFEは「イフィー」と読むようです。また、この書き方はECMAScript2015以降の環境では必要なく、別の書き方で同じような効果を得ることになります。

通常の関数の呼び出し

では、即時実行関数式を見ていくことにしますが、その前に次のような通常の関数を考えて見ましょう。

function calculateAge() {
    var birthYear = 2001;
    console.log(2019 - birthYear);
}

calculateAge();

関数名をcalculateAge()で定義して、ブロック内で変数birthYearに値を渡して、console.log()で計算した値を表示する処理になっています。

calculateAge(); で関数を呼び出しています。

JavaScriptコンソールで表示するとこうなります。

今年の2019年から2001が引かれているので18と表示されているのがわかります。

これが通常の関数の呼び出しです。これは、すでに扱っている内容ですから特に問題ないと思います。

この式を即時実行関数式（IIFE）で考えてみるとこうなります。

(function() {
    var birthYear = 2001;
    console.log(2019 - birthYear);
})();

先ほどの関数を匿名関数で定義し、全体を丸括弧()で囲みます。これを関数とする為に最後に();をつけています。この最後の();部分を.call(this); に変えてメソッドで呼び出しても同じです。

これはそのまま上のように関数を呼び出すコードを記述することなく、即時実行することができます。

JavaScriptコンソールには先ほどと同じ値が表示されるのが確認できます。

このように関数を呼び出すことなく即時に実行できるので、このような書き方を即時実行関数式（Immediately Invoked Function Expression; IIFE）と呼びます。

他で同じ変数を使った式などで処理している場合、このようにするとブロックスコープを利用できるので変数の競合を防ぐことができます。先ほどの関数には外から変数にアクセスすることはできません。

このIIFEには次のようにパラメータを加えて処理することもできます。書き換えて処理してみます。

(function(electionAge) {
    var birthYear = 2001;
    console.log((2019 - birthYear) >= electionAge);
})(18);

electionAgeとして引数をとるようにしました。選挙の年齢を指定して、console.log()で選挙権があるかどうかをtrue/falseで判定するようにしています。日本では選挙年齢は18歳なので、最後に18を入れて呼び出しています。

JavaScriptコンソールには次のように表示されます。

trueと判定されているのがわかります。

このように定義した関数を即時に呼び出すことができるのが、即時実行関数式（IIFE）です。

ここでは、JavaScriptにおける即時実行関数式を扱いました。

IIFE (Immediately Invoked Function Expression：即時実行関数式) と略され、即時関数とも言われます。

通常の関数と違い、匿名関数を定義して丸括弧()で囲み、()や.call(this)などを使って、即時に呼び出すことができます。

この書き方はECMAScript2015以降の環境では必要なく、同様の効果を別の書き方で得ることになりますが、ECMAScript2015については別の機会に扱います。