Artigos de Tecnologia e Negócios > Front-end

Como funciona o import e export do JavaScript?

Mario Souto
Mario Souto

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!

Exemplo de import e export

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.

Artigos de Tecnologia e Negócios > Front-end

Cursos profissionais de Front-end é na Alura, comece agora!

  • 1120 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

Premium

  • 1120 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$75
à vista R$900
Matricule-se

Premium Plus

  • 1120 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$100
à vista R$1.200
Matricule-se

Max

  • 1120 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$120
à vista R$1.440
Matricule-se
Procurando planos para empresas?
Acesso por 1 ano
Estude 24h/dia onde e quando quiser
Novos cursos toda semana