Em JavaScript, módulos são unidades de código independentes que podem expor ativos a outros módulos usando exportação e consumir ativos de outros módulos usando importação. Este mecanismo é essencial para a construção de código modular e reutilizável em aplicações JavaScript modernas.

Exportações padrão

• Um módulo pode ter apenas uma exportação padrão.
• Para exportar um ativo padrão, use a palavra-chave padrão antes da entidade exportada.
• Para importar uma exportação padrão, você pode atribuí-la diretamente a uma variável sem especificar o nome exportado:

// Exporting a default asset
export default function greet(name) {
  console.log(`Hello, ${name}!`);
}

// Importing the default export
import greet from './myModule';

Exportações nomeadas

• Um módulo pode ter múltiplas exportações nomeadas.
• Para exportar um ativo nomeado, use a palavra-chave export antes da entidade exportada e dê um nome a ela.
• Para importar exportações nomeadas, você deve especificar os nomes dos ativos que deseja importar:

// Exporting named assets
export function greet(name) {
  console.log(`Hello, ${name}!`);
}

export function farewell(name) {
  console.log(`Goodbye, ${name}!`);
}

// Importing named exports
import { greet, farewell } from './myModule';

Combinação de exportações padrão e nomeadas

Você pode ter uma exportação padrão e exportações nomeadas em um único módulo:

export default function greet(name) {
  console.log(`Hello, ${name}!`);
}

export function farewell(name) {
  console.log(`Goodbye, ${name}!`);
}

Para importar as exportações padrão e nomeadas:

import greet, { farewell } from './myModule';

Principais pontos a serem lembrados

• export é usado para expor ativos de um módulo.
• import é usado para consumir ativos de outros módulos.
• Um módulo pode ter apenas uma exportação padrão.
• As exportações nomeadas podem ser importadas individualmente ou coletivamente.
• Os nomes usados ​​para importações são arbitrários e não precisam corresponder aos nomes usados ​​no módulo exportado.

Exemplo prático

Considere um componente React:

import React from 'react';

export default function Greeting({ name }) {
  return 
Hello, {name}!
;
}

Neste exemplo, o componente Saudação é exportado como exportação padrão. Pode ser importado e utilizado em outros componentes:

import Greeting from './Greeting';

function MyComponent() {
  return ;
}

Ao compreender as exportações e importações, você pode organizar e reutilizar código de maneira eficaz em seus projetos JavaScript.