Exportações Default vs. Nomeadas

Nos módulos JavaScript, você tem duas maneiras principais de exportar seu código: exports nomeados e exports padrão.

Exports nomeados permitem exportar vários valores de um módulo:

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

Ao importar exportações nomeadas, você deve usar exatamente os mesmos nomes entre chaves:

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

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

Se precisar renomear uma importação nomeada, use a palavra-chave as para criar um 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

Exportações default permitem exportar um único valor principal de um módulo:

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

export default user;

Ao importar uma exportação padrão, você pode usar qualquer nome que quiser sem chaves:

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

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

Quando usar cada um? Use exportações nomeadas quando um módulo fornecer vários utilitários relacionados (por exemplo, uma coleção de funções auxiliares). Use uma exportação padrão quando um módulo tiver uma finalidade principal ou um valor principal (por exemplo, uma classe, um componente ou um objeto de configuração).

Você pode combinar os dois tipos de exportação em um único módulo:

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

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

export default car;

E importe-os juntos:

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

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