JavaScript Design Patterns: A Comprehensive Guide

The Singleton Pattern

The Singleton pattern ensures that a class has only one instance and provides a global point of access to that instance. In JavaScript, this pattern is both common and sometimes controversial, as overuse of global state can lead to hard-to-debug problems.

When to use:

• Shared configuration objects
• Database connection pools
• Services that coordinate across your application

Example implementation:

class Singleton {
 constructor() {
 if (Singleton.instance) {
 return Singleton.instance;
 }
 this.data = [];
 Singleton.instance = this;
 }

 addItem(item) {
 this.data.push(item);
 }

 getItems() {
 return this.data;
 }
}

In modern JavaScript, ES6 modules provide a simpler way to achieve Singleton-like behavior through module-level state. The module system ensures that state is shared across all imports without requiring explicit Singleton code.

The Factory Pattern

The Factory pattern provides an interface for creating objects while letting the implementation decide which class to instantiate. It delegates instantiation to specific factory functions or classes, keeping object creation logic separate from the code that uses the objects.

When to use:

• Object creation involves complex logic
• Creating different objects based on runtime conditions
• Hiding implementation details from consuming code

Benefits:

• Follows Open/Closed Principle
• Makes code more testable
• Centralizes object creation logic

Factory patterns shine when you want to add new object types without changing existing code, making them invaluable for scalable application architecture.

The Module Pattern

The Module pattern encapsulates code into self-contained units that expose a public API while hiding internal implementation details. This is arguably the most important pattern in JavaScript, as modules are fundamental to organizing code.

Modern ES6 Modules:

// cart.js
export function addItem(item) {
 // Implementation
}

export function getCart() {
 return [...cart];
}

Classic IIFE Pattern:

const cartModule = (() => {
 let cart = [];
 
 function addItem(item) {
 cart.push(item);
 }
 
 return { addItem };
})();

Modules are fundamental to organizing JavaScript code and preventing namespace pollution. Before ES6 modules, the Immediately Invoked Function Expression (IIFE) pattern provided similar encapsulation.

The Observer Pattern

The Observer pattern defines a one-to-many dependency between objects. When one object changes state, all its dependents are notified automatically. This pattern is the foundation of modern reactive programming and is heavily used in frameworks like React and Vue.

This pattern is foundational for:

• React and Vue reactivity systems
• Event handling in applications
• Real-time data updates

Common use cases:

• User authentication state
• Data synchronization
• UI state management

Understanding the Observer pattern is crucial for effective React application development, as it underpins how components manage and respond to state changes.

The Strategy Pattern

The Strategy pattern defines a family of algorithms, encapsulates each one, and makes them interchangeable at runtime. The strategy pattern lets the algorithm vary independently from clients that use it.

When to use:

• Switching between different algorithms
• Payment processing with multiple providers
• Different validation or sorting strategies

The strategy pattern is ideal for scenarios where you need to switch between different algorithms or behaviors at runtime, such as payment processing, validation, or compression. This pattern is essential for building flexible payment integrations.

The Decorator Pattern

The Decorator pattern attaches additional responsibilities to objects dynamically. Decorators provide a flexible alternative to subclassing for extending functionality. Function decorators are common in JavaScript for adding logging, validation, or caching to functions.

function withLogging(fn) {
 return (...args) => {
 console.log(`Calling ${fn.name} with:`, args);
 const result = fn(...args);
 console.log(`${fn.name} returned:`, result);
 return result;
 };
}

const add = (a, b) => a + b;
const loggedAdd = withLogging(add);
loggedAdd(5, 10);

The decorator pattern is widely used in modern JavaScript frameworks and is the basis for many React component patterns.

The Proxy Pattern

The Proxy pattern provides a surrogate or placeholder object that controls access to another object. Proxies can intercept and override operations like property access, assignment, and deletion. They are useful for validation, lazy loading, and implementing reactive systems.

const user = { name: 'John', age: 22 };

const userProxy = new Proxy(user, {
 set(target, key, value) {
 if (key === 'age' && (value < 0 || value > 150)) {
 throw new Error('Invalid age');
 }
 target[key] = value;
 return true;
 },
 get(target, key) {
 if (key === 'fullInfo') {
 return `${target.name} (${target.age})`;
 }
 return target[key];
 }
});

Proxies are the foundation of Vue 3's reactivity system and can be used for implementing advanced state management patterns.

The Command Pattern

The Command pattern encapsulates a request as an object, thereby letting you parameterize clients with different requests, queue or log requests, and support undoable operations. This pattern separates the invoker (what triggers the action) from the receiver (what performs the action).

Use cases:

• Undo/redo systems
• Command history
• Macro recording

The command pattern is particularly valuable for building collaborative applications where tracking user actions is important.