Understanding CJS, AMD, UMD, and ESM in JavaScript

When working with JavaScript projects, you may come across acronyms like CJS, AMD, UMD, and ESM.

These are module formats — different ways of writing and loading JavaScript code so that pieces of code (modules) can be reused across files or projects.

Let’s break them down step by step.

What Are JavaScript Modules?

A module is simply a file that contains reusable code. Instead of putting everything in one file, you split your project into smaller files and “import” them where needed.

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

// app.js
import add from './math.js';
console.log(add(2, 3)); // 5

Different module systems define how we export and import code.

1. CommonJS (CJS)

• Origin: Node.js
• Usage: Server-side (Node.js projects before ES modules)
• Loading: Synchronous (runs top-to-bottom, blocks until loaded)

Example (CJS):

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

// app.js
const add = require('./math');
console.log(add(2, 3)); // 5

Pros:

• Simple syntax (require, module.exports)
• Widely used in Node.js

Cons:

• Not suitable for browsers (synchronous loading is slow in front-end)

2. Asynchronous Module Definition (AMD)

• Origin: Browser (RequireJS library popularized it)
• Usage: Client-side apps (before ES modules)
• Loading: Asynchronous (loads in background, doesn’t block browser)

Example (AMD with RequireJS):

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

// app.js
require(['./math'], function(math) {
  console.log(math.add(2, 3)); // 5
});

Pros:

• Works well in browsers
• Asynchronous loading (good for performance)

Cons:

• Verbose, harder to read
• Mostly replaced by ES modules

3. Universal Module Definition (UMD)

• Origin: Combo of CJS + AMD
• Usage: Works in both Node.js and browsers
• Loading: Detects environment and adapts

Example (UMD):

(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD
    define([], factory);
  } else if (typeof module === 'object' && module.exports) {
    // CommonJS
    module.exports = factory();
  } else {
    // Global variable
    root.myUtils = factory();
  }
}(this, function () {
  function add(a, b) {
    return a + b;
  }
  return { add };
}));

// In browser: myUtils.add(2, 3)
// In Node: const { add } = require('./math')

Pros:

• Flexible (works everywhere)
• Useful for library authors

Cons:

• Boilerplate code is messy
• Mostly used for backward compatibility

4. ECMAScript Modules (ESM)

• Origin: Official JavaScript standard (ES6/ES2015)
• Usage: Modern browsers and Node.js (with "type": "module")
• Loading: Asynchronous in browsers; optimized by bundlers

Example (ESM):

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

// app.js
import { add } from './math.js';
console.log(add(2, 3)); // 5

Pros:

• Native support in modern browsers and Node.js
• Cleaner, more readable syntax
• Supports static analysis and tree-shaking (removes unused code)

Cons:

• Needs "type": "module" in Node.js or .mjs extension
• Older environments need transpilers (Babel, Webpack)

Side-by-Side Comparison

Feature     | CommonJS (CJS) | AMD            | UMD             | ESM (Modern)       
----------- | -------------- | -------------- | --------------- | -------------------
Environment | Node.js        | Browser        | Both            | Both               
Loading     | Synchronous    | Asynchronous   | Flexible        | Asynchronous       
Syntax      | `require`      | `define`       | `factory()`     | `import`/`export`  
Usage Today | Legacy Node.js | Legacy Browser | Older libraries | Standard everywhere

Which One Should You Use?

• Node.js modern apps → ESM (import/export)
• Browser apps → ESM (native support)
• Legacy Node.js → CJS (require)
• Older libraries → UMD (to support all environments)

Recommendation: Always use ESM for new projects. It’s the official standard and works best with modern tools.

Final Words

JavaScript evolved through multiple module systems because of different needs (Node vs Browser).

• CJS made Node.js development possible.
• AMD solved browser performance issues.
• UMD made libraries portable.
• ESM finally unified everything under one standard.

Now, when you see these acronyms in code or npm packages, you’ll know exactly what they mean!