JavaScript modules allow you to split your code into separate files, each encapsulating specific functionality. Modules help in organizing, maintaining, and reusing code by exporting and importing functions, objects, or values from one file to another.
JavaScript modules are supported natively using the import and export keywords in modern JavaScript environments (ES6 and beyond).
This tutorial will cover how to use JavaScript modules with examples, including how to create modules, use the export and import statements, and work with default exports.
1. Basic Module Structure
JavaScript modules are simple files (usually ending in .js) that contain code you want to use elsewhere. A module can export functions, variables, objects, or classes, and other modules can import them.
Example 1: Creating and Importing a Simple Module
Let's create two files: math.js (module) and app.js (main application file).
math.js (Module File)
// Exporting functions
export function add(a, b) {
return a + b;
}
export function multiply(a, b) {
return a * b;
}
app.js (Main Application File)
// Importing functions from math.js
import { add, multiply } from './math.js';
console.log(add(2, 3)); // Output: 5
console.log(multiply(4, 5)); // Output: 20
Explanation:
In math.js, we use the export keyword to make the add and multiply functions available to other modules.
In app.js, we use the import statement to bring these functions into the file.
The path ‘./math.js' indicates that math.js is in the same directory as app.js.
2. Named Exports
In the example above, add and multiply are named exports. You can have multiple named exports in a single module file.
Example 2: Using Named Exports with Variables
constants.js (Module File)
export const PI = 3.14159; export const E = 2.718; app.js (Main Application File)
app.js (Main Application File)
import { PI, E } from './constants.js';
console.log(PI); // Output: 3.14159
console.log(E); // Output: 2.718
Explanation:
Named exports can include variables, functions, classes, etc.
In app.js, you import the constants using their names enclosed in curly braces.
3. Default Exports
A module can have one default export using the export default syntax. The default export can be imported without curly braces and can be given any name in the importing module.
Example 3: Using Default Export
greet.js (Module File)
// Default export
export default function greet(name) {
return `Hello, ${name}!`;
}
app.js (Main Application File)
// Importing the default export
import greet from './greet.js';
console.log(greet('Alice')); // Output: Hello, Alice!
Explanation:
greet.js exports the greet function as the default export.
In app.js, the default export is imported without curly braces. You can also name it anything you like (greet is just a convention in this case).
4. Mixing Named and Default Exports
A module can contain both named exports and a default export.
Example 4: Mixing Named and Default Exports
mathUtils.js (Module File)
// Named exports
export function subtract(a, b) {
return a - b;
}
export function divide(a, b) {
return a / b;
}
// Default export
export default function add(a, b) {
return a + b;
}
app.js (Main Application File)
// Importing named and default exports
import add, { subtract, divide } from './mathUtils.js';
console.log(add(10, 5)); // Output: 15
console.log(subtract(10, 5)); // Output: 5
console.log(divide(10, 2)); // Output: 5
Explanation:
mathUtils.js contains a default export (add) and named exports (subtract and divide).
In app.js, the default export is imported without curly braces, and named exports are imported using curly braces.
5. Importing All as an Object
You can import all named exports from a module as an object using the * syntax.
Example 5: Importing All Named Exports as an Object
shapes.js (Module File)
export function squareArea(side) {
return side * side;
}
export function circleArea(radius) {
return Math.PI * radius * radius;
}
app.js (Main Application File)
// Import all named exports from shapes.js as an object import * as shapes from './shapes.js'; console.log(shapes.squareArea(4)); // Output: 16 console.log(shapes.circleArea(3)); // Output: 28.274333882308138
Explanation:
The import * as shapes syntax imports all named exports from shapes.js as properties of the shapes object.
This allows you to access the exports using dot notation.
6. Renaming Imports and Exports
You can rename exports using the as keyword both while exporting and importing.
Example 6: Renaming Imports and Exports
utils.js (Module File)
function square(x) {
return x * x;
}
function cube(x) {
return x * x * x;
}
// Export with renaming
export { square as squareFunction, cube as cubeFunction };
app.js (Main Application File)
// Import with renaming
import { squareFunction as sqr, cubeFunction as cub } from './utils.js';
console.log(sqr(3)); // Output: 9
console.log(cub(2)); // Output: 8
Explanation:
In utils.js, the functions square and cube are exported with new names using the as keyword.
In app.js, the imports are also renamed to sqr and cub.
7. Conditional Imports (Dynamic Imports)
JavaScript modules can be dynamically imported using the import() function, which returns a promise. This is useful for loading modules conditionally or asynchronously.
Example 7: Dynamic Import
greeting.js (Module File)
export function sayHello(name) {
return `Hello, ${name}!`;
}
app.js (Main Application File)
const loadGreetingModule = async () => {
const module = await import('./greeting.js');
console.log(module.sayHello('Bob')); // Output: Hello, Bob!
};
// Call the function to dynamically import the module
loadGreetingModule();
Explanation:
import() is used to dynamically load the greeting.js module.
The import returns a promise that resolves to the module object, which can then be used to access the exported functions.
8. Exporting Directly
You can export variables, functions, and classes directly during their declaration.
Example 8: Exporting Directly
mathOps.js (Module File)
export const PI = 3.14159;
export function calculateCircumference(radius) {
return 2 * PI * radius;
}
export class Circle {
constructor(radius) {
this.radius = radius;
}
area() {
return PI * this.radius * this.radius;
}
}
Explanation:
In mathOps.js, PI, calculateCircumference(), and Circle are exported directly during their declarations.
Conclusion
JavaScript modules are a powerful feature that enables code modularity, reusability, and maintainability. By using import and export, you can break down your code into smaller, manageable pieces and work more efficiently on large projects.
Key Takeaways:
Named Exports: Use export to export variables, functions, or classes from a module. Import them using import { … }.
Default Exports: Use export default to export a single value. Import it without curly braces.
Dynamic Imports: Use import() for conditional or asynchronous module loading.
Renaming Imports/Exports: Use the as keyword to rename imports or exports.
import * as: Import all named exports from a module as an object.
Experiment with different module structures to understand how to organize and reuse your JavaScript code effectively!