JavaScript 即時関数(IIFE)

即時実行形式関数を書く時は以下のようにします。(アロー関数の書き方です)

const hoge = (() => {
	return "hoge"
})();

console.log(hoge); // hoge

どういう時に使用するかというと、関数実行後も変数を維持したいが、グローバル変数にはしたくないときなどに使います。

関数の中に宣言した変数は、通常はその関数の実行が完了すると消えます。

そのため、関数実行後も維持したい値については、関数の外で定義します。

しかし、関数の外に定義するということは、グローバル変数になってしまうので、いろいろなコードからアクセス可能であり、バグの温床になります。

この悪循環を回避するために、即時関数とクロージャを利用します。

const counter = ((initialValue) => {
	let value = initialValue;
  return {
  	getValue(){
    	return value;
    },
    increment(){
    	return value++;
    }
  }
})(100);


console.log(counter.increment()); //101
console.log(counter.getValue()); //101

console.log(counter.increment()); //102
console.log(counter.getValue()); //102

console.log(counter.value); //undefined getValue を使わないとみれません。

counter.value = 800; //value に値を入れようとしてみるが
console.log(counter.getValue()); // 102 のまま

即時関数(counterの右辺)内の変数 value は、通常であれば関数の実行が完了すると消えますが、getValueとincrement内で参照されているため、生き続けます。

また、即時関数なので一度だけの実行であり、 変数 value に対しては getValue や increment 以外の手段ではアクセスできなくなります。

このように変数を閉じ込めて、アクセスする手段を制限できるので、予期せずに変数が書き換わってしまうなどのバグを防ぐことができます。