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

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

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

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

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

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

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

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

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

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

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

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

export default user;

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

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

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

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

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

// 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