export / import

Урок: export / import

Введение

Когда мы только начинаем писать код, всё обычно находится в одном файле. Это удобно на старте, но как только проект становится больше, файл начинает разрастаться: функции, переменные, логика — всё перемешивается.

Представь большой проект как книгу. Было бы странно, если бы вся книга была написана без разделения на главы. Читать и поддерживать такой текст было бы сложно.

В программировании используется тот же принцип: код разбивают на части — модули. И чтобы эти части могли взаимодействовать друг с другом, используются export и import.

Они позволяют:

  • выносить код в отдельные файлы;
  • подключать его там, где нужно;
  • структурировать проект.

В песочнице теории код выполняется как один фрагмент (без настоящих файлов-модулей), поэтому ниже — рабочие имитации с комментариями, как это выглядит в реальных math.js / app.js.

Что такое модули

Модуль — это отдельный файл с кодом.

Например, у нас есть файл math.js:

// В math.js функция просто объявлена (export добавляется отдельно в реальном файле).
function sum(a, b) {
  return a + b;
}
console.log('из math.js:', sum(2, 3));

И есть другой файл app.js, где мы хотим использовать эту функцию.

Без модулей это невозможно напрямую. Но с помощью export и import мы можем связать эти файлы.

Что делает export

export позволяет «отдать наружу» переменные, функции или объекты из файла.

// В TypeScript/ES-модуле: export function sum(a, b) { return a + b; }
function sum(a, b) {
  return a + b;
}
console.log('после export sum доступна другим файлам; здесь вызов:', sum(1, 4));

Теперь функция sum доступна для других файлов.

Можно экспортировать не только функции:

// В модуле: export const PI = 3.14;
const PI = 3.14;
console.log('именованный экспорт константы PI:', PI);

Теперь PI тоже можно использовать в другом месте.

Важно понять: export делает часть кода доступной извне.

Как работает import

Чтобы использовать экспортированный код, нужно его импортировать.

// В app.js: import { sum } from './math.js';
const mathModule = {
  sum(a, b) {
    return a + b;
  },
};
const { sum } = mathModule;
console.log('как после import { sum }:', sum(2, 3));

Здесь:

  • import подключает код из другого файла;
  • { sum } — это то, что мы хотим получить;
  • "./math.js" — путь к файлу.

Теперь функция sum доступна в этом файле.

Экспорт нескольких значений

Можно экспортировать сразу несколько вещей:

// math.js: export function sum ... export function multiply ...
const math = {
  sum(a, b) {
    return a + b;
  },
  multiply(a, b) {
    return a * b;
  },
};
console.log('sum:', math.sum(2, 3), '| multiply:', math.multiply(2, 3));

Импорт:

// import { sum, multiply } from './math.js';
const { sum, multiply } = {
  sum(a, b) {
    return a + b;
  },
  multiply(a, b) {
    return a * b;
  },
};
console.log(sum(2, 3));
console.log(multiply(2, 3));

Здесь мы выбираем, какие именно функции нам нужны.

Переименование при импорте

Иногда нужно изменить имя:

// import { sum as add } from './math.js';
const { sum: add } = {
  sum(a, b) {
    return a + b;
  },
};
console.log('sum в этом файле называется add:', add(2, 3));

Здесь:

  • sum — оригинальное имя;
  • add — новое имя в текущем файле.

Это полезно, если есть конфликты имён.

export default

Есть особый вид экспорта — export default.

// math.js: export default function sum(a, b) { return a + b; }
function sumDefault(a, b) {
  return a + b;
}
console.log('один default-экспорт на файл; вызов:', sumDefault(2, 3));

Импорт:

// import sum from './math.js';
const sumFromDefault = (a, b) => a + b;
console.log('импорт default без фигурных скобок:', sumFromDefault(2, 3));

Отличие:

  • default экспорт — один на файл;
  • при импорте не нужны фигурные скобки;
  • имя можно выбрать любое.
// import myFunction from './math.js';
const myFunction = (x) => x * 2;
console.log('любое локальное имя для default:', myFunction(5));

Это удобно, когда файл экспортирует одну главную вещь.

Разница между обычным export и default

Сравним:

// export function sum() {}
const sumNamed = () => 'именованный экспорт';
console.log('именованный:', sumNamed());

Импорт:

// import { sum } from './file.js';
const { sum } = { sum: () => 'берём строгое имя из модуля' };
console.log(sum());

И:

// export default function sum() {}
const defaultExport = () => 'один default на файл';
console.log('default:', defaultExport());

Импорт:

// import sum from './file.js';
const renamed = () => 'имя при импорте любое';
console.log(renamed());

Ключевая разница:

  • обычный export — много значений, строгие имена;
  • default — одно значение, имя можно менять.

Почему это важно

Без модулей код быстро становится хаотичным.

С модулями:

  • каждая часть отвечает за свою задачу;
  • код легче читать;
  • проще поддерживать;
  • можно переиспользовать логику.

Например:

  • файл для работы с API;
  • файл с утилитами;
  • файл с компонентами.

Где это используется на практике

export / import используются везде:

  • в React и других фреймворках;
  • в Node.js;
  • в любых современных проектах.

Например:

  • компоненты в React — это модули;
  • функции для работы с данными — модули;
  • настройки — модули.

Практически любой проект разделён на файлы и использует импорты.

Итоговое понимание

export / import — это механизм разделения кода на модули и их соединения между собой.

export делает код доступным для других файлов. import позволяет этот код использовать.

Ключевая идея в том, что программа — это не один большой файл, а набор частей, которые взаимодействуют между собой.

Модули делают код:

  • структурированным;
  • понятным;
  • удобным для масштабирования.

Именно с этого начинается переход от «учебного кода» к реальным проектам.