JavaScript Modules Export
The Export Keyword
A module uses the export keyword
to share values with other files.
A module can have many named exports.
A module can (optionally) have one default export.
Named Exports
A named export gives a name to each item.
Items can be exported individually, or wrapped in { } at the bottom:
Module File "person.js"
name and age exported individually:
export const name = "Jesse";
export const age = 40;
name and age exported at once at the bottom:
const age = 40;
// export name and age
export { name, age };
You import named exports by wrapping them in { }.
The names must match exactly.
Module Script
// Import name and age
import { name, age } from "./person.js";
</script>
Note
Named exports enforce correct naming. If you misspell a name, you get an error.
Module File "math.js"
Here, PI, add, subtract, multiply, and divide are named exports:
export function add(a, b) {
return a + b;
}
export function subtract(a, b) {
return a - b;
}
export function multiply(a, b) {
return a * b;
}
export function divide(a, b) {
return a / b;
}
Module Script
import { add, subtract, PI } from './math.js';
</script>
Name Strictness
With named exports, the imported names must match exactly.
Name exports avoid mistakes caused by typos or renaming.
Toolbox Utilities (Helpers)
Utilities work best with named exports if they contain multiple helpers:
- math.js
- stringUtils.js
- domHelpers.js
- dateHelpers.js
Note
Named exports are perfect for "toolbox" modules containing many utilities.
Tree-Shaking
Named exports enable bundlers to remove unused code (tree-shaking).
In this example PI, subract, multiply, and divide is removed:
When to Use Named Export?
| Cases | Why Named Export |
|---|---|
| Many functions | Clearly lists all functions |
| Strictness needed | Prevents name typos |
| Big projects | Improves consistency |
| Utility sets | Matches module structure |
| Tree-shaking | Removes unused code automatically |
Default Exports
Default Export exports one main value from a module.
This gives a clear intent about what the module's primary functionality is.
If a file is meant to expose one primary function, class, or value, default export makes that explicit:
Note
You can have only one default export in a file.
Default is Flexible
Default exports let you import using any name:
The name calc does not need to match the original.
Compared to named exports, where the name must match exactly:
Try it yourself using the module file named message.js:
Module File "message.js"
const name = "Jesse";
const age = 40;
return name + ' is ' + age + 'years old.';
};
export default message;
Module Script 1
import message from "./message.js";
</script>
Module Script 2
import text from "./message.js";
</script>
Default is Clean
Many libraries expose a single feature as the default:
Combining Default + Named
A module can provide one main function plus some helpers:
Module File
export function validate() { ... }
export function format() { ... }
Module Script
When to Use Default Export?
| When | Why |
|---|---|
| One main purpose | Good for modules with a primary function |
| Flexible naming | Importers can choose any name |
| Cleaner imports | Shorter and simpler import syntax |
| Common pattern | Frameworks use it for the main API |