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

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

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

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

Контент

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

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

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

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

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

## 1. Що таке "експорт" загалом

> **Експорт (export)** - це механізм, що дозволяє "передати назовні" з модуля функції, змінні, класи тощо, щоб їх можна було **імпортувати** в інших файлах.

В ES Modules є **два типи експорту**:

1. **Іменований (named export)**
2. **Дефолтний (default export)**

## 2. Іменований експорт (Named Export)

> Дозволяє експортувати **кілька значень** з модуля з їхніми іменами.

**math.js**

```javascript
export const PI = 3.14;
export function add(a, b) {
  return a + b;
}
export function sub(a, b) {
  return a - b;
}
```

**app.js**

```javascript
import { PI, add, sub } from './math.js';

console.log(PI);       // 3.14
console.log(add(2, 3)); // 5
```

Можна експортувати **кілька елементів** з одного файлу.
Імпорт має використовувати **точно такі самі імена**, як і експорт.

### Альтернативна форма:

```javascript
const PI = 3.14;
function add(a, b) { return a + b; }
function sub(a, b) { return a - b; }

export { PI, add, sub };
```

Це еквівалентно попередньому прикладу - просто згрупований експорт.

## 3. Дефолтний експорт (Default Export)

> Дозволяє експортувати **лише одне значення** як "головний вміст" модуля.

**logger.js**

```javascript
export default function log(message) {
  console.log('LOG:', message);
}
```

**app.js**

```javascript
import log from './logger.js'; // без фігурних дужок!
log('Привіт'); // LOG: Привіт
```

За **default export**:

- у модуля може бути **лише один експорт за замовчуванням**;
- під час імпорту **можна назвати як завгодно**.

### Інший приклад:

```javascript
export default class User {
  constructor(name) {
    this.name = name;
  }
}
```

Імпорт:

```javascript
import Person from './User.js'; // можна назвати як завгодно
const user = new Person('Tim');
```

## 4. Ключові відмінності

| Критерій | **Іменований експорт** | **Дефолтний експорт** |
|---|---|---|
| Кількість | Можна експортувати багато значень | Тільки одне значення |
| Імпорт | Через фігурні дужки `{}` | Без фігурних дужок |
| Ім'я під час імпорту | Має збігатися з оригіналом | Можна будь-яке ім'я |
| Синтаксис | `export const foo = ...` / `export { foo }` | `export default ...` |
| Імпорт усього | `import * as lib from './file.js'` | Незастосовно напряму |
| Семантика | Експортує "багато різних частин" модуля | Експортує "головну сутність" модуля |
| Приклади | Утиліти, константи, функції | Основний клас, функція, компонент |

## 5. Можна комбінувати

Один модуль може містити **й іменований, і дефолтний** експорт:

**math.js**

```javascript
export const PI = 3.14;
export function add(a, b) { return a + b; }

export default function multiply(a, b) {
  return a * b;
}
```

**app.js**

```javascript
import multiply, { PI, add } from './math.js';

console.log(multiply(2, 3)); // 6
console.log(PI);             // 3.14
console.log(add(5, 5));      // 10
```

## 6. Імпорт "усього" модуля

Можна імпортувати **весь вміст** під одним іменем:

```javascript
import * as math from './math.js';

console.log(math.PI);            // 3.14
console.log(math.add(2, 3));     // 5
console.log(math.default(2, 3)); // 6 - доступ до default через .default
```

## 7. Часті помилки

| Помилка | Причина | Рішення |
|---|---|---|
| `SyntaxError: The requested module ... does not provide an export named` | Неправильне ім'я під час імпорту іменованого експорту | Використовуй точні імена |
| `default is not exported` | Намагаєшся імпортувати default, коли його немає | Перевір, що експортуєш `export default` |
| `Cannot use import statement outside a module` | Файл не ESM | Додай `"type": "module"` у `package.json` чи використай `.mjs` |

## 8. Коли що використовувати

| Сценарій | Тип експорту |
|---|---|
| Модуль з кількома утилітами | **Іменований** |
| Один основний клас / компонент | **Дефолтний** |
| Бібліотека з API | Комбінований (default + named) |

Приклади:

- **React** → `export default React; export { useState, useEffect }`
- **Axios** → `export default axios; export { AxiosError }`

## 9. Концептуально

- **Іменовані експорти** = "багато інструментів з набору"
(усе явно, IDE підказує, автодоповнення працює).
- **Дефолтний експорт** = "головна сутність модуля"
(зручно, коли файл відповідає за один основний об'єкт).

## Коротке резюме

| Характеристика | Іменований експорт | Дефолтний експорт |
|---|---|---|
| Кількість | Кілька | Один |
| Імпорт | `import { x } from` | `import x from` |
| Ім'я | Обов'язково збігається | Можна будь-яке |
| Підказки IDE | Працює відмінно | Іноді губляться |
| Застосування | Утиліти, функції, константи | Головний клас чи компонент |
| Комбінування | Можна разом | Можна разом |

## Одним реченням

> **Іменовані експорти** дозволяють експортувати кілька сутностей з їхніми іменами,
> а **дефолтний експорт** призначений для однієї "головної" сутності модуля, яку можна імпортувати під будь-яким іменем.

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

Для рев’юера

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

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