As declarações import e export em JavaScript são relativamente novas, pois passaram a fazer parte da linguagem a partir da 6ª versão da ECMA-262, de 2015. O objetivo desses recursos é facilitar a utilização de módulos, que antes eram feitos por meio de frameworks ou bibliotecas externas, como a CommonJS ou outras semelhantes.
Com o desenvolvimento de aplicações web cada vez maiores e complexas, o reaproveitamento de códigos é essencial para facilitar a construção e manutenção do sistema de uma forma mais organizada e eficiente. Portanto, é importante entender como esses recursos funcionam em JavaScript. Por isso, fizemos este conteúdo que contém os seguintes tópicos:
Boa leitura!
O que é o import?
O import é uma declaração que indica que vamos utilizar funções, variáveis ou classes externas ao arquivo JavaScript atual, ou seja, elas foram declaradas em outro arquivo e são disponibilizadas com a importação desse conteúdo no código. Vale dizer que cada arquivo JavaScript é visto como um módulo na linguagem.
Na prática, a declaração import diz ao interpretador que o código atual utilizará recursos externos. É possível importar somente uma variável, uma função, como também o código completo de outro arquivo JavaScript. Tudo depende da forma em que foi feita a declaração da importação e da exportação desse conteúdo.
É importante dizer que para utilizar códigos que importam de outros arquivos JavaScript em uma página HTML, é preciso adicionar o atributo type=”module” na tag de declaração do script.
Sintaxe
Existem diferentes formas de declarar o import, pois como mencionamos, é possível importar variáveis, funções ou todo o código. Além disso, podemos renomear funções e variáveis. Confira a sintaxe a seguir:
//sintaxe import
import referencia_padrao_export from "nome_do_modulo";
import * as nome_referencia from "nome_do_modulo ";
import { nome_export } from "nome_do_modulo ";
import { nome_export as alias } from "nome_do_modulo ";
import { nome_export1 , nome_export2 } from "nome_do_modulo ";
import { nome_export1, nome_export as alias2 , [...] } from "nome_do_modulo ";
import referencia_padrao_export, { nome_referencia [ , [...] ] } from "nome_do_modulo";
import referencia_padrao_export, * as nome_referencia from "nome_do_modulo";
No qual:
referencia_padrao_export: corresponde ao nome referenciado à exportação do tipo padrão do módulo;
nome_do_modulo: nome e caminho do arquivo JavaScript — relativo ou absoluto — que será adicionado como módulo;
nome_referencia: nome que será utilizado como um objeto para acessar as propriedades e métodos importados;
nome_export: nome da função, variável ou classe importada;
alias: nome alternativo para o nome_export.
Exemplos de uso do import
Vamos conferir na prática como utilizar o import em JavaScript. Para isso, vamos criar dois arquivos JavaScript, o primeiro, chamado request.js, que será utilizado para declararmos as funções, na qual vamos definir uma requisição AJAX para recuperar os dados de uma API — Application Programming Interface.
A seguir, vamos consumir esses dados no arquivo principal.js e fazer a exibição do resultado na console do navegador. Confira a depuração do código:
// arquivo principal.js
import { getCEP} from './request.js';
getCEP('http://cep.la/04094000',
data => {
console.log("Bairro: " + data.bairro);
console.log("CEP : " + data.cep);
console.log("Cidade : " + data.cidade);
console.log("Endereço : " + data.logradouro)
});
/* saída:
Bairro: Parque Ibirapuera
CEP : 04094000
Cidade : São Paulo
Endereço : Parque do Ibirapuera
*/
Perceba que utilizamos a declaração import para adicionar a indicação do arquivo request.js e indicamos o nome da função getCEP() para importá-la. Por fim, usamos uma API disponível gratuitamente, que retorna o endereço em formato JSON, por meio de uma função callback executada na requisição AJAX e de acordo com o CEP informado.
Já no arquivo request.js adicionamos a declaração export na função getCEP(), que faz a chamada à função getAPI(). Confira o algoritmo abaixo:
//arquivo request.js
function getAPI(url, callback) {
let xhr = new XMLHttpRequest();
xhr.onload = function () {
if((xhr.readyState == 0 || xhr.readyState == 4) && xhr.status == 200)
callback(this.responseText)
};
xhr.open('GET', url, true);
xhr.setRequestHeader ("Accept", "application/json");
xhr.send();
}
export function getCEP(url, callback) {
getAPI(url, data => callback(JSON.parse(data)));
}
Observe outras formas de utilizar a declaração import no mesmo código:
import * as cep from './request.js';
cep.getCEP('http://cep.la/04094000',
data => { ...
Veja que nesse caso precisamos utilizar a palavra cep para chamar a função getCEP(). Além disso, o caractere * indica que todas as funções podem ser chamadas no módulo principal.js. Na próxima opção indicamos que queremos importar a função getCEP e chamá-la apenas como cep. Confira parte do código:
import {getCEP as cep} from './request.js';
cep('http://cep.la/04094000',
data => { ...
O que é o export?
Para importar qualquer variável ou função de um arquivo JavaScript, é preciso adicionar a declaração de export. Portanto, as duas declarações devem trabalhar em conjunto, porém, em arquivos separados. Se uma for informada sem a outra, ocorrerá erro na execução do código.
Basicamente, existem duas formas de declarar o conteúdo a ser exportado: a forma explícita ou a padrão. A principal diferença entre elas é que a forma padrão permite a exportação apenas uma vez em cada módulo. Portanto, só é possível exportar uma função, uma classe ou uma variável. Já a forma explícita permite a exportação de um ou vários elementos.
Sintaxe
A declaração export pode ser realizada de diferentes maneiras. Confira as sintaxes utilizadas para a forma explícita:
export { nome1, nome2, …, nomeN};
export { nome1 as alias1, nome1 as alias2, …, nomeN as aliasN };
export function nomeFunção(){...}
export class NomeClasse {...}
Quando o tipo de exportação desejado for a default, será preciso adicionar essa palavra na declaração de importação. Confira a sintaxe a seguir:
export default nomeN;
export default function (…) { … } // ou classes
export default function name1(…) { … } // ou classes
export { nomeN as default };Em que:
- nomeN: representa o nome da variável ou função exportada;
- aliasN: indica qual nome será utilizado no módulo que exportar os objetos.
Exemplos de uso do export
Vamos conferir como utilizar a declaração export com exemplos práticos. Para isso, vamos criar dois arquivos JavaScript e adicionar variáveis e funções em um deles e no outro, importar esses objetos para utilizá-los. Observe o código fonte a seguir:
//arquivo modulo_principal.js
var mensagem = "Vamos testar as declarações import e export em JavaScript!"
function ola(){
console.log("Olá pessoal, vamos aprender a usar as declarações import e export em JavaScript!");
}
function soma(a, b){
return a + b;
}
export { ola, soma, mensagem };
//----------------------------------------------------
// outra forma de utilizar o export no mesmo código
export var mensagem = "Vamos testar as declarações import e export em JavaScript!"
export function ola(){
console.log("Olá pessoal, vamos aprender a usar as declarações import e export em JavaScript!");
}
export function soma(a, b)
return a + b;
}
Perceba que na primeira versão declaramos o export no final do código e relacionamos as funções e variáveis que queremos exportar. Já na segunda versão, declaramos o export ao lado de cada função ou variável que vamos exportar. Veja como podemos utilizar esse conteúdo:
// arquivo modulo_chamadas.js
import * as principal from './modulo_principal.js';
principal.ola();
var resultado = principal.soma(10,10);
console.log(principal.mensagem);
console.log("O resultado da soma de 10 + 10 é " + resultado);
//----------------------------------------------------
// outra forma de utilizar o import no mesmo código
import {ola, mensagem, soma} from './modulo_principal.js';
ola();
var resultado = soma(10,10);
console.log(mensagem);
console.log("O resultado da soma de 10 + 10 é " + resultado);
/* saída:
Olá pessoal, vamos aprender a usar as declarações import e export em JavaScript!
Vamos testar as declarações import e export em JavaScript!
O resultado da soma de 10 + 10 é 20
*/
No primeiro modelo importamos todo o conteúdo do arquivo modulo_principal.js e utilizamos um alias, chamado principal, para acessar os objetos. Já na segunda opção importamos as funções e variáveis com o nome original. Nesse caso não é preciso fazer a indicação ao final do código. O mesmo vale para as classes em JavaScript. Confira o código:
//arquivo exportClass.js
class Somar{
constructor(a, b){
this.a = a;
this.b = b;
}
soma(a, b){
return a + b;
}
}
export { Somar };
//----------------------------------------------------
// outra forma de utilizar o export no mesmo código
export class Somar{
constructor(a, b){
this.a = a;
this.b = b;
}
soma(a, b){
return a + b;
}
}
Perceba que o conceito é o mesmo, ou seja, a declaração pode ser feita no final do código ou ao declarar a classe. Veja como consumimos o módulo:
//arquivo importClass.js
import { Somar } from './exportClass.js';
let calcular = new Somar();
console.log("A soma de 50 + 50 é : " + calcular.soma(50,50));
/* saída:
A soma de 50 + 50 é : 100
*/
As declarações import e export em JavaScript são recursos essenciais para trabalhar com módulos, em que um arquivo utiliza funções, variáveis ou classes de outro. Eles devem ser aplicados em conjunto para funcionar da forma adequada e ajudam a deixar o código mais organizado, melhor estruturado, além de facilitar a manutenção.
Gostou do nosso conteúdo sobre como usar as declarações import e export? Então, confira este guia inicial sobre expressões regulares!
