Singleton Pattern: When and How to Use It in Frontend Applications

The Singleton pattern ensures a class has only one instance while providing global access to it. While it’s sometimes considered an anti-pattern, there are legitimate use cases in frontend development where Singleton shines.

Consider a global state manager or a configuration service. You want to ensure all components access the same instance to maintain consistency across your application.

Here’s a modern implementation using JavaScript:

class ConfigurationManager {
  static instance = null;

  constructor() {
    if (ConfigurationManager.instance) {
      return ConfigurationManager.instance;
    }

    this.config = {
      theme: 'light',
      language: 'en',
      apiEndpoint: 'https://api.example.com'
    };

    ConfigurationManager.instance = this;
  }

  getConfig() {
    return this.config;
  }

  updateConfig(newConfig) {
    this.config = { ...this.config, ...newConfig };
    // Trigger any necessary updates in your application
  }
}

// Usage in different parts of your application
const config1 = new ConfigurationManager();
const config2 = new ConfigurationManager();

console.log(config1 === config2); // true - same instance

However, exercise caution when using Singletons. They can make testing more difficult and create hidden dependencies. Consider alternatives like dependency injection when possible.