Introduction
In modern web development, JavaScript modules play a crucial role in organizing and structuring code. They provide a way to encapsulate functionality, promote code reuse, and improve maintainability. In this article, we’ll explore the fundamentals of JavaScript modules, including their introduction, export, and import statements.
Introduction to Modules
JavaScript modules are reusable pieces of code that encapsulate related functionality. They allow developers to break down large applications into smaller, more manageable chunks, making it easier to maintain and scale projects. Modules can contain variables, functions, classes, or any other JavaScript code.
There are two main types of JavaScript modules:
ES6 Modules
Introduced in ECMAScript 2015 (ES6), ES6 modules are the standardized module format for JavaScript. They provide a clean syntax for defining modules and exporting/importing functionality.
CommonJS Modules
CommonJS modules were originally designed for server-side JavaScript with Node.js. They follow a require() and module.exports syntax for importing and exporting.
Export and Import Statements
Exporting from a Module
In ES6 modules, you can export functionality using the export keyword. There are several ways to export:
Named Exports: You can export named variables, functions, or classes individually.
// module.js
export const PI = 3.14;
export function square(x) {
return x * x;
}
export class Circle {
constructor(radius) {
this.radius = radius;
}
area() {
return Math.PI * this.radius * this.radius;
}
}
Default Export: You can also export a single default value from a module.
// module.js
const PI = 3.14;
export default PI;
Importing into a Module
In ES6 modules, you can import functionality using the import keyword. There are several ways to import:
Named Imports: You can import specific functionality by name.
// app.js
import { PI, square, Circle } from './module.js';
console.log(PI); // 3.14
console.log(square(2)); // 4
const circle = new Circle(5);
console.log(circle.area()); // 78.5
Default Import: You can import the default export using any name.
// app.js
import MyDefault from './module.js';
console.log(MyDefault); // 3.14
Namespace Import: You can import all exports from a module as a single object.
// app.js
import * as myModule from './module.js';
console.log(myModule.PI); // 3.14
console.log(myModule.square(2)); // 4
const circle = new myModule.Circle(5);
console.log(circle.area()); // 78.5
CommonJS Modules
In CommonJS modules, you use require() to import functionality and module.exports to export functionality.
// module.js
const PI = 3.14;
function square(x) {
return x * x;
}
class Circle {
constructor(radius) {
this.radius = radius;
}
area() {
return Math.PI * this.radius * this.radius;
}
}
module.exports = {
PI,
square,
Circle
};
// app.js
const { PI, square, Circle } = require('./module.js');
console.log(PI); // 3.14
console.log(square(2)); // 4
const circle = new Circle(5);
console.log(circle.area()); // 78.5
Conclusion
JavaScript modules are a powerful tool for organizing and structuring code in modern web development. Whether you’re using ES6 modules or CommonJS modules, understanding how to export and import functionality is essential for building maintainable and scalable applications. By mastering modules, you can write cleaner, more modular code that is easier to maintain and extend.