Как работают операторы import и export в JavaScript?

Операторы import и export используются для работы с модулями в JavaScript, позволяя разделять код на независимые, многократно используемые части и управлять зависимостями между ними.

export

Оператор export используется для экспорта переменных, функций, классов или других значений из модуля. Экспорт может быть именованным или экспортом по умолчанию.

Именованный экспорт:

// module.js
export const myVariable = 10;
export function myFunction() { // ... }
export class MyClass { // ... }

Экспорт по умолчанию: в модуле может быть только один экспорт по умолчанию.

// module.js
const defaultValue = 'default value';
export default defaultValue;

import

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

Именованный импорт:

// another-module.js
import { myVariable, myFunction } from './module.js';

Импорт с другим именем:

// another-module.js
import { myVariable as newVariableName } from './module.js';

Импорт всех именованных экспортов в виде объекта:

// another-module.js
import * as moduleAlias from './module.js';
// Доступ: moduleAlias.myVariable, moduleAlias.myFunction

Импорт экспорта по умолчанию:

// another-module.js
import defaultValueName from './module.js';

Импорт именованного и экспорта по умолчанию одновременно:

// another-module.js
import defaultValueName, { myVariable, myFunction } from './module.js';

Принципы работы:

1. Статический анализ: JavaScript-движок анализирует операторы import и export во время компиляции (до выполнения кода), создавая граф зависимостей между модулями.
2. "Живые" привязки: Импортированные переменные не являются копиями значений из экспортирующего модуля. Это "живые" привязки (живые ссылки) на переменные из исходного модуля. Если значение переменной в экспортирующем модуле меняется, это изменение будет видно через импортированную привязку.
3. Однократное выполнение: Код каждого модуля выполняется только один раз при первом импорте этого модуля. Результаты экспорта кэшируются и используются при последующих импортах.
4. Использование в контексте: Модули выполняются в собственном контексте, изолированном от глобальной области видимости. Переменные, объявленные в корне модуля, не загрязняют глобальное пространство имен, если они явно не экспортированы.