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

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

export

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

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

javascript

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

javascript

import

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

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

javascript

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

javascript

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

javascript

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

javascript

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

javascript

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

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