Home

ES6 module export and import syntax

Export statements

Variable declaration exports

Variables declared using var, let and const can be exported by prepending their declarations with the export keyword.

Export uninitialized variable declarations

// module.js
export var foo;
export let bar;
// export const MY_CONSTANT; // <= Does not work, as 'const' declarations must be initialized!

// main.js
import {foo, bar} from './module';
console.log(foo, bar);

Output:

undefined undefined

Export numeric variable declarations

// module.js
export var   radius = 5;
export const PI = Math.PI;
export let   diameter = PI * radius * 2; 

// main.js
import {PI, radius, diameter} from './module';
console.log(PI);
console.log(radius);
console.log(diameter);

Output:

3.141592653589793
5
31.41592653589793

Export string variable declarations

// module.js
export var   all      = "World";
export let   greeter1 = "Hello " + all + "!";
export const greeter2 = `Hello ${all}!`; // template strings can only use variables from the module scope!

// main.js
import {all, greeter1, greeter2} from './module';
console.log(all);
console.log(greeter1);
console.log(greeter2);

Output:

World
Hello World!
Hello World!

Export array variable declarations

// module.js
export var   array1 = [];
export let   array2 = [1, 2, 3];
export const array3 = [...array2, 4, 5];

// main.js
import {array1, array2, array3} from './module';
console.log(array1);
console.log(array2);
console.log(array3);

Output:

[]
[ 1, 2, 3 ]
[ 1, 2, 3, 4, 5 ]

Export object variable declarations

// module.js
export var   object1 = {};
export let   object2 = {a:1, b:2};
export const object3 = Object.assign( {c:3}, object2 );

// main.js
import {object1, object2, object3} from './module';
console.log(object1);
console.log(object2);
console.log(object3);

Output:

{}
{ a: 1, b: 2 }
{ c: 3, a: 1, b: 2 }

Function exports

Function declarations (with a name) and function expressions can be exported.

Export function declarations

// module.js

// This does not work! Cannot export anonymous function declarations this way.
// export function () { console.log("Hello World!"); };

export function hello() { console.log("Hello World!"); };

// main.js
import {hello} from './module';
hello();

Output:

Hello World! 

Export function expressions

// module.js
export var   hello1 = function () { console.log("Hello1"); };
export let   hello2 = function myFunc() { console.log("Hello2"); };
export const hello3 = function () { console.log("Hello3"); };

// main.js
import {hello1, hello2, hello3} from './module';
// import {myFunc} from './module.js'; // <= Does not work!
hello1();
hello2();
hello3();

Output:

Hello1
Hello2
Hello3 

Class exports

Class declarations (with a name) and class expressions can be exported.

Export class declarations

// module.js

// This does not work! Cannot export anonymous class declarations this way.
// export class {
//     print(msg) { console.log(msg); }
// }

export class StdOut {
    print(msg) { console.log(msg); }
}

// main.js
import {StdOut} from './module';
const o = new StdOut;
o.print("Hello World!");

Output:

Hello World! 

Export class expressions

// module.js

// Simple class expression
export var class1 = class {
    print(msg) { console.log(msg); }
};

// Named class expression
export let class2 = class myClass {
    print(msg) { console.log(msg); }
};

// Simple class expression
export const class3 = class {
    print(msg) { console.log(msg); }
};

// main.js
import {class1, class2, class3} from './module';
// import {myClass} from './module'; // <= Does not work!
const o1 = new class1();
o1.print("Object1");
const o2 = new class2();
o2.print("Object2");
const o3 = new class3();
o3.print("Object3");

Output:

Object1
Object2 
Object3 

Export list

Curly braces can be used with the export statement to list the items to export:

// circle.js
const PI = Math.PI;

function perimeter(radius) {
    return radius * PI * 2;
}

function area(radius) {
    return Math.pow(radius, 2) * PI;
}

// Export all module items
export {PI, perimeter, area};

Several export lists can be used:

// circle.js
const PI = Math.PI;

function perimeter(radius) {
    return radius * PI * 2;
}

function area(radius) {
    return Math.pow(radius, 2) * PI;
}

// Export constants
export {PI};
// Export functions
export {perimeter, area};

Only some items can be exported:

// circle.js
const PI = Math.PI;

function perimeter(radius) {
    return radius * PI * 2;
}

function area(radius) {
    return Math.pow(radius, 2) * PI;
}

// Export functions only
export {perimeter, area};