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

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

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

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

Контент

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

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

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

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

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

## Що таке import і export

У JavaScript із **ES6 (2015)** з'явилася **вбудована модульна система**:
можливість **розділяти код на файли (модулі)** та **обмінюватися між ними змінними, функціями, класами тощо**.

---

### export

> Дозволяє *відправити* щось (функцію, об'єкт, клас тощо) **з модуля назовні**, щоб інші файли могли це використати.

### import

> Дозволяє *завантажити* дані, функції чи класи **з іншого модуля**, де вони були експортовані.

---

## Приклад - базовий

### math.js

```javascript
export const PI = 3.14;

export function add(a, b) {
  return a + b;
}
```

### app.js

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

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

---

## Види експорту

### 1. Іменований експорт (`export`)

Можна експортувати кілька сутностей з одного файлу.

```javascript
// math.js
export const PI = 3.14;
export function multiply(a, b) {
  return a * b;
}
```

Імпортувати потрібно **за іменем**, у фігурних дужках:

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

Назви мають збігатися!

---

### 2. Типовий експорт (`export default`)

Дозволяє експортувати **одну основну сутність** із файлу.
Найчастіше це "головний об'єкт" або функція.

```javascript
// math.js
export default function add(a, b) {
  return a + b;
}
```

Імпортувати можна **під будь-яким іменем**, без фігурних дужок:

```javascript
import sum from './math.js';
console.log(sum(2, 3)); // 5
```

`export default` → імпорт можна назвати як завгодно.

---

## Відмінності `export` і `export default`

| Критерій | `export` (іменований) | `export default` |
|---|---|---|
| Кількість на файл | Скільки завгодно | Лише один |
| Імпорт | У фігурних дужках `{}` | Без фігурних дужок |
| Ім'я | Має збігатися | Може бути будь-яким |
| Перейменування при імпорті | Через `as` | Просто зміни ім'я |
| Приклад | `import { add } from './file.js'` | `import add from './file.js'` |

---

## Приклади відмінностей

### Іменований експорт:

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

```javascript
// app.js
import { PI, add } from './math.js';
console.log(add(1, 2)); // 3
```

### Типовий експорт:

```javascript
// math.js
export default function(a, b) { return a * b; }
```

```javascript
// app.js
import multiply from './math.js';
console.log(multiply(2, 3)); // 6
```

### Змішаний експорт:

```javascript
// math.js
export const PI = 3.14;
export default function add(a, b) { return a + b; }
```

```javascript
// app.js
import add, { PI } from './math.js';
console.log(add(1, 2), PI); // 3 3.14
```

---

## 3. Перейменування при імпорті та експорті

### Перейменування при експорті:

```javascript
function sum(a, b) { return a + b; }
export { sum as add };
```

### Перейменування при імпорті:

```javascript
import { add as plus } from './math.js';
plus(2, 3); // 5
```

---

## 4. Імпорт усього модуля цілком

Можна імпортувати *все одразу* у вигляді об'єкта:

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

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

Зручно, якщо в модулі багато експортів.

---

## 5. Реекспорт (переспрямування з іншого файлу)

Іноді один модуль просто "перепаковує" інші:

```javascript
// utils.js
export { add, multiply } from './math.js';
```

Тепер можна:

```javascript
import { add } from './utils.js';
```

---

## Важливо пам'ятати

| Особливість | Опис |
|---|---|
| Працює **лише в модулях** (`type="module"` в HTML або `.mjs` у Node) | Інакше буде `SyntaxError` |
| Import/export **завжди статичні** | Не можна використовувати всередині `if`, `for`, `function` |
| Модулі **кешуються** | Завантажуються один раз і повторно використовуються |
| `import` - **завжди асинхронний** | Можна використати `await import()` для динамічного завантаження |

---

## Динамічний імпорт

Можна завантажувати модуль *за потреби*:

```javascript
const math = await import('./math.js');
console.log(math.add(2, 3)); // 5
```

Працює всередині `async`-функції або модулів (з `type="module"`).

---

## Підсумок

| Ключове слово | Що робить | Приклад |
|---|---|---|
| `export` | Відправляє назовні змінні/функції | `export const PI = 3.14;` |
| `export default` | Відправляє "головний" об'єкт/функцію | `export default class User {}` |
| `import` | Підключає експортовані сутності | `import { PI } from './math.js';` |

---

Простіше кажучи:

> `export` - "відправити назовні"
> `import` - "завантажити всередину"
> `export default` - "відправити головне, одне"

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

Для рев’юера

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

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