Aula 47 — import e export

Na aula anterior, entendemos o que são módulos JavaScript e por que dividir o código em vários arquivos deixa o projeto mais organizado, profissional e fácil de manter.

Agora vamos aprender como os módulos conversam entre si, usando duas palavras-chave fundamentais do JavaScript moderno: export e import.

🎯 Objetivo da aula

Ao final desta aula, você será capaz de:

• Entender o papel do export
• Entender o papel do import
• Exportar funções, variáveis e objetos
• Importar código de outros arquivos
• Conectar arquivos JavaScript de forma correta

Antes de tudo: o modelo mental certo

Pense assim:

• export → “isso aqui pode ser usado fora deste arquivo”
• import → “vou usar algo que vem de outro arquivo”

Nada mais do que isso.

Estrutura básica de arquivos

Vamos imaginar esta estrutura simples:

• utils.js
• main.js

O arquivo utils.js vai fornecer funções. O arquivo main.js vai usar essas funções.

Exportando uma função

No arquivo utils.js:

 // utils.js 
        export function somar(a, b) 
        { 
          return a + b; 
        } 

Aqui estamos dizendo:

👉 “A função somar pode ser usada fora deste arquivo.”

Importando essa função

No arquivo main.js:

 // main.js 
          import { somar } from "./utils.js";
          console.log(somar(2, 3));

 console.log(somar(2, 3)); // Saída será 5 

Repare em três coisas importantes:

• O nome importado deve ser o mesmo do export
• Usamos { } para importar
• O caminho começa com ./

Exportando mais de uma coisa

Podemos exportar várias funções no mesmo arquivo:

 // utils.js 
  export function somar(a, b) 
  { return a + b; }
  export function multiplicar(a, b) 
  {
    return a * b;
  }

E importar assim:

 // main.js 
  import { somar, multiplicar } from "./utils.js";
  console.log(somar(2, 3));
  console.log(multiplicar(2, 3));

 
  console.log(somar(2, 3)); // Saída será 5 
  console.log(multiplicar(2, 3)); // Saída será 6 

Export default (exportação padrão)

Além do export normal, existe o export default.

Ele indica o principal valor daquele arquivo.

 // calculadora.js 
    export default function somar(a, b) 
    { 
      return a + b; 
    } 

Importando um export default:

 
  // main.js 
  import somar from "./calculadora.js";
  console.log(somar(4, 6));

 console.log(somar(4, 6)); // Saída será 10 

Aqui está a diferença importante:

• export → precisa de { }
• export default → não usa { }

Posso misturar export normal e default?

Sim, mas com cuidado:

 // utils.js 
  export function subtrair(a, b) 
  { 
    return a - b; 
  }
  export default function somar(a, b) 
  {
        return a + b;
  }

Importando:

 // main.js 
  import somar, 
  { 
    subtrair 
  } from "./utils.js";
  console.log(somar(5, 3));
  console.log(subtrair(5, 3));

 
  console.log(somar(5, 3)); // Saída será 8 
  console.log(subtrair(5, 3)); // Saída será 2 

Importante: módulos no navegador

Para usar módulos no navegador, o script precisa ser declarado assim:

 <script type="module" src="main.js"></script> 

Por que isso muda tudo?

• Código mais organizado
• Menos variáveis globais
• Arquivos com responsabilidades claras
• Base para projetos grandes e frameworks

Na próxima aula, vamos aprender sobre organização de projetos, estruturando pastas e arquivos do jeito certo.