JS: Export

default export and named export

There 2 kind of export by JavaScript modules.

default export

The module marks one single object for export. This object is not named.

You give it a name when you import it.

named export

The module marks several names (identifers. Each can be any value type).

When you import, you explicitly list items for import.

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:

• default export → mark just 1 value for export.
• named export → mark several names or values.

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

You can mix named export and default export.

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

• Import 1, or some, or all named export.
• Import just the “default” export.
• Both of above.

Export Syntax for Named Export

Export several names

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

Export declaration inline

• export let name … name …
• export const …
• export var …
• export function name …
• export class name

Note, let with multiple names or assignment also works. e.g. export let a = 1, b = 2, c = 3; And also work with var and const.

• JS: let

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*

• JS: class (keyword)
• JS: Generator Function

You can also use this form:

• export { name1 as default };

Export Syntax for Default Export from Another Module

• export { default } from path;

Example. 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”

Example. Basic Default Export

// 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, Top-Level Only

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

Export is 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";

Export is Static

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.