Module Pattern

Question

Module Pattern

Accepted Answer

The Module pattern is a structural design pattern that uses closures to create private and public scopes. It's a cornerstone of JavaScript code organization that predates ES6 modules. By wrapping code in an Immediately Invoked Function Expression (IIFE) or using ES6 modules, you can create encapsulated units of functionality with private state and expose only what's necessary, preventing variable collisions and improving maintainability. // Using IIFE (Immediately Invoked Function Expression) const ShoppingCart = (function() { // Private variables and methods let items = []; let total = 0; function calculateTotal() { total = items.reduce((sum, item) => sum + item.price * item.quantity, 0); } // Public API return { addItem(id, name, price, quantity = 1) { items.push({ id, name, price, quantity }); calculateTotal(); return this; }, removeItem(id) { items = items.filter(item => item.id !== id); calculateTotal(); return this; }, getTotal() { return total; }, getItems() { return [...items]; }, // Return copy to prevent direct mutation clear() { items = []; total = 0; return this; } }; })(); // Usage ShoppingCart.addItem(1, 'Shirt', 25, 2).addItem(2, 'Pants', 40); console.log(ShoppingCart.getTotal()); // 90 console.log(ShoppingCart.items); // undefined (private) // Using ES6 module syntax // shoppingCart.js export const createCart = () => { let items = []; return { addItem: (item) => { items.push(item); }, getItems: () => [...items] }; }; // main.js import { createCart } from './shoppingCart.js'; const cart = createCart(); // Custom hook as a React Module pattern function useCounter(initialValue = 0) { // Private state (encapsulated within the hook) const [count, setCount] = useState(initialValue); // Private helper functions const validateIncrement = (value) => value + 1; const validateDecrement = (value) => value - 1; // Public API const increment = () => setCount(c => validateIncrement(c)); const decrement = () => setCount(c => validateDecrement(c)); const reset = () => setCount(initialValue); return { count, increment, decrement, reset }; } // Using the module pattern in React function CounterComponent() { const { count, increment, decrement, reset } = useCounter(10); return (

Count: {count}

); } // Context module pattern const ThemeModule = (function() { // Private let currentTheme = 'light'; const listeners = []; function notify() { listeners.forEach(listener => listener(currentTheme)); } // Public API return { getTheme: () => currentTheme, setTheme: (theme) => { currentTheme = theme; notify(); }, subscribe: (listener) => { listeners.push(listener); return () => { const index = listeners.indexOf(listener); if (index > -1) listeners.splice(index, 1); }; } }; })(); export const ThemeProvider = ({ children }) => { const [theme, setTheme] = useState(ThemeModule.getTheme()); useEffect(() => { return ThemeModule.subscribe(setTheme); }, []); return {children} ; }; // Service as a Module (Angular's built-in DI provides module pattern) @Injectable({ providedIn: 'root' }) export class AuthModule { // Private state private currentUser: User | null = null; private token: string | null = null; private readonly TOKEN_KEY = 'auth_token'; constructor() { // Initialize from storage (private initialization) this.token = localStorage.getItem(this.TOKEN_KEY); if (this.token) { this.loadUserFromToken(); } } // Private methods private loadUserFromToken() { /* ... */ } private saveToken(token: string) { this.token = token; localStorage.setItem(this.TOKEN_KEY, token); } // Public API login(credentials: Credentials): Observable { return this.http.post('/api/login', credentials).pipe( tap(response => { this.saveToken(response.token); this.currentUser = response.user; }) ); } logout(): void { this.currentUser = null; this.token = null; localStorage.removeItem(this.TOKEN_KEY); } isAuthenticated(): boolean { return !!this.token; } getUser(): User | null { return this.currentUser; } } // Component uses the module's public API @Component({...}) export class ProfileComponent { constructor(private auth: AuthModule) {} get user() { return this.auth.getUser(); } logout() { this.auth.logout(); } }

Module Pattern

The Module pattern encapsulates private variables and methods, exposing only a public API, enabling information hiding and reducing global namespace pollution.

Module Pattern

The Module pattern encapsulates private variables and methods, exposing only a public API, enabling information hiding and reducing global namespace pollution.

Scenario Questions

Follow-up Questions