JavaScript Module Systems : CommonJS vs ES Modules

JavaScript Module Systems

JavaScript modules are essential for organizing and reusing code effectively in modern web development. They allow us to encapsulate code into separate files, improving maintainability and reducing global scope pollution. In this guide, we'll explore two popular module systems: CommonJS and ES Modules (ESM).

Before Using Modules

Originally, JavaScript files were included in HTML using <script> tags, which could lead to issues like order dependency and global variable conflicts.

• Example:

<script src="./src/main.js"></script>
<script src="./src/animation.js"></script>
<script src="./src/banner.js"></script>

This approach loads each file sequentially and exposes all variables globally, potentially causing naming conflicts.

Using Modules

Modern JavaScript supports a module system that allows us to import and export functionalities between files seamlessly.

• Example:

<script type="module" src="./src/main.js"></script>

With modules, only one <script> tag is needed to access all modularized JavaScript files.

CommonJS Modules

CommonJS was originally designed for server-side JavaScript (Node.js) and addresses the lack of built-in module support in early JavaScript versions.

Key Features:

• module.exports and exports: Used to export variables, functions, or objects from a module.

• require(): Used to import modules.

• Example:
  

// main.js
const name = "Joy";
const age = 28;

module.exports = { name, age };

// result.js
const { name, age } = require("./main.js");

In CommonJS, module.exports is used to export values, which are then imported using require() in another file.

ES Modules (ESM)

ES Modules (ESM) are now the standard for JavaScript modules, providing benefits like asynchronous loading, better performance, and more intuitive syntax.

Key Features:

• import and export: Used to export and import modules.
• default exports: Allows exporting a single value as the default export.
• Example:

// main.js
export const name = "Joy";
export const age = 28;

export default function fullName(lastName) {
  return name + " " + lastName;
}

// result.js
import fullName, { name, age } from "./main.js";

In ES Modules, export is used to export variables, functions, or classes, while import is used to bring them into another module. The default keyword allows a fallback export.

Conclusion

JavaScript modules are important for structuring code in large applications, enhancing code organization, and reducing namespace pollution. Whether using CommonJS or ES Modules, understanding modules is essential for modern JavaScript developers.

By adopting modules, developers can create more modular and maintainable codebases, improving collaboration and scalability in web development projects.

Start modularizing your JavaScript code today to experience these benefits firsthand!