Modules
## Learning Objectives
- Understand ES6 module syntax
- Compare CommonJS and ES modules
- Master dynamic imports and re-exports
## Introduction to Modules
Modules allow you to organize code into separate files and import only what you need.
## ES6 Modules
### Exporting
```javascript
// named-export.js
// Export individual items
export const PI = 3.14159;
export const E = 2.71828;
// Export function
export function add(a, b) {
return a + b;
}
// Export class
export class Calculator {
multiply(a, b) {
return a * b;
}
}
// Export default
const helper = () => console.log("Helper");
export default helper;
```
### Importing
```javascript
// named-import.js
// Import named exports
import { PI, E, add } from "./named-export.js";
console.log(PI); // 3.14159
console.log(add(2, 3)); // 5
// Import with alias
import { add as sum } from "./named-export.js";
console.log(sum(2, 3)); // 5
// Import default export
import helper from "./named-export.js";
// Import everything as namespace
import * as math from "./named-export.js";
console.log(math.PI); // 3.14159
console.log(math.add(2, 3)); // 5
```
### Combined Syntax
```javascript
import { default as helper, PI, add } from "./module.js";
```
## Default Exports
```javascript
// default-export.js
export default function greet(name) {
return `Hello, ${name}!`;
}
// Or
function greet(name) {
return `Hello, ${name}!`;
}
export default greet;
```
```javascript
// Importing default
import greet from "./default-export.js";
console.log(greet("Alice")); // "Hello, Alice!"
```
## Re-exports
```javascript
// math-utils.js
export { add, subtract } from "./basic-math.js";
export { multiply, divide } from "./advanced-math.js";
export { PI } from "./constants.js";
```
```javascript
// Import everything from re-export
import { add, multiply, PI } from "./math-utils.js";
```
## Module in HTML
```html
```
## CommonJS (Node.js)
### CommonJS Exporting
```javascript
// module.js
exports.PI = 3.14159;
exports.add = (a, b) => a + b;
// Or
module.exports = {
PI: 3.14159,
add: (a, b) => a + b
};
```
### CommonJS Importing
```javascript
const { PI, add } = require("./module.js");
const math = require("./module.js");
```
## Dynamic Imports
```javascript
// Only load when needed
button.addEventListener("click", async () => {
const { heavyFunction } = await import("./heavy-module.js");
heavyFunction();
});
```
## Module Scope
```javascript
// module-a.js
const privateVar = "I'm private"; // Not exported
export const publicVar = "I'm public";
```
```javascript
// Variables in modules are scoped to the module
// They don't become global
```
## Best Practices
1. **Use named exports** for most things
2. **Use default exports** for the main export of a module
3. **Keep modules focused** - one module per feature
4. **Use barrel files** (index.js) for re-exports
5. **Use consistent naming** conventions
## Summary
- ES6 modules use `import` and `export` syntax
- Named exports: `export const x = 1; import { x } from "./mod";`
- Default exports: `export default fn; import fn from "./mod";`
- Dynamic imports load modules on demand with `import()`
- CommonJS (`require`/`exports`) is the Node.js legacy format
Comments
Comments powered by Giscus
To enable comments, add your Giscus embed code here.
Learn more about Giscus →