Skip to content

Home

Jump to bottom
GBCreation edited this page Oct 12, 2016 · 8 revisions

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.

Exporting 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

Exporting 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

Exporting 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!

Exporting 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 ]

Exporting 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.

Exporting 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!

Exporting 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.

Exporting 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!

Exporting 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 lists

Instead of marking each item to export with the export keyword, it is possible to export all of them in one go by listing their identifier name between curly braces: export { IdentifierName1, IdentifierName2, ... };

// 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, not PI
export {perimeter, area};

Renaming exports

Module items can be exported under different names using the following syntax: export { IdentifierName as IdentifierName }

Example:

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

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

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

export {PI as CONST_PI};
export {perimeter as computeCirclePerimeter};
export {area as computeCircleArea};
// main.js
import {CONST_PI, computeCirclePerimeter, computeCircleArea} from './circle';
console.log(CONST_PI);
console.log(computeCirclePerimeter(5));
console.log(computeCircleArea(5));

Output:

3.141592653589793
31.41592653589793
78.53981633974483

Only some of them can be renamed:

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

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

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

export {PI};
export {perimeter as computeCirclePerimeter};
export {area};
// main.js
import {PI, computeCirclePerimeter, area} from './circle';
console.log(PI);
console.log(computeCirclePerimeter(5));
console.log(area(5));

Output:

3.141592653589793
31.41592653589793
78.53981633974483

Renamed exports can also be grouped into export lists:

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

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

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

export {PI as CONST_PI, perimeter as computeCirclePerimeter, area as computeCircleArea};
// main.js
import {CONST_PI, computeCirclePerimeter, computeCircleArea} from './circle';
console.log(CONST_PI);
console.log(computeCirclePerimeter(5));
console.log(computeCircleArea(5));

Output:

3.141592653589793
31.41592653589793
78.53981633974483

In export lists, only some items can be renamed:

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

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

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

export {PI, perimeter as computeCirclePerimeter, area};
// main.js
import {PI, computeCirclePerimeter, area} from './circle';
console.log(PI);
console.log(computeCirclePerimeter(5));
console.log(area(5));

Output:

3.141592653589793
31.41592653589793
78.53981633974483

Default exports

A module can export a "default" value which is considered as the "main" exported value. There can be one and only one default export per module.

Syntaxes for exporting default values

The syntax to export a default value is: export default IdentifierName;

Example:

// module.js
const PI = Math.PI;
export default PI;
Clone this wiki locally