path: root/files/pt-br/web/javascript/reference/statements/export/index.html

---
title: export
slug: Web/JavaScript/Reference/Statements/export
translation_of: Web/JavaScript/Reference/Statements/export
---
<div>{{jsSidebar("Statements")}}</div>

<p>O export é utilizado quando criamos módulos JavaScript para exportar ligações em tempo real para suas funções, objetos ou valores primitivos de um módulo sejam utilizados por outros programas através de declarações {{jsxref("Statements/import", "import")}}. Ligações que são exportadas ainda podem ser modificadas localmente; quando importadas, embora elas possam ser lidas somente pelo módulo que as importou, seu valor é atualizado sempre que ela modificada pelo módulo que a exportou.</p>

<p>Módulos exportados ficam em {{jsxref("Strict_mod", "strict mode")}}, independentemente se é declarado dessa forma, ou não. Export não pode ser utilizado em scripts embutidos.</p>

<h2 id="Sintaxe">Sintaxe</h2>

<p>Há dois tipos de exportação:</p>

<ol>
 <li>Exportações Explícitas (Named Exports) (Zero ou mais exports por módulo)</li>
 <li>Exportações Padrão (Default Exports) (Uma por módulo)</li>
</ol>

<pre class="syntaxbox notranslate">// Exportando recursos individuais
export let <var>name1</var>, <var>name2</var>, …, <var>nameN</var>; // também var, const
export let <var>name1</var> = …, <var>name2</var> = …, …, <var>nameN</var>; // também var, const
export function functionName(){...}
export class ClassName {...}

// Lista de exportações
export { <var>name1</var>, <var>name2</var>, …, <var>nameN</var> };

// Renomeando exports
export { <var>variable1</var> as <var>name1</var>, <var>variable2</var> as <var>name2</var>, …, <var>nameN</var> };

// Exportando atribuições desestruturadas renomeando
export const { <var>name1</var>, <var>name2: bar</var> } = o;

// Exportações Padrão (Default exports)
export default <em>expression</em>;
export default function (…) { … } // também class, function*
export default function name1(…) { … } // também class, function*
export { <var>name1</var> as default, … };

// Agregando módulos
export * from …; // não define a exportação padrão
export * as name1 from …; // Draft ECMAScript® 2O21
export { <var>name1</var>, <var>name2</var>, …, <var>nameN</var> } from …;
export { <var>import1</var> as <var>name1</var>, <var>import2</var> as <var>name2</var>, …, <var>nameN</var> } from …;
export { default } from …;</pre>

