What is the cleanest way to implement a JavaScript singleton pattern?

General Discussions
, ,
1

I’m looking for the most straightforward and clean approach to implement a JavaScript singleton What’s the simplest method to ensure only one instance of a class is created throughout the application?

2

Having spent a good number of years tinkering with design patterns, I find that sometimes the simplest solution sticks the best. When it comes to implementing a javascript singleton, a basic closure-based approach works wonders. It’s lightweight and gets the job done cleanly without overcomplicating things.

const Singleton = (function() {
  let instance;

  function createInstance() {
    return { message: "I am the only instance!" };
  }

  return {
    getInstance: function() {
      if (!instance) {
        instance = createInstance();
      }
      return instance;
    }
  };
})();

// Usage:
const singleton1 = Singleton.getInstance();
const singleton2 = Singleton.getInstance();

console.log(singleton1 === singleton2); // true

This version of a javascript singleton keeps everything neatly tucked inside a closure, making sure no outside code can accidentally mess with the instance creation. It’s minimal, effective, and perfect for many everyday use-cases.

3

Building on @emma-crepeau idea — after working on larger projects, I realized sometimes structure helps readability as the codebase grows. In such cases, I’d prefer using ES6 classes combined with static properties. It feels more natural when working with a more object-oriented mindset while still sticking to the javascript singleton philosophy.

class Singleton {
  static instance;

  constructor() {
    if (Singleton.instance) {
      return Singleton.instance;
    }
    this.message = "I am the only instance!";
    Singleton.instance = this;
  }
}

// Usage:
const singleton1 = new Singleton();
const singleton2 = new Singleton();

console.log(singleton1 === singleton2); // true

Here, the javascript singleton benefits from the class syntax — it’s more readable for teams and scales nicely if your singleton needs to expand functionality over time. Plus, the constructor logic makes the behavior intuitive for anyone familiar with object-oriented programming.

4

Totally agree with both of you guys — and just to add my two cents from experience working on modular applications, I’ve found that wrapping the javascript singleton inside a module pattern really pays off, especially when managing larger codebases with multiple files.

const Singleton = (() => {
  let instance;

  function init() {
    return { message: "I am the only instance!" };
  }

  return {
    getInstance: function() {
      if (!instance) {
        instance = init();
      }
      return instance;
    }
  };
})();

// Usage:
const singleton1 = Singleton.getInstance();
const singleton2 = Singleton.getInstance();

console.log(singleton1 === singleton2); // true

This approach essentially builds on the closure idea but ties it into the module pattern, making your javascript singleton even more modular and easy to integrate across multiple parts of your application. It’s my go-to when I’m aiming for organized, scalable code architecture.