JavaScript: Export

By Xah Lee. Date: 2018-02-07. Last updated: 2023-03-01.

New in JS2015.

Basic Import/Export Examples

Export Multiple Names

here's a sample library file lib.js:

// file name: lib.js
const f1 = ((x) => (x + 1));
const f2 = ((x) => (x + 2));
export { f1, f2 };

here's a JavaScript file main.js that import the lib file:

// file name: main.js
import { f1, f2 } from "./lib.js";

console.log(f1(1));

And here's the HTML to load the main.js

<script type="module" src="./main.js"></script>

Note, if a JavaScript file uses import, export, you must have type="module". Else you get this error: “Uncaught SyntaxError: Cannot use import statement outside a module”

Basic Default Export

Before JavaScript ES2015, it is common for a lib to export just 1 value. (typically a object, such as xyz, with many methods as properties. For example, jQuery does this with dollar sign $ as name. ).

JavaScript ES2015 has a special syntax for exporting just 1 value, and calls it default export/import.

Here is a basic example:

// file name: lib2.js

// export a object

export default {
  f1: ((x) => x + 1),
  f2: ((x) => x + 2),
};

// note, no name is given to the object

// file name: main.js

// import a value from lib2.js , and name it g

import g from "./lib2.js";

console.log(g.f1(1));

And here's the HTML to load the main.js

<script type="module" src="./main.js"></script>

Note, you must have type="module".

Export Explained

Export, is to mark names or values. (the “name” is a identifer. It can be variable name, function name, class name, object name, etc.).

The purpose of the marking is so that another file can “import” these marked names or values.

There are 2 kinds of export:

named export → mark several names or values.
default export → mark just 1 value for export, called the “default” export.

They are separate as 2 kinds because each has different syntax, and each also have different import syntax.

Note, from language design point of view, “default” export is not necessary, because you can just do named export with 1 name. But people find it convenient to have 1 special syntax that just export/import 1 value.

You can mix named export and default export. That is, you can export 1 or more names/values, and also export 1 value as the “default”.

When people import from your library, they can do any of:

Import 1, or some, or all named export.
Import just the “default” export.
Import both some/all exported names and the default export value.

Export Syntax for Named Export

There are several syntax for named export.

Following forms put all export names together.

export { name1, name2 etc };
export { name1 as newName1, name2 as newName2 etc};

Following forms mark export at the same line as declaration:

export let name etc;
export function name(params) {body}
export class name {body}

Note, let with multiple names or assignment also works. example: export let a = 1, b = 2, c = 3; And also work with var and const. (constant must have a value when declared.)

[see let Declaration]

Export Syntax for Named Export from a Module

You can export names from another module you loaded.

export * from path;
export { name1, name2 etc } from path;
export { name1 as newName1, name2 as newName2 etc } from path;

Export Syntax for Default Export

Default Export is a syntax that marks just 1 value for export.

export default expression;
export default function name (params) {body}

Note, the above form of function can also be class and function*

[see Class]

[see Generator Function]

You can also use this form:

export { name1 as default };

Export Syntax for Default Export from a Module

export { default } from path;

Cross Origin Error

Import/export do not work over local file system. You'll get a cross origin error.

If you want to test them, you need to have the html page from a http server. You can start a local server.

Import/Export, Top-Level Only

Import/Export must be top level only. Meaning, it cannot happen inside a block of code or in if statement.

Import/Export Are Hoisted

The position of import or export statement in source file does not matter.

For example, this is ok:

console.log(f(1));
import { f } from "./lib.js";

Import/Export Are Static

Import/export are static. For example, it's impossible to have code that determines which name to import/export.

Import and Export Are Ad-Hoc Syntax of Little Language

The import/export syntax are little ad-hoc language, having nothing to do with rest of JavaScript language syntax.

For example, the {} in export {name1,name2} are not object nor code block.

BUY

ΣJS
JavaScript in Depth