JavaScript Singleton Pattern: Guide with Examples

When it comes to designing robust and efficient JavaScript applications, understanding design patterns is crucial. One of the most widely used patterns is the Singleton Pattern. In this article, we’ll dive deep into the Singleton Pattern in JavaScript, providing you with practical examples, tutorials, and resources to help you master this concept. Whether you’re a beginner or an experienced developer, this guide will enhance your understanding of the Singleton Pattern and its applications.

---

What is the Singleton Pattern in JavaScript?

The Singleton Pattern is a design pattern that ensures a class has only one instance while providing a global point of access to that instance. This is particularly useful when you need to manage shared resources, such as configuration settings, database connections, or logging mechanisms.

The Singleton Pattern is part of the Design Patterns in JavaScript family, which includes other patterns like Factory, Observer, and Module patterns. By using the Singleton Pattern, you can avoid unnecessary object creation, reduce memory usage, and ensure consistent behavior across your application.

---

Why Use the Singleton Pattern?

• Single Instance: Ensures only one instance of a class exists.
• Global Access: Provides a global point of access to the instance.
• Resource Management: Ideal for managing shared resources like database connections.
• Memory Efficiency: Reduces memory usage by reusing the same instance.

---

Singleton Pattern JavaScript Example

Let’s start with a basic example of the Singleton Pattern in JavaScript:

class Singleton {
  constructor() {
    if (!Singleton.instance) {
      Singleton.instance = this;
    }
    return Singleton.instance;
  }

  // Example method
  logMessage(message) {
    console.log(message);
  }
}

const instance1 = new Singleton();
const instance2 = new Singleton();

console.log(instance1 === instance2); // true

In this example, instance1 and instance2 refer to the same object, ensuring that only one instance of the Singleton class exists.

---

JavaScript Singleton Pattern Tutorial

To implement the Singleton Pattern effectively, follow these steps:

1. Create a Class: Define a class with a private constructor to prevent direct instantiation.
2. Check for Existing Instance: Use a static property to store the single instance.
3. Return the Instance: Ensure the constructor returns the existing instance if it already exists.

Here’s a step-by-step JavaScript Singleton Pattern Tutorial:

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

  getConnection() {
    return this.connection;
  }
}

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

console.log(db1.getConnection()); // Connected to Database
console.log(db1 === db2); // true

---

JavaScript Singleton Class ES6 Example

With the introduction of ES6, implementing the Singleton Pattern has become more straightforward. Here’s an example of a JavaScript Singleton Class ES6:

let instance = null;

class Logger {
  constructor() {
    if (!instance) {
      instance = this;
      this.logs = [];
    }
    return instance;
  }

  log(message) {
    this.logs.push(message);
    console.log(`Log: ${message}`);
  }

  printLogCount() {
    console.log(`${this.logs.length} logs`);
  }
}

const logger1 = new Logger();
const logger2 = new Logger();

logger1.log("First log");
logger2.log("Second log");

logger1.printLogCount(); // 2 logs
logger2.printLogCount(); // 2 logs

---

Singleton Pattern TypeScript

If you’re working with TypeScript, the Singleton Pattern can be implemented similarly. Here’s an example of a Singleton Pattern TypeScript implementation:

class Configuration {
  private static instance: Configuration;
  private settings: { [key: string]: string };

  private constructor() {
    this.settings = {};
  }

  public static getInstance(): Configuration {
    if (!Configuration.instance) {
      Configuration.instance = new Configuration();
    }
    return Configuration.instance;
  }

  public setSetting(key: string, value: string): void {
    this.settings[key] = value;
  }

  public getSetting(key: string): string {
    return this.settings[key];
  }
}

const config1 = Configuration.getInstance();
const config2 = Configuration.getInstance();

config1.setSetting("theme", "dark");
console.log(config2.getSetting("theme")); // dark

---

Singleton Design Pattern Real-Time Example

A real-world example of the Singleton Design Pattern is managing a database connection pool. Instead of creating a new connection every time, you can use a Singleton to reuse the same connection throughout the application.

---

Key Takeaways

• The Singleton Pattern ensures a class has only one instance.
• It provides a global point of access to that instance.
• It’s useful for managing shared resources like database connections.
• The pattern can be implemented in JavaScript, TypeScript, and other languages like C#.

---

Resources

• JavaScript Design Patterns
• TypeScript Handbook
• MDN Web Docs: JavaScript Classes