Language: EN
LuisLlamas Logo
Search
⏲️ ~ 3 minutes Intermediate
que-son-los-modulos-en-javascript

What are modules in JavaScript

The 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 that contains 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 a separate block of code. This means that its code will not collide with other files (for example, repeated names).

Advantages of using modules:

  • Code reuse: You can use the same module in multiple projects.
  • Maintenance: They facilitate the organization and updating of code.
  • Avoid conflicts: They protect the 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, which facilitates a uniform syntax for importing and exporting functionalities.

However, before the introduction of ES6 modules, the JavaScript ecosystem experimented with several solutions for modularity.

Let’s review the main module systems that exist (or existed).

ES Modules

ES modules (ECMAScript Modules) are the modern standard of JavaScript for managing modules. They were officially introduced in ES6 (2015) and are used in both browsers and environments like Node.js.

  • Natively supported by modern browsers.
  • Uses the keywords import and export.
  • 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 primary way to manage modules in Node.js before the adoption of ESM.

Unlike ESM, CommonJS modules use the keywords require and module.exports.

  • Mainly 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 are a module format primarily designed 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.

On this page