プログラムはできるだけシンプルに分かりやすく記述することで、バグや認識違いを少なくすることができます。
JavaScriptの即時関数は、プログラム内での変数を局所化して認識違いを少なくできる手法の1つです。
本記事では、JavaScriptの即時関数について解説します。
記事内に記載しているプログラムは、Node.js14.14.0を使って動作確認をしています。
JavaScriptの即時関数
JavaScriptの即時関数について、以下の内容を解説します。
- JavaScriptの即時関数とは
- 即時関数の基本形
- 即時関数の引数や戻り値
- 変数のスコープ
- アロー関数との組み合わせ
JavaScriptの即時関数とは
JavaScriptの即時関数とは、定義と同時に実行する関数式（IIFE：Immediately Invoked Function Expression）のことです。
通常の名前付き関数は、先に定義をして、後から関数名で呼び出しますが、即時関数は、無名関数を定義してその場で1回限りの実行を行います。
即時関数を使うメリットとしては、
であり、デメリットとしては、
というところかと思います。
使い所としては、
- ページの初期化
- プライベートプロパティ、メソッドの定義
- DOM要素へのイベントハンドラの設定
- その他、1回限りの処理
などがあり、用途や状況によって、通常関数と即時関数を使い分けます。
即時関数の基本形
基本形は以下となります。
(function () {
// 処理
}());
実際の処理を行うプログラムとしては以下となります。
(function() {
console.log("Hello JavaScript!!"); // -> Hello JavaScript!!
}());
3行目に関数を実行する () が付いているところがポイントです。
即時関数の引数や戻り値
即時関数にも引数を渡したり、戻り値を受け取ることができます。
引数を扱うには、関数定義時に受け取る仮引数と、実行時に渡す実引数の両方を記述します。
(function(a, b) {
console.log(a + b); // -> 3
}(1, 2));
戻り値を受け取るには、即時関数内でreturn文で戻り値を指定し、結果を変数に代入します。
let result = (function(a, b) {
return a + b;
}(1, 2));
console.log(result); // -> 3
変数のスコープ
JavaScriptにおいて、変数のスコープはグローバルスコープと関数スコープの2種類になります。
他の言語であるようなブロックスコープはありません。
そのため、関数スコープを使って局所化することで、予期しない変数の書換えやアクセスを防ぐことを行います。
即時関数を用いることで、関数内で作成した変数を局所化して、外からアクセス出来ないようにすることができます。
例えば、以下のプログラムでは、グローバルスコープの変数strを即時関数に引数として渡すことで、書き換えても関数外では影響が出ません。
また、関数内で宣言した変数 str2 は関数外ではアクセスできない変数となります。
let str = "global scope string";
(function(str) {
console.log(str);
str = "change string";
console.log(str);
let str2 = "local scope string";
console.log(str2);
}(str));
console.log(str);
console.log(str2);
上記のプログラムの実行した結果は、以下となります。
global scope string // 即時関数内の最初はグローバル変数のまま change string // 即時関数内で書き換えた結果 local scope string // 関数内で定義した変数の結果 global scope string // 関数外では即時関数内での変更結果は反映されない ReferenceError: str2 is not defined // 関数外ではstr2は参照できない
アロー関数との組み合わせ
アロー関数と即時関数を組み合わせて、記述する場合は以下のようになります。
let result2 = ((a, b) => {
return a + b;
})(1, 2);
console.log(result2); // -> 3
注意点としては、即時関数の最後の () の位置が即時関数のみの時と変わっている点になります。
アロー関数についての説明が必要な場合は、以下の記事をご覧ください。
まとめ
JavaScriptの即時関数についてまとめると、以下となります。
- 即時関数とは、定義と同時に実行する関数式のことである。
- 即時関数を使うことで、一回だけ必要な処理を、グローバル変数に影響を与えずに実行できる
- 通常の関数と同じく、引数や戻り値を返したり、アロー関数と組み合わせて使うこともできる。
使い所によっては、分かりやすく、勘違いの少ないプログラムにすることができる手法ですので、ぜひ使ってみてほしいと思います。
今回はJavaScriptの即時関数について解説しました。
以上、参考になれば幸いです。
コメント