Services
Technology Web App Development Mobile App Development Windows App Development Database Development UI/UX Development Cloud Development SEO Digital Marketing Guest Posting Content Writing Artificial Intelligence Data Science ERP Development CRM Development CMS Development LMS Development Business Listing Blockchain Technology Startup Promotion AI Tools Integration
Products
Data Converter Cleaner TUC - Unit Converter Import Export Survey Manager Tweet Controller
Developer
Article Blog Forum Interview Beginner News Startup Quiz
Users
Career
Apply Job Internship
Pricing
Login Sign Up Get a Quote

forum

Home Forums What are modules in JavaScript and how do you use them? – MindStick
Ask Question

1 Answers

Ravi Vishwakarma
Ravi Vishwakarma 19 Jun 2024
Report Abuse

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. 

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.

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.

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.

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.

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 <script> tags for ES6 modules.
MindStick Training
Markdown for AI

A clean, structured version of this page for AI assistants and LLMs.

Open .md