Іменований проти дефолтного експорту

Node.jsJunior~2 хв читання

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

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

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

Іменований (named export)
Дефолтний (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	Працює відмінно	Іноді губляться
Застосування	Утиліти, функції, константи	Головний клас чи компонент
Комбінування	Можна разом	Можна разом

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

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

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.