Revision 985225 of export

<div>{{jsSidebar("Statements")}}</div>

<p>The <strong>export statement</strong> is used to export functions, objects or primitives from a given file (or <em>module</em>).</p>

<div class="note">
<p><strong>Note:</strong> This feature is not implemented in any browsers natively at this time. It is implemented in many transpilers, such as the <a href="https://github.com/google/traceur-compiler">Traceur Compiler</a>,&nbsp;<a href="https://babeljs.io/">Babel</a>&nbsp;or <a href="https://github.com/rollup/rollup">Rollup</a>.</p>
</div>

<h2 id="Syntax">Syntax</h2>

<pre class="syntaxbox">
export { <var>name1</var>, <var>name2</var>, …, <var>nameN</var> };
export { <var>variable1</var> as <var>name1</var>, <var>variable2</var> as <var>name2</var>, …, <var>nameN</var> };
export let <var>name1</var>, <var>name2</var>, …, <var>nameN</var>; // also var
export let <var>name1</var> = …, <var>name2</var> = …, …, <var>nameN</var>; // also var, const

export default <em>expression</em>;
export default function (…) { … } // also class, function*
export default function name1(…) { … } // also class, function*
export { <var>name1</var> as default, … };

export * from …;
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 …;</pre>

<dl>
 <dt><code>nameN</code></dt>
 <dd>Identifier to be exported (so that it can be imported via <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/import">import</a></code> in another script).</dd>
</dl>

<h2 id="Description">Description</h2>

<p>There are two different types of export, each type corresponds to one of the above syntax:</p>

<ul>
 <li>Named exports:
  <pre class="brush: js">
export { myFunction }; // exports a function declared earlier
export const foo = Math.sqrt(2); // exports a constant</pre>
 </li>
 <li>Default exports (only one per script):
  <pre class="brush: js">
export default myFunctionOrClass
// there is no semi-colon here</pre>
 </li>
</ul>

<p>Named exports are useful to export several values. During the import, one will be able to use the same name to refer to the corresponding value.</p>

<p>Concerning the default export, there is only a single default export per module. A default export can be a function, a class, an object or anything else. This value is to be considered as the "main" exported value since it will be the simplest to import.</p>

<h2 id="Examples">Examples</h2>

<h3 id="Using_named_exports">Using named exports</h3>

<p>In the module, we could use the following code:</p>

<pre class="brush: js">
// module "my-module.js"
export function cube(x) {
  return x * x * x;
}
const foo = Math.PI + Math.SQRT2;
export { foo };
</pre>

<p>This way, in another script (cf. <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/import">import</a></code>), we could have:</p>

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

<h3 id="Using_the_default_export">Using the default export</h3>

<p>If we want to export a single value or to have a fallback value for our module, we could use a default export:</p>

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

<p>Then, in another script, it will be straightforward to import the default export:</p>

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

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</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>&nbsp;</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Chrome for Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="See_also">See also</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="https://exploringjs.com/es6/ch_modules.html">Axel Rauschmayer's book: "Exploring JS: Modules"</a></li>
</ul>