LearnJS

IIFE в JavaScript

IIFE - это функция, которая создается и сразу же вызывается.

Полная расшифровка: Immediately Invoked Function Expression или часто говорят самовызывающаяся функция.

(function () {
  console.log('Функция выполнилась сразу');
})();

Результат:

Функция выполнилась сразу

Такую функцию не нужно вызывать отдельно по имени. JavaScript доходит до этой записи и сразу выполняет код внутри.

Что такое IIFE

Обычную функцию мы сначала объявляем, а потом вызываем.

function showMessage() {
  console.log('Привет!');
}

showMessage();

IIFE объединяет эти два действия: функция создается и сразу запускается.

(function () {
  console.log('Привет!');
})();

Чаще всего IIFE нужна тогда, когда код должен выполниться один раз и не должен оставлять лишние переменные снаружи.

Синтаксис

Базовая запись IIFE выглядит так:

(function () {
  // код функции
})();

Первая пара круглых скобок превращает функцию в выражение.

Вторая пара круглых скобок вызывает эту функцию.

(function () {
  let message = 'JavaScript';

  console.log(message);
})();

Результат:

JavaScript

Зачем нужны круглые скобки

Если написать анонимную функцию просто так, JavaScript не поймет такую запись как корректное объявление функции.

function () {
  console.log('Ошибка');
}

У Function Declaration должно быть имя.

Круглые скобки помогают показать JavaScript, что перед ним функциональное выражение.

(function () {
  console.log('Так можно');
})();

После этого функцию можно сразу вызвать через ().

Передача аргументов

В IIFE можно передавать аргументы, как в обычную функцию.

(function (name) {
  console.log('Привет, ' + name + '!');
})('Анна');

Результат:

Привет, Анна!

Значение ‘Анна’ передается в параметр name.

Если параметров несколько, они передаются через запятую.

(function (a, b) {
  console.log(a + b);
})(4, 6);

Результат:

10

Локальные переменные внутри IIFE

Переменные, созданные внутри IIFE, не доступны снаружи.

(function () {
  let status = 'ready';

  console.log(status);
})();

console.log(status);

Первый console.log() сработает.

Второй вызовет ошибку, потому что переменная status существует только внутри функции.

Раньше это часто использовали, чтобы не засорять глобальную область видимости.

Стрелочная IIFE

IIFE можно записать и с помощью стрелочной функции.

(() => {
  console.log('Стрелочная IIFE');
})();

Результат:

Стрелочная IIFE

Если нужно вернуть значение, можно сделать так:

let result = (() => {
  let a = 10;
  let b = 5;

  return a + b;
})();

console.log(result);

Результат:

15

Функция выполнилась сразу, вернула результат, и он попал в переменную result.

Когда использовать IIFE

IIFE может быть полезна, когда нужно выполнить небольшой код один раз и спрятать внутренние переменные.

let userSettings = (function () {
  let theme = 'dark';
  let fontSize = 16;

  return {
    theme: theme,
    fontSize: fontSize
  };
})();

console.log(userSettings);

Результат:

{ theme: 'dark', fontSize: 16 }

Переменные theme и fontSize были созданы внутри IIFE. Снаружи доступен только объект, который функция вернула.

В современном JavaScript похожие задачи часто решают через модули, let и const. Но IIFE все еще встречается в старом коде, библиотеках и примерах.

Итого

1. IIFE - это функция, которая создается и сразу вызывается.

2. Базовый синтаксис выглядит так: (function () )();

3. Первая пара скобок делает функцию выражением, вторая пара скобок вызывает ее.

4. В IIFE можно передавать аргументы и возвращать значения.

5. Переменные внутри IIFE остаются локальными и не попадают во внешнюю область видимости.