Como funciona o import e export do JavaScript?

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:

É 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.

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:

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:

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:

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.