Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «IIFE». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

Функція, яка викликає сама себе (англ. **IIFE - Immediately Invoked Function Expression**) - це функція,
яка **створюється і викликається одразу ж**, без окремого виклику за ім'ям.

---

## Синтаксис:

```javascript
(function () {
  console.log('Я виконався одразу після оголошення!');
})();
```

Зверни увагу на **дві пари дужок**:

1. Перша `(function() { ... })` - перетворює функцію на **функціональний вираз**.
2. Друга `()` - **негайно викликає** цю функцію.

---

## Приклад з параметрами:

```javascript
(function (name) {
  console.log(`Привіт, ${name}!`);
})('Tim');
```

Виведе:

```javascript
Привіт, Tim!
```

---

## Для чого використовується IIFE

### 1. **Створення ізольованої області видимості**

IIFE часто застосовують, щоб **уникнути конфліктів змінних** - наприклад, під час написання коду, який не повинен "забруднювати" глобальну область (`window` або `global`).

```javascript
(function() {
  const secret = 'Секрет всередині функції';
  console.log(secret);
})();

console.log(secret); // ReferenceError: secret is not defined
```

Змінна `secret` доступна тільки всередині IIFE.

---

### 2. **Ініціалізація коду один раз**

Можна використовувати IIFE, щоб щось виконати **одноразово під час завантаження**:

```javascript
const config = (() => {
  const apiKey = '12345';
  const baseUrl = 'https://api.example.com';
  return { apiKey, baseUrl };
})();

console.log(config.apiKey); // 12345
```

Повертаємо об'єкт, але змінні всередині залишаються **інкапсульованими**.

---

### 3. **Використання з async / await**

IIFE можна зробити **асинхронною**, щоб використовувати `await` на верхньому рівні:

```javascript
(async () => {
  const data = await fetch('/api/data').then(res => res.json());
  console.log(data);
})();
```

---

## Історично

До появи модулів ES6 (де тепер кожна `import/export`-файлова одиниця має свою область видимості),
IIFE активно використовувалися в JavaScript для **інкапсуляції** та **структурування коду**.
Зараз їх рідше використовують, але вони все ще корисні для:

- одноразової ініціалізації,
- ізоляції тимчасових змінних,
- негайного виконання async-коду.

---

**Коротко:**

| Характеристика | Опис |
|---|---|
| Назва | IIFE - Immediately Invoked Function Expression |
| Суть | Функція створюється і одразу викликається |
| Навіщо | Ізоляція, ініціалізація, тимчасові змінні |
| Особливості | Не забруднює глобальну область, може бути async |

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати318 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.