JavaScript Design Patterns: Singleton, Factory, and Observer

Introduction

Design patterns are reusable solutions to common problems in software design. They provide a structured approach to writing maintainable, scalable, and efficient code. In JavaScript, several design patterns are widely used, including the Singleton, Factory, and Observer patterns. Each serves a distinct purpose and can significantly improve code organization and performance.

In this post, we’ll explore these three patterns, their use cases, and how to implement them in JavaScript with practical examples.

---

The Singleton Pattern

The Singleton pattern ensures that a class has only one instance while providing a global access point to that instance. This is useful when you need to manage shared resources, such as a database connection or a configuration manager.

Implementation

Here’s how you can implement a Singleton in JavaScript:

class DatabaseConnection {  
  constructor() {  
    if (DatabaseConnection.instance) {  
      return DatabaseConnection.instance;  
    }  
    this.connection = "Connected to the database";  
    DatabaseConnection.instance = this;  
  }  

  query(sql) {  
    console.log(`Executing query: ${sql}`);  
  }  
}  

const db1 = new DatabaseConnection();  
const db2 = new DatabaseConnection();  

console.log(db1 === db2); // true

Use Cases

• Managing a single shared resource (e.g., database, logger).
• Configuring global settings in an application.
• Preventing multiple instances of a class from being created.

---

The Factory Pattern

The Factory pattern provides an interface for creating objects without specifying their exact class. Instead of calling a constructor directly, you delegate object creation to a factory function. This is particularly useful when the creation logic is complex or needs to be centralized.

Implementation

Here’s an example of a simple factory that creates different types of User objects:

class Admin {  
  constructor(name) {  
    this.name = name;  
    this.role = "Admin";  
  }  
}  

class Guest {  
  constructor(name) {  
    this.name = name;  
    this.role = "Guest";  
  }  
}  

function UserFactory(type, name) {  
  switch (type) {  
    case "admin":  
      return new Admin(name);  
    case "guest":  
      return new Guest(name);  
    default:  
      throw new Error("Invalid user type");  
  }  
}  

const admin = UserFactory("admin", "Alice");  
const guest = UserFactory("guest", "Bob");  

console.log(admin.role); // "Admin"  
console.log(guest.role); // "Guest"

Use Cases

• Decoupling object creation from usage.
• Supporting multiple object types with similar interfaces.
• Simplifying complex instantiation logic.

---

The Observer Pattern

The Observer pattern defines a one-to-many dependency between objects, where one object (the subject) notifies its dependents (observers) of state changes. This is widely used in event-driven architectures, such as UI frameworks and real-time data updates.

Implementation

Here’s how you can implement a basic Observer pattern in JavaScript:

class Subject {  
  constructor() {  
    this.observers = [];  
  }  

  subscribe(observer) {  
    this.observers.push(observer);  
  }  

  unsubscribe(observer) {  
    this.observers = this.observers.filter(obs => obs !== observer);  
  }  

  notify(data) {  
    this.observers.forEach(observer => observer.update(data));  
  }  
}  

class Observer {  
  update(data) {  
    console.log(`Observer received: ${data}`);  
  }  
}  

const subject = new Subject();  
const observer1 = new Observer();  
const observer2 = new Observer();  

subject.subscribe(observer1);  
subject.subscribe(observer2);  

subject.notify("Hello, observers!");  
// Output:  
// Observer received: Hello, observers!  
// Observer received: Hello, observers!

Use Cases

• Event handling in frontend frameworks (e.g., React, Vue).
• Real-time notifications (e.g., chat applications).
• Decoupling components in a modular system.

---

Conclusion

Design patterns are essential tools for writing clean, maintainable, and scalable JavaScript code. The Singleton pattern ensures a single instance of a class, the Factory pattern centralizes object creation, and the Observer pattern enables efficient event-driven communication.

By understanding and applying these patterns, developers can solve common architectural challenges while improving code readability and performance. Experiment with these patterns in your projects to see how they can streamline your development workflow.

Would you like a deeper dive into any of these patterns? Let us know in the comments! 🚀