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
, eexport
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.