JavaScript Module Export
The export statement is used to make variables, functions, or classes available to other modules. JavaScript supports two types of exports: named exports and default exports.
Named Exports
Named exports allow you to export multiple values from a module. Each export must have a name, and the importing module must use the same name (or rename with 'as').
// Inline named exports
// export const PI = 3.14159;
// export function add(a, b) { return a + b; }
// export class Calculator { ... }
// Simulating named exports
const PI = 3.14159;
function add(a, b) { return a + b; }
function subtract(a, b) { return a - b; }
// These would be exported
console.log('PI = ' + PI);
console.log('add(2, 3) = ' + add(2, 3));
console.log('subtract(10, 4) = ' + subtract(10, 4));Default Exports
Each module can have one default export. Default exports are imported without curly braces and can be given any name by the importing module.
// Default export (one per module)
// export default class Calculator {
// add(a, b) { return a + b; }
// }
// Simulating default export
class Calculator {
add(a, b) { return a + b; }
subtract(a, b) { return a - b; }
multiply(a, b) { return a * b; }
}
// In a module: export default Calculator;
// Importing: import Calculator from './calc.js';
// Or any name: import Calc from './calc.js';
const calc = new Calculator();
console.log('2 + 3 = ' + calc.add(2, 3));
console.log('10 - 4 = ' + calc.subtract(10, 4));
console.log('5 * 6 = ' + calc.multiply(5, 6));Export List
Instead of exporting inline, you can define everything first and then export them all at once using an export list at the bottom of the file.
// Define first, export at the end
const name = 'Math Utilities';
const version = '1.0.0';
function square(x) {
return x * x;
}
function cube(x) {
return x * x * x;
}
// Export list (at the bottom of the module)
// export { name, version, square, cube };
console.log('Module: ' + name + ' v' + version);
console.log('square(4) = ' + square(4));
console.log('cube(3) = ' + cube(3));Export as (Renaming)
You can rename exports using the 'as' keyword. This is useful when you want to provide a different public name for an internal variable or function.
// Renaming during export
function calculateTotal(items) {
return items.reduce(function(sum, item) {
return sum + item;
}, 0);
}
function calculateAverage(items) {
return calculateTotal(items) / items.length;
}
// export { calculateTotal as total, calculateAverage as avg };
// Now imported as: import { total, avg } from './calc.js';
const prices = [10, 20, 30, 40, 50];
console.log('Total: ' + calculateTotal(prices));
console.log('Average: ' + calculateAverage(prices));Re-exports and Aggregating Exports
You can re-export items from other modules, which is useful for creating a single entry point (barrel file) that aggregates exports from multiple modules.
// math/add.js: export function add(a, b) { return a + b; }
// math/subtract.js: export function subtract(a, b) { return a - b; }
// math/multiply.js: export function multiply(a, b) { return a * b; }
// math/index.js (barrel file):
// export { add } from './add.js';
// export { subtract } from './subtract.js';
// export { multiply } from './multiply.js';
// Now consumers import from one place:
// import { add, subtract, multiply } from './math/index.js';
// Simulating the barrel pattern
const mathLib = {
add: (a, b) => a + b,
subtract: (a, b) => a - b,
multiply: (a, b) => a * b
};
console.log('add: ' + mathLib.add(5, 3));
console.log('subtract: ' + mathLib.subtract(10, 4));
console.log('multiply: ' + mathLib.multiply(6, 7));| Export Type | Syntax | Import Syntax |
|---|---|---|
| Named (inline) | export const x = 1; | import { x } from '...' |
| Named (list) | export { x, y }; | import { x, y } from '...' |
| Named (renamed) | export { x as myX }; | import { myX } from '...' |
| Default | export default MyClass; | import MyClass from '...' |
| Re-export | export { x } from './mod.js'; | import { x } from '...' |
| Re-export all | export * from './mod.js'; | import { x } from '...' |