Bits of .NET

📦 ES6 Modules = Organized Code

Global namespace is messy. ES6 modules organize code. Import/export, encapsulation, dependency management.

📝 Module Examples

// math.js (exports)
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;
export const multiply = (a, b) => a * b;

export default function calculate(a, b, op) {
    switch(op) {
        case '+': return add(a, b);
        case '-': return subtract(a, b);
        case '*': return multiply(a, b);
        default: return 0;
    }
}

// utils.js (exports)
export function formatDate(date) {
    return date.toLocaleDateString();
}

export const PI = 3.14159;

// app.js (imports)
import calculate, { add, subtract, multiply } from './math.js';
import { formatDate, PI } from './utils.js';

// Use imported functions
console.log(add(5, 3)); // 8
console.log(calculate(5, 3, '*')); // 15
console.log(formatDate(new Date()));
console.log(PI);

// Rename imports
import { formatDate as dateFormatter } from './utils.js';

// Import all
import * as utils from './utils.js';
utils.formatDate(new Date());

// Dynamic import
const module = await import('./math.js');
console.log(module.add(5, 3));

🎯 Module Patterns

// Named exports vs Default
// user.js
export const User = class { /* ... */ };
export function createUser(name) { /* ... */ }
export default { createUser, User };

// Import with alias
import UserModule from './user.js';
const { createUser, User } = UserModule;

// Re-export
// index.js
export * from './math.js';
export { add as sum } from './math.js';

// Circular dependencies (avoid)
// a.js
import { b } from './b.js';
export const a = 'A';

// b.js
import { a } from './a.js';
export const b = 'B'; // Avoid this

// Module bundling
// webpack/rollup for production
// Tree shaking removes unused exports

💡 Benefits

• Encapsulation (private scope)
• Dependency management
• Tree shaking (remove unused)
• Cleaner code organization
• Easier testing