The export
statement is used when creating JavaScript modules to export functions, objects, or primitive values from the module so they can be used by other programs with the import
statement.
Exported modules are in strict mode
whether you declare them as such or not. The export statement cannot be used in embedded scripts.
Syntax
There are two types of exports:
- Named Exports (Zero or more exports per module)
- Default Exports (One per module)
// Exporting individual features export let name1, name2, …, nameN; // also var, const export let name1 = …, name2 = …, …, nameN; // also var, const export function functionName(){...} export class ClassName {...} // Export list export { name1, name2, …, nameN }; // Renaming exports export { variable1 as name1, variable2 as name2, …, nameN }; // Exporting destructured assignments with renaming export const { name1, name2: bar } = o; // Default exports export default expression; export default function (…) { … } // also class, function* export default function name1(…) { … } // also class, function* export { name1 as default, … }; // Aggregating modules export * from …; // does not set the default export export * as name1 from …; export { name1, name2, …, nameN } from …; export { import1 as name1, import2 as name2, …, nameN } from …; export { default } 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, named and default. You can have multiple named exports per module but only one default export. Each type corresponds to one of the above syntax:
Named exports:
// export features declared earlier export { myFunction, myVariable }; // export individual features (can export var, let, // const, function, class) export let myVariable = Math.sqrt(2); export function myFunction() { ... };
Default exports:
// export feature declared earlier as default export { myFunction as default }; // export individual features as default export default myFunction() { ... } export default class { .. }
Named exports are useful to export several values. During the import, it is mandatory to use the same name of the corresponding object.
But a default export can be imported with any name for example:
// file test.js let k; export default k = 12;
// some other file import m from './test'; // note that we have the freedom to use import m instead of import k, because k was default export console.log(m); // will log 12
You can also rename named exports to avoid naming conflicts:
export { myFunction as function1, myVariable as variable };
Re-exporting / Aggregating
It is also possible to "import/export" from different modules in a parent module so that they are available to import from that module. In other words, one can create a single module concentrating various exports from various modules using the export foo from 'bar.js'
.
This syntax:
export foo from 'bar.js';
is equivalent to:
import foo from 'bar.js'; export foo;
Let's take an example where we have the following hierarchy:
childModule1.js
: exportingmyFunction
andmyVariable
childModule2.js
: exportingmyClass
parentModule.js
: acting as an aggregator (and doing nothing else)- top level module: consuming the exports of
parentModule.js
- top level module: consuming the exports of
This is what it would look like using code snippets:
// In childModule1.js let myFunction = ...; // assign something useful to myFunction let myVariable = ...; // assign something useful to myVariable export {myFunction, myVariable};
// In childModule2.js let myClass = ...; // assign something useful to myFunction export myClass;
// In parentModule.js // Only aggregating the exports from childModule1 and childModule2 // to re-export them export { myFunction, myVariable } from 'childModule1.js'; export { myClass } from 'childModule2.js';
// In top-level module // We can consume the exports from a single module since parentModule // "collected"/"bundled" them in a single source import { myFunction, myVariable, myClass } from 'parentModule.js'
Examples
Using named exports
In a module my-module.js
, we could include the following code:
// module "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('From graph draw function'); } } export { cube, foo, graph };
Then in the top-level module included in your HTML page, we could have:
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
It is important to note the following:
- You need to include this script in your HTML with a
<script>
element of type="module", so that it gets recognised as a module and dealt with appropriately. - You can't run JS modules via a
file://
URL — you'll get CORS errors. You need to run it via an HTTP server.
Using the default export
If we want to export a single value or to have a fallback value for your module, you could use a default export:
// module "my-module.js" export default function cube(x) { return x * x * x; }
Then, in another script, it is straightforward to import the default export:
import cube from './my-module.js'; console.log(cube(3)); // 27
Specifications
Specification | Status | Comment |
---|---|---|
ECMAScript Latest Draft (ECMA-262) The definition of 'Exports' in that specification. |
Draft | |
ECMAScript 2015 (6th Edition, ECMA-262) The definition of 'Exports' in that specification. |
Standard | Initial definition. |
Browser compatibility
Desktop | Mobile | Server | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
export | Chrome Full support 61 | Edge
Full support
16
| Firefox
Full support
60
| IE No support No | Opera Full support 47 | Safari Full support 10.1 | WebView Android No support No | Chrome Android Full support 61 | Firefox Android
Full support
60
| Opera Android Full support 44 | Safari iOS Full support 10.3 | Samsung Internet Android Full support 8.0 | nodejs ? |
Legend
- Full support
- Full support
- No support
- No support
- Compatibility unknown
- Compatibility unknown
- User must explicitly enable this feature.
- User must explicitly enable this feature.
See also
import
- JavaScript modules guide
- ES6 in Depth: Modules, Hacks blog post by Jason Orendorff
- ES modules: A cartoon deep-dive, Hacks blog post by Lin Clark
- Axel Rauschmayer's book: "Exploring JS: Modules"