Для чего использовали IIFE в JavaScript?

IIFE (Immediately Invoked Function Expression) в JavaScript

Это исторически важный паттерн, который был краеугольным камнем JavaScript разработки до ES6. После 10+ лет в индустрии скажу: хотя IIFE теперь менее популярен, его всё равно важно знать и понимать.

Что такое IIFE

IIFE — это функция, которая определяется и сразу же вызывается:

// Базовый синтаксис
(function() {
  console.log("Я выполнусь сразу!");
})();

// Со стрелочной функцией
(() => {
  console.log("Я тоже выполнусь сразу!");
})();

// С параметрами
(function(name) {
  console.log(`Hello, ${name}!`);
})("John");

Почему нужны были скобки

Первые скобки нужны, чтобы JavaScript парсер понял, что это функция-выражение, а не функция-объявление:

// ❌ Ошибка парсера — это не IIFE
function() {
  console.log("Ошибка!");
}();

// ✅ Правильно — скобки говорят "это выражение"
(function() {
  console.log("Работает!");
})();

// ✅ Альтернативные способы
!function() { console.log("Работает!"); }();
~function() { console.log("Работает!"); }();
+function() { console.log("Работает!"); }();
void function() { console.log("Работает!"); }();

Главные причины использования IIFE

1. Создание приватной области видимости

До ES6 модулей и блочной области видимости это был основной способ избежать глобального загрязнения:

// ❌ Без IIFE — загрязняет глобальный scope
var counter = 0;
function increment() {
  counter++;
}
increment();
console.log(counter); // 1 — доступна в глобальном scope

// ✅ С IIFE — переменная приватна
(function() {
  var counter = 0;
  
  window.increment = function() {
    counter++;
  };
  
  window.getCounter = function() {
    return counter;
  };
})();

increment();
console.log(window.getCounter()); // 1
console.log(window.counter); // undefined — приватна

2. Избегание проблем с var и циклами

Это была классическая проблема до появления let/const:

// ❌ Проблема: все замыкания помнят одно значение i
var callbacks = [];
for (var i = 0; i < 3; i++) {
  callbacks.push(function() {
    return i; // все вернут 3
  });
}

console.log(callbacks[0]()); // 3 вместо 0!
console.log(callbacks[1]()); // 3 вместо 1!

// ✅ Решение через IIFE
var callbacks = [];
for (var i = 0; i < 3; i++) {
  // IIFE создаёт новое значение j для каждой итерации
  callbacks.push((function(j) {
    return function() {
      return j;
    };
  })(i));
}

console.log(callbacks[0]()); // 0 ✅
console.log(callbacks[1]()); // 1 ✅

// Сейчас это решается через let
const callbacks = [];
for (let i = 0; i < 3; i++) {
  callbacks.push(() => i);
}
console.log(callbacks[0]()); // 0

3. Модульный паттерн (Module Pattern)

До ES6 модулей это был стандартный способ создания модулей:

const myModule = (function() {
  // Приватные переменные
  const privateData = "secret";
  let counter = 0;
  
  // Приватные функции
  function privateMethod() {
    console.log("Я приватная");
  }
  
  // Публичный интерфейс
  return {
    increment: function() {
      counter++;
      return counter;
    },
    getPrivateData: function() {
      return privateData;
    }
  };
})();

console.log(myModule.increment()); // 1
console.log(myModule.increment()); // 2
console.log(myModule.getPrivateData()); // "secret"
console.log(myModule.privateData); // undefined — приватна

4. Избегание глобального загрязнения при загрузке скриптов

<!-- script1.js -->
<script>
(function() {
  const API_KEY = "secret";
  const config = { timeout: 5000 };
  
  window.api = {
    call: function(endpoint) {
      // использует API_KEY из замыкания
    }
  };
})();
</script>

<!-- script2.js -->
<script>
(function() {
  const MAX_RETRIES = 3;
  
  window.apiClient = {
    retry: function() {
      // своя логика
    }
  };
})();
</script>

<!-- Глобальный scope чист от API_KEY и MAX_RETRIES -->

5. Сохранение значений без глобальных переменных

const debounce = (function() {
  let timeoutId;
  
  return function(fn, delay) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(fn, delay);
  };
})();

// timeoutId сохраняется между вызовами
debounce(() => console.log("Search"), 300);
debounce(() => console.log("Search"), 300);

6. Инициализация с параметрами

(function(window, document, undefined) {
  // window и document здесь локальные переменные
  // это быстрее, чем обращаться к глобальным
  
  const app = {
    init: function() {
      document.addEventListener("DOMContentLoaded", () => {
        console.log("Ready");
      });
    }
  };
  
  app.init();
})(window, document);

Реальные примеры из истории JavaScript

jQuery плагины

// Классический способ написания jQuery плагина
(function($) {
  $.fn.myPlugin = function() {
    return this.each(function() {
      // $ здесь локальная переменная jQuery
      $(this).addClass("active");
    });
  };
})(jQuery);

// Использование
$("button").myPlugin();

AMD модули (RequireJS)

define("myModule", ["dep1", "dep2"], function(dep1, dep2) {
  // IIFE внутри
  return (function() {
    const privateVar = "secret";
    
    return {
      publicMethod: function() {
        return dep1.method();
      }
    };
  })();
});

Современные альтернативы

С приходом ES6 нужда в IIFE сильно снизилась:

// ❌ Старый способ (IIFE)
var myModule = (function() {
  var privateVar = "secret";
  
  return {
    method: function() {
      return privateVar;
    }
  };
})();

// ✅ Современный способ (ES6 модули)
// file: myModule.js
const privateVar = "secret";

export function method() {
  return privateVar;
}

// file: main.js
import { method } from "./myModule";
console.log(method());

// ✅ Блочная область видимости (let/const)
{
  const privateVar = "secret";
  
  function method() {
    return privateVar;
  }
}

IIFE в контексте Front-end фреймворков

React компоненты (старый стиль)

const MyComponent = (function() {
  const internalState = { count: 0 };
  
  return function() {
    return (
      <div>
        <p>Count: {internalState.count}</p>
      </div>
    );
  };
})();

Более современный подход

function MyComponent() {
  const [count, setCount] = useState(0);
  return <div>Count: {count}</div>;
}

Когда IIFE всё ещё полезен

1. Работа с legacy кодом — нужно понимать старый код
2. Глобальные скрипты — когда нет сборщика модулей
3. Защита переменных — когда нужна приватность без модулей
4. Инициализация — запуск кода при загрузке страницы

// Инициализация при загрузке
(function() {
  const config = { apiUrl: "https://api.example.com" };
  
  // Инициализируем приложение
  initApp(config);
})();

Производительность

// IIFE немного медленнее из-за создания области видимости
const iife = (function() {
  let count = 0;
  return () => ++count;
})();

// let просто
let count2 = 0;
const simpler = () => ++count2;

// На современных движках разницы почти нет
// Производительность не критична для большинства случаев

Заключение

IIFE был критичным паттерном в доиндустриальной JavaScript эре (до ES6). Сегодня его использование сократилось благодаря:

• ES6 модулям (import/export)
• Блочной области видимости (let/const)
• Сборщикам модулей (webpack, vite)
• Modern фреймворкам (React, Vue, Angular)

Но IIFE остаётся важным для:

• Понимания legacy кода — многие старые проекты его используют
• Понимания замыканий — IIFE отлично демонстрирует их работу
• Простых скриптов — иногда это самое простое решение

В интервью знание IIFE демонстрирует понимание фундаментальных механизмов JavaScript, даже если сегодня он редко используется.