Como funciona o import e export do JavaScript?

Introdução

Dando aulas de JavaScript, Angular e React eu vejo que essa dúvida é muito frequente tanto em quem ta começando com JavaScript quanto com pessoas que já trabalham com a linguagem mas nunca exploraram o recurso, então bora ver como usar isso no dia a dia!

Aproveitando aqui pra avisar que recentemente eu comecei a fazer vídeos com explicações mais gerais de JavaScript como essa no meu canal do YouTube, Dev Soutinho, e aproveito pra deixar o convite aqui com um tutorial implementando o map e o forEach :)

Na imagem acima a gente já consegue visualizar um pouco do que eu vou explicar aqui. Mas antes, é importante dizer em JavaScript, cada arquivo é considerado como um módulo e todas as variáveis e funções que ele possui só são acessíveis dentro dele, a menos que você explicitamente as exporte.

No navegador você precisa usar a tag script com type="module" para usar os recursos aqui exemplificados, se estiver usando algum framework não precisa se procupar e no NodeJS o suporte já está disponível :).
Lembrando que a MDN possui toda a referência sobre esse assunto: import, e export

O caso mais comum: export default

No caso abaixo, sempre que criarmos um arquivo (módulo), e quisermos exportar algum dado dele para acessar em outro, vamos fazer um código bem similar com o exemplo abaixo:

// ## ex01/moduloA.js
const variavel = 'Valor';
const variavel2 = 'Outro Valor';
export default variavel;

// ## ex01/moduloB.js
import Modulo;
console.log(Modulo); // => 'Valor'

É importante reforçar que nesse caso a variavel2 não está disponível como um valor acessível em ex01/moduloB.js

Repare também que na hora de importar, não precisamos passar o nome variavel, o nome é um apelido (ou alias) e você pode escolher o que fizer mais sentido dentro do contexto da importação, lembrando que, é uma boa prática fazer o import com o nome do arquivo na maioria das vezes, ficando algo como moduloA.

// ## ex01/moduloB.js
import ModuloA;
console.log(ModuloA); // => 'Valor'

Como exportar multiplos valores de um arquivo?

A primeira opção, em cima do que vimos anteriormente é exportar um objeto com os dados que queremos acessar em outro arquivo:

// ## ex01/moduloA.js
const variavel = 'Valor';
const variavel2 = 'Outro Valor';
export default {
   variavel: variavel,
   variavel2: variavel2,
};

// ## ex01/moduloB.js
import Modulo;
console.log(Modulo); // { variavel: 'Valor', variavel2: 'Outro Valor' }

Uma forma alternativa a que vimos agora é fazer na hora que declaramos uma variável ou função, colocar um export atrás, como no exemplo abaixo:

// ## ex01/moduloA.js
export const variavel = 'Valor';
export const variavel2 = 'Outro Valor';

// ## ex01/moduloB.js
import { variavel, variavel2 };
console.log(variavel, ' e ' ,variavel2); // 'Valor e Outro Valor'

Repare que agora, não estamos mais utilizando o import Modulo e sim fazendo um object destructuring, e acessando cada valor individualmente, poderiamos também fazer o import como import * as Modulo, assim cada valor que exportamos seria agrupado dentro de um módulo.

Da pra misturar tudo?

Sim! Você consegue, basta se baseaer no exemplo abaixo:

// ## ex01/moduloA.js
export const variavel = 'Valor';
export const variavel2 = 'Outro Valor';
export default 'Valor default do módulo';

// ## ex01/moduloB.js
import ValorDoModulo, { variavel, variavel2 };
console.log(variavel, ' e ' ,variavel2); // 'Valor e Outro Valor'
console.log(ValorDoModulo); // Valor default do módulo'

O que vimos até aqui?

O import e export são bem flexíveis e caso você conheça mais algum caso e queira compartilhar comigo, deixo o espaço aberto no meu twitter.

Espero que esse post tenha ti ajudado e caso você queira mais dicas de JavaScript, deixo a dica para seguir [meu canal no YouTube], onde semanalmente estou lançando vídeos de JavaScript puro, React e React Native, CSS e Jogos.

E deixo aqui de novo a dica para ver meu vídeo explicando as diferenças do forEach e do map implementando ambos.