import/export

JavaScriptJunior~2 хв читання

Що таке 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 - "відправити головне, одне"

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

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

Premium

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