Вопрос с собеседования · Frontend

Как работают ES-модули — import и export?

JuniorОсновы JavaScript
Ещё спрашивают так:
  • Чем export default отличается от именованного экспорта?
Коротко

Модуль — файл со своей областью видимости: наружу видно только то, что экспортировано. Именованный экспорт export function sum импортируют import { sum } (имя совпадает), default — один на модуль, импортируется под любым именем. Импорты статические (в начале файла) — поэтому сборщик знает граф зависимостей и выкидывает неиспользуемое. Модуль выполняется один раз, все импорты получают один экземпляр. В браузере — <script type="module"> (ведёт себя как defer).

  • Именованные экспорты удобнее для автодополнения и рефакторинга
  • import() — динамическая загрузка модуля
  • Циклические импорты возможны, но приводят к неинициализированным значениям

Подробно

// math.js
export const PI = 3.14;
export default function area(r) { return PI * r * r; }
// app.js
import area, { PI } from './math.js';

Что хотят услышать

  • Своя область видимости модуля.
  • Именованный и default-экспорт.
  • Статические импорты и tree shaking.

Проверьте себя

Один верный вариант. Подумайте, потом откройте ответ.

Показать варианты и ответ
  • ✗Все переменные модуля автоматически глобальны, а export лишь документирует их
  • ✗Модуль выполняется заново при каждом импорте, поэтому состояние в нём не сохраняется
  • ✓У модуля своя область видимости, наружу — только экспорт; default — один на модуль
  • ✗В модуле может быть несколько export default

Связанные вопросы

Партнёр платформы

Разбор собеседования с sotto

После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.

Разбор собеседования