Exportações Default vs. Nomeadas

Parte da seção Programação Orientada a Objetos do Journey de JavaScript da Coddy — lição 10 de 56.

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

Desafio

Fácil

Você tem dois arquivos. Sua tarefa é configurar as exportações em calculator.js e as importações em main.js.

Em calculator.js: Exporte calculate como default e square como nomeada
Em main.js: Importe ambas as funções corretamente

Os testes verificarão:

Exportação default usada para calculate
Exportação nomeada usada para square
Ambas as importações funcionam corretamente

Folha de consulta

Exportações Nomeadas (Named Exports) — exporte e importe múltiplos valores pelo nome exato:

// 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'; // apelido com "as"

Exportações Padrão (Default Exports) — exporte um valor principal; importe com qualquer nome, sem chaves:

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

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

Combinando Ambos — a importação padrão vem primeiro, as importações nomeadas entre chaves:

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

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

Quando usar cada um: use exportações nomeadas para múltiplos utilitários relacionados; use uma exportação padrão para o valor principal único de um módulo (classe, componente, configuração).

Experimente você mesmo

// TODO: Importe ambas as funções aqui de calculator.js


// Teste
console.log(calculate(10, 5, '+')); // Deve exibir 15
console.log(square(4));             // Deve exibir 16