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.


export { name1, name2, …, nameN };
export { variable1 as name1, variable2 as name2, …, nameN };
export let name1, name2, …, nameN; // also var, const
export let name1 = …, name2 = …, …, nameN; // also var, const
export function FunctionName(){...}
export class ClassName {...}

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

export * from …;
export { name1, name2, …, nameN } from …;
export { import1 as name1, import2 as name2, …, nameN } from …;
export { default } from …;
Identifier to be exported (so that it can be imported via import in another script).


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:
    // exports a function declared earlier
    export { myFunction }; 
    // exports a constant
    export const foo = Math.sqrt(2);
  • Default exports (function):
    export default function() {} 
  • Default exports (class):
    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:

let k; export default k = 12; // in file test.js

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

The following syntax does not export a default export from the imported module:

export * from …;

If you need to export the default, write the following instead:

export {default} from 'mod';


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;
var graph = {
    draw: function(){
        console.log('From graph draw function');
export { cube, foo, graph };

This way, in another script, we could have:

//You should use this script in html with the type module ,
//eg ''<script type="module" src="demo.js"></script>",
//open the page in a httpserver,otherwise there will be a CORS policy error.
//script demo.js

import { cube, foo, graph } from 'my-module';
graph.options = {
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

Note that it is not possible to use var, let or const with export default.

Module Redirects

If we want to export default, and star from another module (effectively creating a "redirect"):

// module "redirect-module.js"
export {default} from './other-module';
export * from './other-module';


Browser compatibilityUpdate compatibility data on GitHub

Chrome Edge Firefox Internet Explorer Opera Safari
Basic support 61 16
Disabled From version 15: this feature is behind the Experimental JavaScript Features preference.
54 — 60
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.
No 47 10.1
Android webview Chrome for Android Edge Mobile Firefox for Android Opera for Android iOS Safari Samsung Internet
Basic support No 61 Yes 60
54 — 60
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.
47 10.1 No
Basic support ?

See also

© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.