# ES6 Modules vs. CommonJS

JavaScript has two major module systems: **ES6 Modules (ESM)** and **CommonJS (CJS)**. Understanding the differences is crucial for modern JavaScript development, especially when working with Node.js and bundlers.

## 1. Syntax Comparison

### CommonJS (CJS)
Used primarily in Node.js. Uses `require()` and `module.exports`.

```javascript
// export
module.exports = {
  add: (a, b) => a + b
};

// import
const { add } = require('./math');
```

### ES6 Modules (ESM)
The official standard for JavaScript. Uses `import` and `export`.

```javascript
// export
export const add = (a, b) => a + b;

// import
import { add } from './math.js';
```

## 2. Key Differences

| Feature | CommonJS (CJS) | ES6 Modules (ESM) |
| :--- | :--- | :--- |
| **Loading** | Synchronous | Asynchronous |
| **Resolution** | Dynamic (Runtime) | Static (Compile-time) |
| **Tree Shaking** | Difficult/Impossible | Supported (Unused code removal) |
| **Scope** | `this` refers to `exports` | `this` is `undefined` |
| **Top-level await** | Not supported | Supported |
| **Strict Mode** | Optional (default off) | Always enabled implicitly |

## 3. Dynamic vs. Static

**CommonJS** is dynamic. You can require modules conditionally.

```javascript
if (user.isAdmin) {
  const adminRoutes = require('./admin'); // Works in CJS
}
```

**ESM** is static. Imports must be at the top level. To load conditionally, you must use the dynamic `import()` function, which returns a Promise.

```javascript
if (user.isAdmin) {
  import('./admin.js').then(module => {
    // ...
  });
}
```

[[programming/javascript/vanilla/javascript]]
[[programming/javascript/vanilla/modules]]