<dl>
 <dt><code>nameN</code></dt>
 <dd>Identificador para ser exportado (assim ele pode ser importado via <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/import">import</a></code> em outro script).</dd>
</dl>

<h2 id="Descrição">Descrição</h2>

<p>Há dois diferentes tipos de export, explícito(named) e padrão(default).  Pode-se ter várias exportações explícitas por módulo, mas apenas uma padrão. Cada tipo corresponde à uma da síntaxe acima:</p>

<p>Exportações explícitas:</p>

<pre class="brush: js notranslate">// exporta recursos declarados anteriomente
export { myFunction, myVariable };

// exporta recursos individuais (pode exportar var, let,
// const, function, class)
export let myVariable = Math.sqrt(2);
export function myFunction() { ... };</pre>

<p>Exportação padrão (pode ser feita apenas uma por script):</p>

<pre class="brush: js notranslate">// exporta um recurso declarado anteriormente como padrão
export { myFunction as default };

// exporta recursos individuais como padrão
export default function () { ... }
export default class { .. }</pre>

<p>Exportações explícitas são úteis para exportar vários valores. Durante a importação, é obrigatório usar o mesmo nome do objeto correspondente.</p>

<p>Mas a exportação padrão pode ser importada com qualquer nome, por exemplo:</p>

<pre class="brush: js notranslate">// arquivo test.js
let k; export default k = 12;
</pre>

<pre class="brush: js notranslate">// algum outro arquivo
import m from './test'; // note que temos a liberdade de usar import m ao invés de import k, porque k era uma exportaçào padrão
console.log(m);        // vai retornar log 12
</pre>

<p>Você também pode renomear exportações explícitas para evitar conflitos e nome:</p>

<pre class="brush: js notranslate">export { <var>myFunction</var> as <var>function1</var>,<var>
         myVariable</var> as variable };</pre>

<h3 id="Re-exportando_Agregando">Re-exportando / Agregando</h3>

<p>É possível também "importar/exportar" de módulos diferentes em um módulo pai, de modo que eles estejam disponíveis para serem importados daquele módulo. Em outras palavras, pode-se criar um módulo único concentrando várias exportações de vários módulos.</p>

<p>Isto pode ser feito com a sintaxe "export from":</p>

<pre class="brush: js notranslate">export { default as function1,
         function2 } from 'bar.js';
</pre>

<p>O que é comparável com um combinação de import e export:</p>

<pre class="brush: js notranslate">import { default as function1,
         function2 } from 'bar.js';
export { function1, function2 };
</pre>

<p>Mas onde <code>function1</code> e <code>function2</code> não ficam disponíveis dentro do módulo atual.</p>

<div class="blockIndicator note">
<p><strong>Nota:</strong> Os exemplos a seguir são sintaticamente inválidos apesar de sua equivalência com o import:</p>
</div>

<pre class="brush: js notranslate">import DefaultExport from 'bar.js'; // Válido
</pre>

<pre class="brush: js notranslate">export DefaultExport from 'bar.js'; // Inválido</pre>

<p>O modo correto de fazer isso e renomeando o export:</p>

<pre class="brush: js notranslate">export { default as DefaultExport } from 'bar.js';
</pre>

<h2 id="Exemplos">Exemplos</h2>

<h3 id="Usando_exportações_explícitas">Usando exportações explícitas</h3>

<p>Em um módulo <code>my-module.js</code> poderiamos usar o seguinte código:</p>

<pre class="brush: js notranslate">// módulo "my-module.js"
function cube(x) {
  return x * x * x;
}

const foo = Math.PI + Math.SQRT2;

var graph = {
  options: {
      color:'white',
      thickness:'2px'
  },
  draw: function() {
      console.log('Da função draw de graph');
  }
}

export { cube, foo, graph };</pre>

<p>Então, no módulo principal incluído sem sua página HTML, poderíamos ter:</p>

<pre class="brush: js notranslate">import { cube, foo, graph } from './my-module.js';

graph.options = {
    color:'blue',
    thickness:'3px'
};

graph.draw();
console.log(cube(3)); // 27
console.log(foo);    // 4.555806215962888</pre>

<p>É importante notar o seguinte:</p>

<ul>
 <li>Você pode incluir esse script no seu código HTML através do elemento {{htmlelement("script")}} do tipo="module", de modo que ele seja reconhecido e tratado apropriadamente.</li>
 <li>Você não pode executar módulos JS através de <code>file://</code> URL — você receberá errors <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/CORS">CORS</a>. Você deve rodá-los através de um servidor HTTP.</li>
</ul>

<h3 id="Usando_a_exportação_padrão">Usando a exportação padrão</h3>

<p>Se queremos exportar um valor sozinho ou obter um valor de reserva para o nosso módulo, nós poderiamos usar <code>export default</code>:</p>

<pre class="brush: js notranslate">// módulo "my-module.js"
export default function cube(x) {
  return x * x * x;
}
</pre>

<p>Daí em outro script podemos usar:</p>

<pre class="brush: js notranslate">import cube from 'my-module';
console.log(cube(3)); // 27
</pre>

<h2 id="Especificações">Especificações</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Especificação</th>
   <th scope="col">Estado</th>
   <th scope="col">Comentário</th>
  </tr>
  <tr>
   <td>{{SpecName('ES6', '#sec-exports', 'Exports')}}</td>
   <td>{{Spec2('ES6')}}</td>
   <td>Initial definition.</td>
  </tr>
  <tr>
   <td>{{SpecName('ESDraft', '#sec-exports', 'Exports')}}</td>
   <td>{{Spec2('ESDraft')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilidade">Compatibilidade</h2>



<p>{{Compat("javascript.statements.export")}}</p>

<h2 id="Veja_também">Veja também</h2>

<ul>
 <li>{{jsxref("Statements/import", "import")}}</li>
 <li><a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 in Depth: Modules</a>, Hacks blog post by Jason Orendorff</li>
 <li><a href="http://exploringjs.com/es6/ch_modules.html">Axel Rauschmayer's book: "Exploring JS: Modules"</a></li>
</ul>