Default против именованных экспортов

Часть раздела Объектно-ориентированное программирование путешествия по JavaScript на Coddy — урок 10 из 56.

В модулях JavaScript есть два основных способа экспорта кода: именованный экспорт и экспорт по умолчанию.

Именованные экспорты позволяют экспортировать несколько значений из модуля:

// math.js
export function add(a, b) {
    return a + b;
}
export function subtract(a, b) {
    return a - b;
}

При импорте именованных экспортов вы должны использовать те же самые имена внутри фигурных скобок:

// app.js
import { add, subtract } from './math.js';

console.log(add(5, 3));      // 8
console.log(subtract(10, 4)); // 6

Если вам нужно переименовать именованный импорт, используйте ключевое слово as для создания псевдонима:

// app.js
import { add as sum, subtract as minus } from './math.js';

console.log(sum(5, 3));   // 8
console.log(minus(10, 4)); // 6

Экспорт по умолчанию (Default Exports) позволяет экспортировать одно основное значение из модуля:

// user.js
const user = {
  name: 'John',
  age: 30
};

export default user;

При импорте экспорта по умолчанию вы можете использовать любое имя без фигурных скобок:

// app.js
import person from './user.js';

console.log(person.name); // 'John'

Когда что использовать? Используйте именованный экспорт (named exports), когда модуль предоставляет несколько связанных утилит (например, коллекцию вспомогательных функций). Используйте экспорт по умолчанию (default export), когда у модуля есть одна основная цель или главное значение (например, класс, компонент или объект конфигурации).

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

// vehicle.js
export const wheels = 4;
export const doors = 4;

const car = {
  brand: 'Toyota',
  model: 'Corolla'
};

export default car;

И импортируйте их вместе:

// app.js
import myCar, { wheels, doors } from './vehicle.js';

console.log(myCar.brand);  // 'Toyota'
console.log(wheels);       // 4

Задание

Легко

У вас есть два файла. Ваша задача — настроить экспорт в calculator.js и импорт в main.js.

В calculator.js: Экспортируйте calculate как default, а square как named
В main.js: Импортируйте обе функции правильно

Тесты проверят:

Использование экспорта по умолчанию (default export) для calculate
Использование именованного экспорта (named export) для square
Правильность работы обоих импортов

Шпаргалка

Именованный экспорт — экспорт и импорт нескольких значений по точному имени:

// math.js
export function add(a, b) { return a + b; }
export function subtract(a, b) { return a - b; }

// app.js
import { add, subtract } from './math.js';
import { add as sum } from './math.js'; // псевдоним с использованием "as"

Экспорт по умолчанию — экспорт одного основного значения; импорт под любым именем, без фигурных скобок:

// user.js
export default { name: 'John', age: 30 };

// app.js
import person from './user.js';

Комбинирование обоих видов — импорт по умолчанию идет первым, именованные импорты — в фигурных скобках:

// vehicle.js
export const wheels = 4;
export default { brand: 'Toyota', model: 'Corolla' };

// app.js
import myCar, { wheels } from './vehicle.js';

Когда и что использовать: используйте именованный экспорт для нескольких связанных утилит; используйте экспорт по умолчанию для одного основного значения модуля (класс, компонент, конфигурация).

Попробуйте сами

// TODO: Импортируйте обе функции сюда из calculator.js


// Тест
console.log(calculate(10, 5, '+')); // Должно вывести 15
console.log(square(4));             // Должно вывести 16