Our volunteers haven't translated this article into عربي yet. Join us and help get the job done!
You can also read the article in English (US).

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 three types of exports

  1. Named Exports (Zero or more exports per module)
  2. Default Exports (One per module)
  3. Hybrid Exports
// 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 …;
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 };

And aggregate submodules together in a parent module so that they are available to import from that module.

// In parentModule.js
export { myFunction, myVariable } from 'childModule1.js';
export { myClass } from 'childModule2.js';
// In top-level module
import { myFunction, myVariable, myClass } from 'parentModule.js'

Examples

Using named exports

In a module 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

Update compatibility data on GitHub
DesktopMobileServer
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung InternetNode.js
exportChrome Full support 61Edge Full support 16
Full support 16
Full support 15
Disabled
Disabled From version 15: this feature is behind the Experimental JavaScript Features preference.
Firefox Full support 60
Full support 60
No support 54 — 60
Disabled
Disabled From version 54 until version 60 (exclusive): this feature is behind the dom.moduleScripts.enabled preference. To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 47Safari Full support 10.1WebView Android No support NoChrome Android Full support 61Firefox Android Full support 60
Full support 60
No support 54 — 60
Disabled
Disabled From version 54 until version 60 (exclusive): this feature is behind the dom.moduleScripts.enabled preference. To change preferences in Firefox, visit about:config.
Opera Android Full support 44Safari iOS Full support 10.1Samsung Internet Android No support Nonodejs ?

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