Como funcionam os operadores import e export em JavaScript?

Os operadores import e export são usados para trabalhar com módulos em JavaScript, permitindo dividir o código em partes independentes, reutilizáveis e gerenciar dependências entre eles.

export

O operador export é usado para exportar variáveis, funções, classes ou outros valores de um módulo. A exportação pode ser nomeada ou padrão.

Exportação nomeada:

// module.js
export const myVariable = 10;
export function myFunction() { // ... }
export class MyClass { // ... }

Exportação padrão: um módulo pode ter apenas uma exportação padrão.

// module.js
const defaultValue = 'default value';
export default defaultValue;

import

O operador import é usado para importar valores exportados por outros módulos.

Importação nomeada:

// another-module.js
import { myVariable, myFunction } from './module.js';

Importação com outro nome:

// another-module.js
import { myVariable as newVariableName } from './module.js';

Importar todos os nomes exportados como um objeto:

// another-module.js
import * as moduleAlias from './module.js';
// Acesso: moduleAlias.myVariable, moduleAlias.myFunction

Importar exportação padrão:

// another-module.js
import defaultValueName from './module.js';

Importar tanto a exportação nomeada quanto a padrão ao mesmo tempo:

// another-module.js
import defaultValueName, { myVariable, myFunction } from './module.js';

Princípios de funcionamento:

1. Análise estática: O motor JavaScript analisa os operadores import e export durante a compilação (antes da execução do código), criando um gráfico de dependências entre os módulos.
2. "Vínculos" vivos: Variáveis importadas não são cópias dos valores do módulo exportador. São "vínculos" vivos (referências vivas) às variáveis do módulo original. Se o valor de uma variável no módulo exportador mudar, essa mudança será visível através do vínculo importado.
3. Execução única: O código de cada módulo é executado apenas uma vez na primeira importação desse módulo. Os resultados da exportação são armazenados em cache e utilizados em importações subsequentes.
4. Uso em contexto: Os módulos são executados em seu próprio contexto, isolado do escopo global. As variáveis declaradas na raiz do módulo não poluem o espaço global, a menos que sejam explicitamente exportadas.