CommonJS (CJS) vs ECMAScript Modules (ESM) in JavaScript

JavaScript modules play a crucial role in organising code, enhancing reusability, and improving maintainability of applications. Two primary module systems widely used are CommonJS (CJS) and ECMAScript Modules (ESM). Understanding their differences and capabilities is key to effectively leveraging them in your projects.

CommonJS (CJS)

CommonJS is the module system originally designed for Node.js environments. It emphasises simplicity and synchronous loading of modules.

CommonJS Exporting/Importing Modules

Modules in CommonJS use module.exports to export values, objects, or functions.

1. Default Export/Imports

// logger.js
function log(message) {
    console.log(message);
}

module.exports = log; // Default export

// index.js
const log = require('./logger');

log('This is a log message.'); // Output: This is a log message.

2. Named Exports/Imports

// math.js
function add(a, b) {
    return a + b;
}

function subtract(a, b) {
    return a - b;
}

module.exports = { add, subtract }; // Named exports

// index.js
const { add, subtract } = require('./math');

console.log(add(5, 3)); // Output: 8
console.log(subtract(5, 3)); // Output: 2

ECMAScript Modules (ESM)

ESM, introduced in ES6 (ES2015), is the standardised module system for JavaScript. It supports both synchronous and asynchronous module loading and is natively supported in modern browsers and in Node.js with certain configurations.

ECMAScript Exporting Modules

ESM uses export statements to export values, objects, or functions.

1. Default Export/Import

// utils.mjs (Note the .mjs extension for ESM)
function formatName(name) {
    return `Mr./Ms. ${name}`;
}

export default formatName;

// index.mjs
import formatName from './utils.mjs';

console.log(formatName('John')); // Output: Mr./Ms. John

2. Named Exports

// operations.mjs
export function multiply(a, b) {
    return a * b;
}

export function divide(a, b) {
    return a / b;
}

// index.mjs
import { multiply, divide } from './operations.mjs';

console.log(multiply(4, 2)); // Output: 8
console.log(divide(10, 2)); // Output: 5

3. Mixed Export Styles in ECMAScript Modules

// mixedExports.mjs
function greet(name) {
    return `Hello, ${name}!`;
}

export default greet;

export function goodbye(name) {
    return `Goodbye, ${name}!`;
}

// index.mjs
import sayHello, { goodbye } from './mixedExports.mjs';

console.log(sayHello('Alice')); // Output: Hello, Alice!
console.log(goodbye('Bob')); // Output: Goodbye, Bob!

Key Differences between CommonJS and ESM

• Syntax: CommonJS uses require() and module.exports, whereas ESM uses import and export statements.
• Loading: CommonJS modules are loaded synchronously, while ESM supports both synchronous and asynchronous loading.
• Environment: CommonJS is primarily used in Node.js, while ESM is natively supported in browsers and can be used in Node.js with specific configurations (--experimental-modules flag or .mjs file extension).

Compatibility and Usage

• Node.js: CommonJS remains prevalent due to its long-standing support and simplicity in Node.js environments.
• Browsers: ESM is gaining popularity as browsers increasingly support it natively, offering better performance and modular code loading.

Conclusion

Choosing between CommonJS and ECMAScript Modules depends on your project's environment and requirements. While CommonJS is robust for Node.js backend development, ESM offers interoperability across browsers and modern Node.js applications. Understanding these module systems equips developers to harness JavaScript's modular capabilities effectively.

By leveraging CommonJS or ESM, developers can enhance code organisation, improve project scalability, and facilitate collaboration in JavaScript projects.