【JavaScript】functionの前の括弧は何?即時実行関数について解説

2021年1月13日

なぜfunctionの前に括弧がついているのか?

JavaScriptを学び始めると関数について学ぶことになります
例えば、下記の参考1のように記述すると、testという名前の関数を定義することができます。

【参考1】
function test() {
alert("テストです");
}

これを実行することで、「テストです」というアラートが表示されます。
このように、JavaScriptでは簡単に関数を定義することができますが、勉強を進めていくと、functionの前に括弧がついた以下の参考2のようなコードを目にすることがあります。

【参考2】
(function test(){
alert("テストです");
})();

これは即時実行関数と呼ばれるもので、その名の通り、定義した関数を即時に実行します。
今回はノンプログラマーの目線から、初心者の方に向けて、この即時実行関数について解説していきます。

即時実行関数の特徴 括弧がない関数と何が違うのか?

関数を実行するタイミング

即時実行関数を知る上で、必ず押さえておきたいことが、括弧がない関数との違いです。
上述の参考1のコードと、参考2のコードでは何が違うのでしょうか?
それは参考1のコードが、ただ関数を定義しただけであるのに対して、参考2の即時実行関数のコードは実行まで行うという点です。

参考1のコードは、例えば以下の参考3のようなコードを記述し、実行しなければ、「テストです」というアラートは表示されません。

【参考3】
test();

しかし、参考2の即時実行関数のコードは、実行まで行うので、上記のようなコードは不要です。
つまり、参考2のコードが読み込まれたタイミングで実行されます。

スコープ(影響の範囲)

参考1のコードと参考2のコードではスコープ、つまりコードの影響範囲も異なります。
参考1のコードはグローバル関数と呼ばれ、このコードが読み込まれている状態であれば、
例えば、test01.jsというファイルに参考1のコードを記述し、test02.jsというファイルにそれを実行させる参考3のコードを書き、test03.htmlというファイルに2つのJavaScriptファイルを読み込ませます。
このようにしても、参考1のコードは問題なく実行されます。

しかし、参考2のコードをtest01.jsというファイルに記述し、再度それを実行するために別ファイルに参考3のようなコードを記述し、2つのファイルをtest03.htmlに読み込ませたとしても、参考2の処理を再度実行することはできません。
その原因は、コードのスコープが関係しています。
参考2に記述した関数は、functionの前の括弧開きからその括弧閉じの間までしか影響範囲がありません(以下の参考2´の赤色の括弧部分)。

【参考2´】
(function test(){
alert("テストです");
})();

この範囲外ではfunction test()という関数を呼び出すことができません。
これが即時実行関数の特徴です。

参考