Loading lesson path
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.
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 name and age export const name = "Jesse";
export const age = 40;name and age exported at once at the bottom:
const name = "Jesse";
const age = 40;
// export name and age export { name, age };
You import named exports by wrapping them in { }.The names must match exactly.
<script type="module">
// Import name and age import { name, age } from "./person.js";</script> 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 const PI = 3.14159;
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;
}<script type="module">
import { add, subtract, PI } from './math.js';</script>
With named exports, the imported names must match exactly. Name exports avoid mistakes caused by typos or renaming.
import { calcluate } from './math.js'; // ❌ error thrown
Toolbox Utilities (Helpers)Utilities work best with named exports if they contain multiple helpers: math.js stringUtils.js domHelpers.js dateHelpers.js Named exports are perfect for "toolbox" modules containing many utilities.
Formula
Named exports enable bundlers to remove unused code (tree - shaking).In this example PI, subract, multiply, and divide is removed:
import { add } from './math.js';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:
export default function calculateSum() { ... }You can have only one default export in a file.
Default exports let you import using any name
import calc from './calculateSum.js';The name calc does not need to match the original. Compared to named exports, where the name must match exactly:
import { calculateSum } from './calculateSum.js';Try it yourself using the module file named message.js
Module File "message.js"
const message = () => {
const name = "Jesse";
const age = 40;
return name + ' is ' + age + 'years old.';
};
export default message;<script type="module">
import message from "./message.js";</script>
<script type="module">
import text from "./message.js";</script>
Many libraries expose a single feature as the default:
import React from 'react';Formula
Combining Default + NamedA module can provide one main function plus some helpers:
Module File export default function parse() { ... }
export function validate() { ... }
export function format() { ... }
Module Script import parse, { validate, format } from './parser.js';