JavaScript Module Systems

1. CommonJS

CommonJS is a module system primarily used in Node.js. It allows you to define modules using the `require()` function and export functionality using `module.exports`.

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

module.exports = {
    add,
};

// main.js - using the CommonJS module
const math = require('./math');
console.log(math.add(2, 3)); // Output: 5

2. AMD (Asynchronous Module Definition)

AMD is designed for browsers and allows asynchronous loading of modules. It uses the `define()` function to declare modules and their dependencies.

// math.js - an AMD module
define([], function() {
    function add(a, b) {
        return a + b;
    }
    return {
        add,
    };
});

// main.js - using the AMD module
require(['math'], function(math) {
    console.log(math.add(2, 3)); // Output: 5
});

3. ES Modules (ESM)

ES Modules is the standard module system in JavaScript. It uses the `import` and `export` statements and supports static analysis and tree shaking.

// math.js - an ES Module
export function add(a, b) {
    return a + b;
}

// main.js - using the ES Module
import { add } from './math.js';
console.log(add(2, 3)); // Output: 5

4. Differences Between Module Systems

• Loading Mechanism: CommonJS is synchronous, while AMD and ES Modules support asynchronous loading.
• Scope: CommonJS modules are executed in their own scope, whereas ES Modules use lexical scoping.
• Usage: CommonJS is primarily used in Node.js, AMD in browser environments, and ES Modules are widely supported in modern JavaScript environments.

5. Conclusion

Understanding JavaScript module systems is crucial for organizing code effectively and managing dependencies. While CommonJS, AMD, and ES Modules serve similar purposes, they cater to different environments and use cases.