What are modules in JavaScript and how do you use them?

Question

Ravi Vishwakarma · Answer

Modules in JavaScript are used to encapsulate code into
reusable, disconnected pieces, making the code more
maintainable, testable, and manageable. Modules allow you to
export functions, objects, or values from one module 
so they can be imported and used in other modules.and 
This concept is essential for organizing large codebases and is supported by both the
ES6 (ECMAScript 2015) module syntax and earlier module systems like
CommonJS.
and 
ES6 Modules
The ES6 module system, also known as ECMAScript modules (ESM), is the standard way to work with modules in modern JavaScript. It uses the
import and export keywords.
Example: Creating and Using ES6 Modules
math.js (Module file)
// Exporting individual features
export const pi = 3.14159; // Exporting a constant named 'pi' with value 3.14159
export function add(x, y) {
 return x + y; // Exporting a function named 'add' that returns the sum of two parameters
}
// Exporting a default feature
export default function multiply(x, y) {
 return x * y; // Exporting a default function named 'multiply' that returns the product of two parameters
}
main.js (Importing and using the module)
// Importing named exports
import { pi, add } from './math.js';
// Importing the default export
import multiply from './math.js';
console.log(`Pi is ${pi}`); // Pi is 3.14159
console.log(`2 + 3 = ${add(2, 3)}`); // 2 + 3 = 5
console.log(`2 * 3 = ${multiply(2, 3)}`); // 2 * 3 = 6
Key Features of ES6 Modules
Strict Mode: Modules are always executed in strict mode.Single Instance: Each module is evaluated only once and the result is cached.Top-Level this: The value of 
this at the top level of a module is undefined.Static Structure: Imports and exports are statically analyzable, meaning you can determine the structure of a module at compile time.
and 
CommonJS Modules
CommonJS is a module system used primarily in Node.js. It uses require to import modules and
module.exports to export them.
Example: Creating and Using CommonJS Modules
math.js (Module file)
// Define a constant 'pi'
const pi = 3.14159;
// Define a function 'add' that takes two parameters and returns their sum
function add(x, y) {
 return x + y;
}
// Define a function 'multiply' that takes two parameters and returns their product
function multiply(x, y) {
 return x * y;
}
// Export the constants and functions as an object using module.exports
module.exports = {
 pi,
 add,
 multiply
};
main.js (Importing and using the module)
const math = require('./math.js');
console.log(`Pi is ${math.pi}`); // Pi is 3.14159
console.log(`2 + 3 = ${math.add(2, 3)}`); // 2 + 3 = 5
console.log(`2 * 3 = ${math.multiply(2, 3)}`); // 2 * 3 = 6
Key Features of CommonJS Modules
Synchronous Loading: Modules are loaded synchronously.Single Instance: Each module is evaluated only once and the result is cached.Dynamic Module Loading: Modules can be loaded dynamically at runtime.
and 
Differences Between ES6 and CommonJS Modules
Syntax: ES6 modules use import and export, while CommonJS uses
require and module.exports.Loading: ES6 modules are loaded asynchronously, while CommonJS modules are loaded synchronously.Environment: ES6 modules are the standard for modern JavaScript environments, whereas CommonJS is primarily used in Node.js.
and 
Note
Modules: Encapsulate code into reusable pieces.ES6 Modules: Use import and export, supported in modern JavaScript environments.CommonJS Modules: Use require and module.exports, primarily used in Node.js.Differences: Syntactic and behavioral differences, such as loading mechanisms and environment compatibility.Browser Usage: Use the type="module" attribute in
andlt;script> tags for ES6 modules.
and

forum

What are modules in JavaScript and how do you use them?

Sandra Emily

1 Answers

ES6 Modules

CommonJS Modules

Differences Between ES6 and CommonJS Modules

Note

Liked By