Modules are a feature of JavaScript that allow organizing and reusing code in independent and reusable units.
For practical purposes, a module is a file containing JavaScript code. This code can include variables, functions, classes (or anything else that can be defined in JavaScript).
Each of these files (which we call modules) can export certain functionalities, which can be obtained from other files so they can use them.
In addition to promoting organization, each module is an independent block of code. This means that its code will not have collisions with other files (for example, repeated names).
Advantages of using modules:
- Code Reusability: You can use the same module in multiple projects.
- Maintenance: They facilitate code organization and updating.
- Avoid Conflicts: They protect code by encapsulating it in its own context.
Types of Modules in JavaScript
With the arrival of ECMAScript 2015, a standard module system for JavaScript was introduced, providing a uniform syntax for importing and exporting functionalities.
However, before the introduction of ES6 modules, the JavaScript ecosystem experimented with various solutions for modularity.
Let’s review the main module systems that exist (or existed).
ES Modules
ES Modules (ECMAScript Modules) are the modern JavaScript standard for managing modules. They were officially introduced in ES6 (2015) and are used both in browsers and in environments like Node.js.
- Natively supported by modern browsers.
- Uses the keywords
importandexport. - Each file is an independent module with its own scope.
Export
// file: math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;
Import
// file: app.js
import { add, subtract } from './math.js';
console.log(add(5, 3)); // 8
console.log(subtract(5, 3)); // 2
CommonJS Modules
CommonJS modules were the main way to manage modules in Node.js before the adoption of ESM.
Unlike ESM, CommonJS modules use the keywords require and module.exports.
- Primarily used in Node.js.
- Synchronous, which can be a limitation in browsers.
- Compatible with older versions of JavaScript.
Export
// file: math.js
const add = (a, b) => a + b;
const subtract = (a, b) => a - b;
module.exports = { add, subtract };
Import
// file: app.js
const { add, subtract } = require('./math');
console.log(add(5, 3)); // 8
console.log(subtract(5, 3)); // 2
AMD Modules
AMD (Asynchronous Module Definition) modules is a module format designed primarily for use in browsers.
It was popularized by libraries like RequireJS and emerged as a solution for loading modules asynchronously.
- Asynchronous loading of dependencies.
- Designed to work directly in browsers.
- Widely used before the introduction of ES Modules.
- Compatible with dynamically loaded scripts.
Export
// file: math.js
define(['dependency1', 'dependency2'], function (dependency1, dependency2) {
return {
add: function (a, b) {
return a + b;
},
subtract: function (a, b) {
return a - b;
},
};
});
Import
// file: app.js
require(['math'], function (math) {
console.log(math.add(5, 3)); // 8
});
UMD Modules
UMD (Universal Module Definition) modules are a hybrid format designed to be compatible with different environments, such as browsers and Node.js.
- Compatible with both CommonJS and AMD (Asynchronous Module Definition).
- Used in libraries that need to work in multiple environments.
(function (global, factory) {
if (typeof module === "object" && typeof module.exports === "object") {
// CommonJS
module.exports = factory();
} else {
// Browser
global.myModule = factory();
}
})(this, function () {
return {
greet: function () {
return "Hello!";
},
};
});
Prefer ES Modules over others: Whenever possible, use ESM, as it is the modern standard.
