Organizing JavaScript Code with ES6 Modules

---
description: Enforce best practices for structuring JavaScript applications using ES6 modules to enhance code organization and reusability.
globs: ['**/*.js', '**/*.jsx']
tags: [JavaScript, ES6, Modules, Code Organization]
priority: 3
version: 1.0.0
---

# Organizing JavaScript Code with ES6 Modules

## Context
- Applicable to all JavaScript projects utilizing ES6 modules.
- Aims to improve code maintainability, readability, and reusability.

## Requirements
- **Use ES6 `import` and `export` statements**: Replace CommonJS or other module systems with ES6 syntax.
- **Prefer named exports over default exports**: Enhances consistency and facilitates easier refactoring.
- **Avoid wildcard imports**: Import only the necessary components to maintain clarity and prevent unnecessary dependencies.
- **Do not export directly from an import**: Ensure clear separation between importing and exporting to maintain code readability.
- **Keep modules small and focused**: Each module should encapsulate a single responsibility to promote reusability and maintainability.
- **Avoid polluting the global scope**: Encapsulate module code to prevent unintended interactions and naming collisions.

## Examples

<example>

// Good: Using ES6 import/export with named exports

// mathUtils.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

// app.js
import { add, subtract } from './mathUtils';

const sum = add(2, 3);
const difference = subtract(5, 2);
</example>

<example type="invalid">

// Bad: Using CommonJS require and module.exports

// mathUtils.js
const add = (a, b) => a + b;
const subtract = (a, b) => a - b;

module.exports = { add, subtract };

// app.js
const mathUtils = require('./mathUtils');

const sum = mathUtils.add(2, 3);
const difference = mathUtils.subtract(5, 2);
</example>

<example>

// Good: Avoiding wildcard imports

// constants.js
export const PI = 3.14159;
export const E = 2.71828;

// app.js
import { PI } from './constants';

const circumference = 2 * PI * radius;
</example>

<example type="invalid">

// Bad: Using wildcard imports

// app.js
import * as constants from './constants';

const circumference = 2 * constants.PI * radius;
</example>

<example>

// Good: Keeping modules small and focused

// logger.js
export const logInfo = (message) => console.info(message);
export const logError = (message) => console.error(message);

// app.js
import { logInfo, logError } from './logger';

logInfo('Application started');
logError('An error occurred');
</example>

<example type="invalid">

// Bad: Large module with multiple responsibilities

// utils.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;
export const logInfo = (message) => console.info(message);
export const logError = (message) => console.error(message);

// app.js
import { add, subtract, logInfo, logError } from './utils';

const sum = add(2, 3);
logInfo('Sum calculated');
</example>