export
The export statement is used to export functions, objects or primitives from a given file (or module).
Note: This feature is not implemented in any browsers natively at this time. It is implemented in many transpilers, such as the Traceur Compiler, Babel or Rollup.
Syntax
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 expression; 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 …;
nameN
- Identifier to be exported (so that it can be imported via
import
in another script).
Description
There are two different types of export, each type corresponds to one of the above syntax:
- Named exports:
JavaScriptCopy Code
export { myFunction }; // exports a function declared earlier export const foo = Math.sqrt(2); // exports a constant
- Default exports (only one per script):
JavaScriptCopy Code
export default function() {} // or 'export default class {}' // there is no semi-colon here
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.
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.
Examples
Using named exports
In the module, we could use the following code:
// module "my-module.js" function cube(x) { return x * x * x; } const foo = Math.PI + Math.SQRT2; export { cube, foo };
This way, in another script (cf. import
), we could have:
import { cube, foo } from 'my-module'; console.log(cube(3)); // 27 console.log(foo); // 4.555806215962888
Using the default export
If we want to export a single value or to have a fallback value for our module, we could use a default export:
// module "my-module.js" export default function cube(x) { return x * x * x; }
Then, in another script, it will be straightforward to import the default export:
import cube from 'my-module'; console.log(cube(3)); // 27
Specifications
Specification | Status | Comment |
---|---|---|
ECMAScript 2015 (6th Edition, ECMA-262) The definition of 'Exports' in that specification. |
Standard | Initial definition. |
ECMAScript 2017 Draft (ECMA-262) The definition of 'Exports' in that specification. |
Draft |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | No support | No support | No support | No support | No support |
Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | No support | No support | No support | No support | No support | No support |
See also
import
- ES6 in Depth: Modules, Hacks blog post by Jason Orendorff
- Axel Rauschmayer's book: "Exploring JS: Modules"
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/javascript/reference/statements/export