JavaScript Modules (original) (raw)
Last Updated : 19 Feb, 2025
In JavaScript, modules are a fundamental feature for organizing, structuring, and reusing code. A module is simply a chunk of code that can be reused in different parts of a program or even in different programs. JavaScript’s modularity is key to managing complexity, especially for large applications.
What are modules in JavaScript?
A JavaScript module is a small piece of code that can be used in different parts of your program. It helps break down big projects into smaller, more manageable sections, each focused on a specific task. This makes your code easier to understand, maintain, and fix when needed. By using modules, you can keep your code organized and reuse parts of it across different projects.
**Modules can contain
- Variables
- Functions
- Classes
- Objects
Types of Modules
JavaScript provides two primary module systems
1. CommonJS Modules
In JavaScript, CommonJS is a module system primarily used in NodeJS environments. It enables developers to break down their code into reusable modules by using module.exports to export functions, objects, or variables from a module. Other modules can then access these exports using the require() function.
**Syntax
//import const module1 = require('./module1');
//export module.exports = { module1, module2, ....};
Working of CommonJS
- The require() function is used to import modules into a file.
- To share functions, variables, or objects, CommonJS uses module.exports.
- Modules are loaded synchronously, meaning execution waits until the module is fully loaded before continuing.
- CommonJS is the default module system for NodeJS but is not natively supported in browsers.
- Each CommonJS module runs in its own scope, preventing variable conflicts and making code modular and reusable.
Use cases of CommonJS module
**1. Creating a Utility Module
A Utility Module is a collection of reusable helper functions that make coding easier by handling common tasks like formatting, validation, and logging.
JavaScript ``
//one.js
function greet(name) {
return Hello, ${name}!;
}
module.exports = greet;
`` JavaScript `
// two.js const greet = require('./one.js'); console.log(greet('Sandeep'));
`
**Output
Creating a Utility Module
- In one.js, a function greet(name) is created that returns a greeting message.
- The function greet is made available for use in other files by using module.exports = greet.
**2. Building a Configuration File
A Configuration File stores settings and environment-specific variables to manage an application's behavior. It helps keep code clean and flexible by separating configuration details from the main logic.
JavaScript `
//one.js module.exports = { port: 3000, dbURL: 'mongodb://localhost:27017/mydb' };
JavaScript
//two.js const config = require('./one.js'); console.log(config.port);
`
**Output
Building a Configuration File
- In one.js, an object with configuration settings (port and dbURL) is defined and exported using module.exports.
- In two.js, the configuration is imported using require('./one.js'), and config.port is accessed and printed to the console.
**3. Handling Routes in an ExpressJS App
In an ExpressJS app, routes define how the application responds to client requests. They help organize API endpoints and handle different HTTP methods like GET, POST, PUT, and DELETE.
JavaScript `
// one.js const express = require('express'); const router = express.Router(); router.get('/', (req, res) => res.send('Home Page')); module.exports = router;
JavaScript
// two.js const express = require('express'); const app = express(); const routes = require('./one'); app.use('/', routes); app.listen(3000, () => console.log('Server running on port 3000'));
`
**Output
Handling Routes in an Express.js App
- In one.js, an Express router is created, and a route for the root URL (/) is defined that sends "Home Page" as a response when accessed.
- In two.js, the router from one.js is imported and applied to the main app using app.use(). The server listens on port 3000, and the message "Server running on port 3000" is logged to the console when it starts.
2. ES6 module
ES6 Modules (ECMAScript Modules) provide a standardized way to structure and organize JavaScript code into separate, reusable modules. Unlike CommonJS, ES6 Modules use the import and export keywords for handling exports and imports.
In JavaScript, setting "type": "module" in your package.json tells NodeJS to treat .js files as ES6 modules, enabling import and export syntax. With ES6 modules, NodeJS expects static import and export statements, which are optimized at compile time, leading to smaller bundles. This setup improves compatibility with modern JavaScript tools.
Working of ES6 modules
- ES6 modules allow you to use import to bring in code from other files and export to make code available to other files.
- Files with "type": "module" in package.json are treated as ES6 modules, enabling the use of import and export syntax.
- Imports are static, meaning they are determined at compile time, allowing for optimization and better performance.
- Unlike CommonJS, ES6 modules use import and export instead of require and module.exports.
- This system helps keep code organized and reusable, making it easier to maintain large projects.
Here is the syntax for creating and using JavaScript modules. The example illustrates how to export and import functionality between files.
JavaScript `
//maths.js export function add(a,b){ return a+b } export const PI=3.1414
` JavaScript ``
//usess.js
import {add,PI} from './maths.js'
console.log(add(2,3))
console.log(The value of the PI is ${PI})
``
**Output
- Set "type": "module" in package.json to use modular syntax.
- Export the add function and PI constant using export.
- In main.js, import the add function and PI constant using import with destructuring.
- Use the imported entities directly in main.js to demonstrate their functionality.
Use cases of ES6 modules
**1. Default Export and Import
This code showcases how to use JavaScript modules to define and import a function across different files. The greet function is defined in one file and used in another to demonstrate modularity.
JavaScript ``
//greet.js
export default function greet(name) {
return Hello, ${name}!;
}
`` JavaScript `
// file: main.js import greet from './greet.js'; console.log(greet('GFG'));
`
**Output
Default Export and Import
- The greet function in greet.js returns a greeting message based on a name and is exported using export default.
- In main.js, the greet function is imported using import greet from './greet.js'.
- The greet function is called with 'GFG' in main.js, generating "Hello, GFG!".
- This modular approach makes the code reusable, organized, and easier to maintain.
**2. Named Exports with Aliases
This code demonstrates how to export multiple functions from a module and import them with new names for use in another file. It shows how to perform basic arithmetic operations using modular JavaScript.
JavaScript `
//Operations.js export function multiply(a, b) { return a * b; } export function divide(a, b) { return a / b; }
JavaScript
import { multiply as mul, divide as div } from './Operations.js'; console.log(mul(6, 3)); console.log(div(10, 2));
`
**Output
Named Exports with Aliases
- The multiply and divide functions in Operations.js handle multiplication and division and are exported for reuse.
- In main.js, they are imported with custom names (mul and div) using the as keyword.
- The mul(6, 3) and div(10, 2) functions are called and logged to the console.
- Separating operations into Operations.js makes the code modular, reusable, and easier to maintain.
**3. Dynamic Imports
This code demonstrates the use of dynamic import() in JavaScript to load a module asynchronously at runtime. It shows how to use the import() function to load a module and access its exports.
JavaScript `
//codes2.js (async () => { const module = await import('./codes1.js'); console.log(module.greet('GFG')); })();
` JavaScript ``
//codes1.js
export const greet = (name) => Hi, ${name}!;
``
Dynamic Imports
- The greet function in codes1.js is exported for use in other files.
- In codes2.js, an asynchronous function uses import('./codes1.js') to dynamically load codes1.js.
- After loading, the greet function is called with 'GFG' and the result is logged.
- The use of import() and await ensures the module loads only when needed, improving performance.
**4. Combining Default and Named Exports
This code demonstrates how to export a default class and named functions from a module and import them in another file. It shows how to create an instance of a class and use both default and named.
JavaScript ``
//person.js
export default class Person {
constructor(name) {
this.name = name;
}
sayHello() {
return Hello, I am ${this.name};
}
}
export const greet = (name) => Hi, ${name}!;
`` JavaScript `
import Person, { greet } from './person.js'; const aman = new Person('Aman'); console.log(aman.sayHello()); console.log(greet('Rohan'));
`
Combining Default and Named Exports
- The Person class in person.js has a sayHello method and is exported as the default.
- The greet function is also defined in person.js and exported as a named export.
- In the main script, both Person and greet are imported from person.js.
- A Person instance is created with the name 'Aman', and greet is called with 'Rohan', logging the results to the console.
Key Features of JavaScript Modules
- **Static Structure: Module imports and exports are statically analyzed at compile time.
- **Scope Isolation: Variables and functions in a module are scoped to that module.
- **Named and Default Exports: Support for exporting multiple or a single default member.
- **Support for Both ES6 and CommonJS: Compatibility with different module systems.
- **Dynamic Import: Ability to load modules dynamically at runtime.
Why to use modules in JavaScript
Using modules provides several benefits, including
- **Separation of Concerns: Modules allow you to separate your code into different files based on functionality, making it easier to manage and maintain.
- **Reusability: Once you create a module, it can be reused in different parts of your application or even across different projects.
- **Namespace Management: Modules provide a way to avoid polluting the global namespace by encapsulating code within a module’s scope.
- **Improved Debugging: With modules, debugging becomes easier since you can work with isolated code blocks.
- **Optimized Code: Modern bundlers like Webpack and Rollup can bundle your modules into a single file, improving page load times and reducing redundancy.
- **Modules in the Browser: In the past, modules were not supported in browsers. However, with the introduction of ES6 modules, browsers now support modules natively.