【JavaScript】即時関数について

以前HTML5プロフェッショナル認定試験の勉強をしていた際に即時関数というものが出てきました。

今まで使用したことがなかったため、
今回は実際に使用方法等を調べてみました。

即時関数とは

MDNには下記のように記載されています。

IIFE (Immediately Invoked Function Expression; 即時実行関数式) は定義されるとすぐに実行される JavaScript の関数です。

その名の通り即時実行される関数のことのようです。

実際の記述例も見てみましょう。

記述例

単純な記述例

通常の関数と異なり、関数定義を()で囲み、
その直後に再び()をつけて呼び出します。

(function() {
  console.log("Hello, world.")
})();

この例では即時関数が定義された瞬間に実行され、
コンソールに「Hello, world.」と出力されます。

引数を渡す場合

即時関数は引数を受け取ることもできます。

let name = "Kenny";

(function(userName){
  console.log(`Hello, ${name}`!);
})(name); // Hello, Kenny!

即時関数のメリット

グローバルスコープの汚染を防ぐ

即時関数を使用すると、内部で使用される変数がグローバルスコープに影響を与えないようにできます。

(function() {
  let scope = "local";
  console.log(scope); // local
})

console.log(scope); // Error: scope is not defined

グローバルスコープに多くの変数や関数を定義すると、
名前の競合や上書きのリスクが増え、バグが発生しやすくなります。

即時関数を使用すると変数や関数をローカルスコープに閉じ込められるため、グローバルスコープを汚染せずに済みます。

一度きりの初期化処理

即時関数はその場で一度だけ実行されるため、
一度きりの初期化処理に役立ちます。

(function() {
  console.log("This runs only once.");
})();

実行後はメモリから解放されるため、
無駄なメモリ使用を防ぐこともできます。

おわりに

いままで使用したことがなかったですが、
一度実行したらメモリが解放されるのは、
パフィーマンスに影響してくるので積極的に使用していきたいです。

それでは。

参考文献