Перейти к содержимому
JS/TS Interview Tutorial

IIFE (Immediately Invoked Function Expression)

В одной фразе: IIFE — паттерн немедленного вызова функционального выражения для создания изолированного scope, исторически единственный способ инкапсуляции до ES6 modules. Сегодня актуален для async-блоков, revealing module pattern и legacy-кода.

// Классический IIFE: var-переменные не загрязняют внешний scope
(function () {
    var localVar = 'invisible outside';
    // инициализация, side effects
})();


// Стрелочный (ES6+)
(() => {
    const setup = 'done';
})();


// Явная передача зависимостей (jQuery-паттерн)
(function ($, global) {
    // $ — jQuery, global — window; явная зависимость лучше неявной
    $.fn.myPlugin = function () { /* ... */ };
})(jQuery, globalThis);
// Async IIFE: top-level await до ESM / в CommonJS
(async () => {
    const data = await fetch('/api/config').then(r => r.json());
    console.log('Loaded:', data);
    // вместо .then().catch() — линейный async/await код
})().catch(console.error); // не забыть обработчик ошибок!


// Изоляция в legacy-коде или в Userscripts
(function () {
    'use strict';         // strict mode только для этого блока
    const VERSION = '2.1';
    // не загрязняем глобальный scope
})();
// Revealing Module Pattern через IIFE
const Calculator = (function () {
    let history = []; // private state


    function add(a, b) {
        const result = a + b;
        history.push({ op: 'add', a, b, result });
        return result;
    }


    function getHistory() {
        return [...history]; // возвращаем копию, не ссылку
    }


    return { add, getHistory }; // публичный API
})();


Calculator.add(2, 3);        // 5
Calculator.getHistory();     // [{ op: 'add', a: 2, b: 3, result: 5 }]
// history — недоступна снаружи

Итог: IIFE создаёт closure-scope и немедленно выполняется, ничего не оставляя в внешнем scope. В современном коде заменяется ES6 modules, но полезен для async-блоков.