JavaScript IIFE: すぐに呼び出される関数式の完全ガイド

JavaScript は、スコープと実行を効果的に処理するためのさまざまなツールを提供します。最も注目すべきツールの 1 つは、Immediately Invoked Function Expression (IIFE) です。

IIFE は、定義された直後に実行される関数であり、変数と機能にプライベート スコープを提供します。この手法は、クリーンでモジュール化された競合のないコードが必要なシナリオでよく使用されます。

IIFEとは何ですか?

IIFE は、定義されるとすぐに実行される JavaScript 関数です。それは次のようになります:

(function () {
  console.log("This is an IIFE!");
})();

または、ES6 のアロー関数を使用すると、次のようになります:

(() => {
  console.log("IIFE with an arrow function!");
})();

最初のかっこ () のセットは関数定義をラップし、宣言ではなく関数式になります。 2 番目の括弧 () のセットは、関数を直ちに呼び出します。

代替 IIFE 構文

IIFE を記述する有効な方法はいくつかあります。

// Using the unary operator
!(function () {
  console.log("IIFE using !");
})();

// Using void
void (function () {
  console.log("IIFE using void");
})();

// Using + operator
+(function () {
  console.log("IIFE using +");
})();

// IIFE with parameters and return value
const result = (function (x, y) {
  return x + y;
})(10, 20);
console.log(result); // 30

IIFE を使用する理由

IIFE にはいくつかの利点があります:

• グローバル スコープの汚染の回避: 変数をカプセル化し、グローバル変数との競合を防ぎます。
• ワンタイム初期化: 構成などのセットアップ タスクに最適です。
• モジュール性のためのカプセル化: コードを整理して自己完結型に保ちます。
• クロージャの作成: 関数内のプライベート状態を維持します。

実際の例

ユーティリティ関数のラッピング

const utils = (function () {
  const calculateSum = (a, b) => a + b;
  const calculateProduct = (a, b) => a * b;

  // Only expose what we want to be public
  return {
    sum: calculateSum,
    // product remains private
  };
})();

console.log(utils.sum(3, 7)); // 10
console.log(utils.calculateProduct); // undefined

この例では、calculateSum 関数はプライベートであり、IIFE の外部からアクセスすることはできません。

古い JavaScript のブロック スコープを模倣する

let と const が利用可能になる前、開発者は IIFE を使用してブロック スコープを実現していました。

for (var i = 0; i < 3; i++) {
  (function (j) {
    setTimeout(() => console.log(j), 1000); // 0, 1, 2
  })(i);
}

IIFE を使用したシングルトン パターン

const Config = (function () {
  let instance;

  function createInstance() {
    const settings = {
      theme: "dark",
      language: "en",
    };

    return {
      getSettings: () => settings,
      updateSettings: (newSettings) => Object.assign(settings, newSettings),
    };
  }

  return {
    getInstance: function () {
      if (!instance) {
        instance = createInstance();
      }
      return instance;
    },
  };
})();

const config1 = Config.getInstance();
const config2 = Config.getInstance();
console.log(config1 === config2); // true

モジュールパターン

const Calculator = (function () {
  // Private variables and methods
  let result = 0;

  function validate(num) {
    return typeof num === "number" && !isNaN(num);
  }

  // Public API
  return {
    add: function (num) {
      if (validate(num)) {
        result += num;
      }
      return this;
    },
    subtract: function (num) {
      if (validate(num)) {
        result -= num;
      }
      return this;
    },
    getResult: function () {
      return result;
    },
  };
})();

現代の代替品

IIFE は特定のシナリオでは依然として役立ちますが、最新の JavaScript では、それぞれに利点のある代替手段がいくつか提供されています。比較は次のとおりです:

今日 IIFE を使用する場合

IIFE は以下に引き続き関連します:

• サードパーティ SDK: グローバル変数の競合を回避します。
• 分析コード: 追跡ロジックを分離します。
• レガシー コード メンテナンス: 最新の機能のない古いコードベースをメンテナンスします。
• ブラウザ拡張機能: モジュールなしで互換性を確保します。
• ポリフィル: 下位互換性を提供します。

ベストプラクティスと落とし穴

高度な使用例

• IIFE によるイベント処理

(function () {
  console.log("This is an IIFE!");
})();

• 名前空間パターン

(() => {
  console.log("IIFE with an arrow function!");
})();

パフォーマンスに関する考慮事項

• バンドル サイズの影響

// Using the unary operator
!(function () {
  console.log("IIFE using !");
})();

// Using void
void (function () {
  console.log("IIFE using void");
})();

// Using + operator
+(function () {
  console.log("IIFE using +");
})();

// IIFE with parameters and return value
const result = (function (x, y) {
  return x + y;
})(10, 20);
console.log(result); // 30

• 実行コンテキスト

const utils = (function () {
  const calculateSum = (a, b) => a + b;
  const calculateProduct = (a, b) => a * b;

  // Only expose what we want to be public
  return {
    sum: calculateSum,
    // product remains private
  };
})();

console.log(utils.sum(3, 7)); // 10
console.log(utils.calculateProduct); // undefined

結論

ES モジュールやブロック スコープなどの最新の JavaScript 機能により、一部のシナリオでは IIFE の必要性が減りましたが、IIFE は JavaScript 開発における重要なパターンであり続けています。 IIFE を理解することは、既存のコードベースを操作し、ブラウザ互換ライブラリを作成し、特定のデザイン パターンを効果的に実装するために重要です。

IIFE を使用するか最新の代替手段を使用するかの選択は、特定のユースケース、ブラウザーのサポート要件、プロジェクトの制約に基づいて行う必要があることに注意してください。

以上がJavaScript IIFE: すぐに呼び出される関数式の完全ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。