Desenvolvimento Desenvolvimento Desktop Desenvolvimento Mobile Desenvolvimento Web Javascript Linguagens de programação Node.js React

Como importar e exportar módulos no Javascript

Javascript - Dicas

O post ensina como importar e exportar módulos no Javascript fazendo com que seja possível utilizar funções, variáveis e classes de um arquivo em outro.

Como importar e exportar módulos no Javascript

Uma das features mais utilizadas em qualquer projeto Javascript é a impotação e exportação de módulos. Essa feature permite que os devs utilizem funções, variáveis e classes de um arquivo em outro.

Para entendermos como isso funciona vamos pegar como exemplo o arquivo App.js

// App.js

export function soma(a, b) {
  return a + b;
}

export const user = {
  nome: 'Danilo Filitto',
  empresa: 'dfilitto'
};

export default class App {
  static log() {
    console.log('Hey');
  }
}

Nesse primeiro arquivo estamos exportando uma função soma, um objeto user e uma classe App. Note que na última exportação estamos passando a palavra default e dessa forma estamos sinalizando que se não informamos a esse arquivo o quê estamos importando, por padrão ele deve retornar essa classe. Vamos ver como ficaria as importações:

// OutroArquivo.js

import App from 'App'; // Podemos omitir o .js aqui

App.log(); // Hey
soma(1, 2); // Erro: undefined function soma

Note que ele importou apenas a classe App e nada mais. Para importarmos variáveis, objetos ou classes que não estão com a notação default podemos utilizar a desestruturação aprendida anteriormente:

// OutroArquivo.js

import { soma, user } from 'App';

soma(1, 3); // 4
console.log(user.nome); // Diego

Outra forma de importar todas exportações sem a notação default de um arquivo é utilizando o wildcard *. Ao fazer isso helpers irá possuir tudo o que foi definido no arquivo App.js.

// OutroArquivo.js

import * as helpers from 'App';

helpers.soma(1, 3); // 4
console.log(helpers.user.nome); // Diego

Ainda podemos unir a importação do módulo default e das outras exportações em um único import.

import App, { soma, user } from 'App';

Super dicas

Se inscreva em nosso canal e compartilhe as matérias que gostar com os seus colegas.

Participe dos nossos grupos de estudos do Facebook, WhatsApp desenvolvimento de sistemas e WhatsApp desenvolvimento de jogos.

Aproveite também e venha fazer parte do nosso clube de vantagens e ter acesso exclusivo a vídeos, tutoriais, cursos e muito mais.

Clique no link para se tornar um membro do dfilitto – clube de vantagens e ter acesso a todos os benefícios do nosso clube.

Fonte: RocketSeat

About the author

Danilo Filitto

Mestre em Ciência da Computação pela Universidade Estadual de Maringá - UEM, Pós-Graduado em Redes de Computadores e Comunicação de Dados pela Universidade do Estado do Paraná - UEL, Bacharel em Ciência da Computação pela Universidade do Oeste Paulista - UNOESTE.

Atuo na área acadêmica como professor desde 2006. Atualmente leciono na UNOESTE (Universidade do Oeste Paulista), no SENAC (Serviço Nacional de Aprendizagem Comercial) e possuo vários cursos na Udemy (https://www.udemy.com/user/danilo-filitto/).

Além disso, sou o CEO dos sites https:www.dfilitto.com.br e https:www.makeindiegames.com.br

Você também pode me encontrar no YouTube por meio do endereço https://www.youtube.com/danilofilittoppr

Inscreva-se para receber em seus e-mais as notícias do nosso site

Quer aprender a programar?