Що таке і для чого використовують IIFE (Immediately Invoked Function Expression)?

Повне пояснення

Що це і навіщо IIFE (Immediately Invoked Function Expression) – самовикликаючася функція, що створює новий лексичний контекст. Використовується для ізоляції змінних, запобігання колізій у глобальному просторі та виконання коду одразу після оголошення.

Ключові принципи/терміни

• Scope – локальний контекст, створений функцією.
• Execution – негайне виконання після оголошення.
• Closure – доступ до зовнішніх змінних, якщо потрібен.

Як це працює

1. Функція оголошується як вираз.
2. Після оголошення додається () для негайного виклику.
3. Код всередині функції виконується у власному scope, після чого він зникає.

Практика і реалізація

(function(){
  const secret = 'hidden';
  console.log(secret);
})();

У TypeScript можна додати типи:

(() => {
  const count: number = 0;
  console.log(count);
})();

Тестування Для перевірки, що IIFE не створює глобальних змінних, можна використати Jest:

test('IIFE does not leak globals', () => {
  expect(() => { globalThis.secret }).toThrow();
});

Особливості в контексті JS/TS Core

• Підтримується у всіх сучасних браузерах і Node.js.
• Часто використовується в старих бібліотеках, де ES6 modules недоступні.
• У сучасному коді замінюється на модулярність (ESM, CommonJS).

Оптимізація та edge cases

• Якщо функція містить довгий код, варто розбити її на окремі модулі.
• У випадку використання eval всередині IIFE, код все одно виконується у локальному scope.

Часті помилки

1. Забути () після оголошення → функція не виконується.
2. Використовувати var замість let/const → колізії у локальному scope.
3. Не враховувати, що IIFE створює новий контекст, тому внутрішні змінні не доступні зовні.

Cheatsheet

• Оголошення: (function(){ … })();
• TypeScript: (() => { … })();
• Підтримка: ES5+, Node.js 4+.