Exportações Default vs. Nomeadas

Em módulos JavaScript, você tem duas maneiras principais de exportar seu código: named exports e default exports.

Named Exports permitem que você exporte múltiplos 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 dentro de chaves:

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

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

Se você precisar renomear uma importação nomeada, use a palavra-chave as para criar um apelido:

// 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 Padrão permitem que você exporte um único valor principal de um módulo:

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

export default user;

Ao importar um default export, você pode usar qualquer nome que desejar sem o uso de 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 fornece múltiplas utilidades relacionadas (ex: uma coleção de funções auxiliares). Use uma exportação padrão quando um módulo tem um propósito primário ou valor principal (ex: uma classe, um componente ou um objeto de configuração).

Você pode combinar ambos os tipos de exportações 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