はじめに
この記事を読めば、JavaScriptの即時関数を使いこなせるようになります。
初心者の方でも分かりやすいように、即時関数の基本的な作り方から、使い方、注意点までを徹底解説しています。
即時関数とは
即時関数（IIFE: Immediately Invoked Function Expression）は、定義と同時に実行される関数のことです。
主に変数のスコープを制限するために使われます。
即時関数の作り方
基本的な書き方は、次のようになります。
(function() {
// ここにコードを書く
})();このように関数を括弧で囲んで、その後に実行する括弧をつけることで、即時関数を作成できます。
即時関数の使い方とサンプルコード
ここからは、即時関数の使い方を7つのサンプルコードを通して紹介します。
○ サンプルコード1: グローバル変数の汚染防止
即時関数を使ってグローバル変数を汚染しないようにすることができます。
下記のサンプルコードでは、即時関数内で変数messageを定義しています。
これにより、messageはグローバル変数にならず、関数内でのみアクセス可能になります。
(function() {
var message = "Hello, world!";
console.log(message); // "Hello, world!"
})();
console.log(message); // ReferenceError: message is not defined○ サンプルコード2: プライベート変数の作成
即時関数を利用して、プライベート変数を作成することができます。
下記のサンプルコードでは、即時関数内で定義された変数counterがプライベート変数となり、関数内でのみアクセス可能です。
var incrementCounter = (function() {
var counter = 0;
return function() {
counter++;
console.log(counter);
};
})();
incrementCounter(); // 1
incrementCounter(); // 2
console.log(counter); // ReferenceError: counter is not defined○ サンプルコード3: 関数の初期化処理
即時関数を使って、関数の初期化処理を実行することができます。
下記のサンプルコードでは、関数initializeを即時関数内で定義し、初期化処理を行っています。
var initialize = (function() {
var message = "Initialization complete!";
return function() {
console.log(message);
};
})();
initialize(); // "Initialization complete!"○ サンプルコード4: クロージャを利用したカウンター
即時関数とクロージャを組み合わせることで、状態を保持する関数を作成できます。
下記のサンプルコードでは、即時関数内で定義された変数counterがクロージャによって保持され、状態を保持するカウンター関数が作成されています。
var createCounter = (function() {
var counter = 0;
return function() {
counter++;
return counter;
};
})();
console.log(createCounter()); // 1
console.log(createCounter()); // 2○ サンプルコード5: モジュールパターン
即時関数を使って、モジュールパターンを実現することができます。
下記のサンプルコードでは、モジュールmyModuleが定義され、プライベート変数privateVarと公開メソッドpublicMethodが作成されています。
var myModule = (function() {
var privateVar = "I'm a private variable!";
function privateMethod() {
console.log("I'm a private method!");
}
return {
publicMethod: function() {
console.log("I'm a public method!");
privateMethod();
console.log(privateVar);
}
};
})();
myModule.publicMethod();
// "I'm a public method!"
// "I'm a private method!"
// "I'm a private variable!"○ サンプルコード6: 非同期処理の制御
即時関数を使って、非同期処理を制御することができます。
下記のサンプルコードでは、setTimeout関数を使って非同期処理を実行し、即時関数によってスコープが制限されています。
(function() {
var message = "Hello, world!";
setTimeout(function() {
console.log(message);
}, 1000);
})();○ サンプルコード7: 即時関数を引数として利用
即時関数を関数の引数として利用することもできます。
下記のサンプルコードでは、myFunction関数に即時関数を渡し、実行しています。
function myFunction(callback) {
callback();
}
myFunction(function() {
console.log("Hello, world!");
});注意点と対処法 即時関数を利用する際には、下記のような注意点があります。
- 関数内で宣言された変数や関数は、外部からアクセスできなくなります。
必要に応じて、公開するメソッドやプロパティを定義しましょう。 - 即時関数は、定義と同時に実行されるため、実行順序に注意が必要です。
他の関数や変数が利用できる状態で実行されることを確認してください。
まとめ
この記事では、JavaScriptの即時関数について、その作り方、使い方、注意点を初心者向けに徹底解説しました。
7つのサンプルコードを参考に、自分のプロジェクトに即時関数を活用してみてください。
