Entendendo Modules no JavaScript: Quando usar Export Nomeado vs. Export Default?

Se você está começando a dar os seus primeiros passos no universo do desenvolvimento web moderno — especialmente com frameworks como o React —, com certeza já se deparou com as palavras-chave export e import.

No JavaScript moderno (a partir do ES6), nós dividimos o nosso código em arquivos separados chamados módulos. Para que um arquivo consiga usar uma função, objeto ou componente criado em outro arquivo, precisamos “compartilhá-lo” usando o sistema de exportação.

O ecossistema nos dá duas formas principais de fazer isso: o Export Nomeado (export) e o Export Padrão (export default). Mas qual é a diferença real entre eles e quando escolher cada um? Vamos clarear isso de uma vez por todas!

1. Export Nomeado (export)

O Export Nomeado é a escolha ideal quando o seu arquivo funciona como uma “caixa de ferramentas”, ou seja, quando você tem múltiplas funções ou componentes dentro do mesmo arquivo que precisam ser compartilhados individualmente.

Como funciona na prática?

Para usar, você simplesmente coloca a palavra-chave export antes da declaração da sua função, variável ou componente:

JavaScript

// src/utils/calculadora.js

export function somar(a, b) {
  return a + b;
}

export function subtrair(a, b) {
  return a - b;
}

export const PI = 3.14159;

Note que exportamos três coisas distintas do mesmo arquivo.

Como importar? (A regra das Chaves { })

Quem vai receber um export nomeado é obrigado a usar chaves { } e precisa usar exatamente o mesmo nome que foi definido na origem:

JavaScript

// src/App.js
import { somar, PI } from './utils/calculadora';

console.log(somar(2, 3)); // 5
console.log(PI); // 3.14159

2. Export Padrão (export default)

O Export Padrão é usado quando o seu arquivo tem um único objetivo principal. No mundo do React, isso é extremamente comum: criamos um arquivo inteiro apenas para abrigar um único componente principal (como o arquivo App.js ou Botao.js).

Como funciona na prática?

Você pode definir o export default diretamente na função ou no final do arquivo. Lembre-se: só pode existir um único export default por arquivo.

JavaScript

// src/components/Card.jsx

function Card() {
  return (
    <div className="card">
      <h2>Título do Card</h2>
    </div>
  );
}

export default Card; // Definido como a exportação principal

Como importar? (Sem chaves e nome livre)

Ao importar uma exportação padrão, você não usa chaves e, por ser a única peça principal daquele arquivo, você pode chamá-la pelo nome que você quiser na hora do import:

JavaScript

// src/App.js
import MeuCardCustomizado from './components/Card'; // Sem chaves!

function App() {
  return <MeuCardCustomizado />;
}

O JavaScript sabe automaticamente que, ao buscar aquele arquivo sem chaves, você quer o item que foi marcado como default.

📊 Tabela Comparativa: O Resumo da Ópera

Para fixar o conceito de forma rápida, salve esta tabela mental:

🚀 Qual é a melhor prática de mercado?

Embora o JavaScript permita o uso de ambos e a escolha mude de equipe para equipe, a comunidade de desenvolvimento (especialmente em projetos React) costuma seguir uma convenção muito clara:

1. Use export default para componentes principais ou páginas: Se o arquivo tem o nome de Home.jsx ou Dashboard.jsx, faz todo sentido que o componente principal ali dentro seja o export padrão.
2. Use export nomeado para componentes menores e utilitários: Quando você usa o export nomeado para as pecinhas menores do seu projeto (como Button, Input, Modal), você ganha o poder do Auto-Complete do VS Code. Ao começar a digitar o import com as chaves { }, o próprio editor de código sugere e completa para você, o que evita erros de digitação e acelera drasticamente a produtividade.

Conclusão

Dominar o sistema de módulos do JavaScript é um passo fundamental para escrever códigos limpos, modulares e fáceis de dar manutenção. Na próxima vez que seu código quebrar por um erro de importação, respire fundo e verifique: “Será que esqueci as chaves no import ou errei o nome de um export nomeado?”.

Gostou deste artigo? Deixe nos comentários qual abordagem você tem utilizado mais nos seus projetos atuais!