JS: Module. Export

default export and named export

There 2 kinds of exports.

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 users import, they can explicitly specify these names, or all of them without having to know the names.

Export Explained

Export, is to mark names or values.

(“name” means identifer. e.g. 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 they have different export syntax, and they also have different import syntax.

You can mix named export and default export.

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

• Import one, or more than one, or all, named export.
• Import just the “default” export.
• Both of above.

Export Syntax for Named Export

Export Multiple Names in One Shot

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

this can appear before the actual declarations of those names.

Export at Each Declaration Location

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

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

Export Syntax for Named Export from Another Module

You can export names from another module you imported.

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

Default Export Syntax for Things in Current Module

any of:

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

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

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

Default Export Syntax for Things Imported from Another Module

• export { default } from path;

Example. Named Export

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>

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

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.

// call a function f
console.log(f(1));

// import the function f
import { f } from "./lib.js";

// import statement is hoisted. so order does not matter.

Export is Static

Exports are static. It's impossible to export at runtime.

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.