JavaScript の即時呼び出し関数式 (IIFE) をマスターする

JavaScript の即時呼び出し関数式 (IIFE)

即時呼び出し関数式 (IIFE) は、関数の定義と作成直後の実行を含む JavaScript の設計パターンです。このパターンは、変数のスコープを設定し、グローバル名前空間の汚染を回避するのに役立ち、最新の JavaScript 開発における強力なツールになります。

---

1. IIFE とは何ですか?

IIFE は、定義されてすぐに呼び出される関数です。これは、関数を括弧で囲み、最後に括弧を追加して関数を呼び出すことで実現されます。

構文:

(function () {
  // Code here runs immediately.
})();

または

(() => {
  // Code here runs immediately.
})();

---

2. IIFE を使用する理由

1. 地球規模変動汚染を避ける
   
   IIFE はプライベート スコープを作成し、関数内で定義された変数がグローバル名前空間に影響を与えないようにします。

2. カプセル化
   
   外部干渉から保護するために関数内にロジックをカプセル化します。

3. 即時実行
   
   他の場所で関数を明示的に呼び出す必要がなく、コードをすぐに実行する場合に便利です。

4. 初期化ロジック
   
   構成値の設定などの初期化コードのセットアップに最適です。

---

3. IIFE の構造

IIFE は 2 つの形式で記述できます:

a) 関数宣言

(function () {
  console.log('IIFE is executed immediately!');
})();

b) アロー関数

(() => {
  console.log('Arrow function IIFE!');
})();

どちらの形式でも同じ結果が得られます。関数は定義され、すぐに実行されます。

---

4. IIFE の例

a) 単純な IIFE の例

(function () {
  const message = 'Hello from IIFE!';
  console.log(message);
})(); 
// Output: Hello from IIFE!

ここでは、変数メッセージは IIFE スコープに限定されています。

---

b) パラメータ付き IIFE

(function (name) {
  console.log(`Hello, ${name}!`);
})('Alice');
// Output: Hello, Alice!

他の関数と同じように、IIFE に引数を渡すことができます。

---

c) 可変プライバシーのための IIFE

let counter = (function () {
  let count = 0; // Private variable
  return {
    increment: function () {
      count++;
      return count;
    },
    decrement: function () {
      count--;
      return count;
    },
  };
})();

console.log(counter.increment()); // 1
console.log(counter.increment()); // 2
console.log(counter.decrement()); // 1

この例では、変数 count は IIFE にプライベートであり、返されたメソッドを介してのみアクセスできます。

---

5. IIFE を使用する利点

1. 変数プライバシー: IIFE 内の変数は、そのスコープ外ではアクセスできません。
2. 競合の回避: 大規模なアプリケーションまたは複数のスクリプトを結合する場合の名前の競合を防ぎます。
3. 即時コード実行: 追加の関数呼び出しを行わずに初期化コードまたはセットアップを実行します。
4. コード構成: 関連するロジックをまとめて、コードの可読性を向上させます。

---

6. IIFE の実用的な使用例

a) モジュールパターン

IIFE は、ロジックをカプセル化し、特定の機能を公開するモジュールを作成するためによく使用されます。

(function () {
  // Code here runs immediately.
})();

b) 変数の巻き上げを回避する

IIFE を使用すると、変数が誤ってホイストされたり、意図しない方法で使用されたりするのを防ぎます。

(() => {
  // Code here runs immediately.
})();

---

7. IIFE の欠点

1. 可読性: IIFE を多用すると、初心者にとってコードが読みにくくなる可能性があります。
2. デバッグ: 関数には名前が付けられていないため、デバッグ ツールでは問題の原因を明確に特定できない可能性があります。

---

8. IIFE と通常の関数の主な違い

機能 通常の機能 IIFE

Feature	Regular Functions	IIFE
Invocation	Explicit invocation needed.	Automatically invoked.
Scope	Creates its own scope.	Creates a private scope.
Global Namespace Impact	Adds variables to global namespace unless scoped.	Does not impact global namespace.

呼び出し 明示的な呼び出しが必要です。 自動的に呼び出されます。 スコープ 独自のスコープを作成します。 プライベート スコープを作成します。 グローバル名前空間への影響 スコープ指定されていない限り、変数をグローバル名前空間に追加します。 グローバル名前空間には影響しません。 テーブル>

---

9. IIFE の最新の代替手段

ES6 の ブロック スコープ変数 (let および const) とモジュールの導入により、IIFE の一部のユースケースがこれらの機能に置き換えられました。ただし、IIFE は、古い JavaScript 環境での 1 回限りの実行や初期化などの特定のパターンに引き続き関連します。

---

10.結論

IIFE は、変数のプライバシー、カプセル化、即時実行に役立つ JavaScript の強力で多用途なツールです。新しい代替手段にもかかわらず、IIFE を理解し効果的に使用することは、特に ES6 より前の環境やプロジェクトで作業する場合、JavaScript をマスターするために不可欠です。

こんにちは、アバイ・シン・カタヤットです!
私はフロントエンドとバックエンドの両方のテクノロジーの専門知識を持つフルスタック開発者です。私はさまざまなプログラミング言語やフレームワークを使用して、効率的でスケーラブルでユーザーフレンドリーなアプリケーションを構築しています。
ビジネス用メールアドレス kaashshorts28@gmail.com までお気軽にご連絡ください。

以上がJavaScript の即時呼び出し関数式 (IIFE) をマスターするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。