How to create singleton classes in Javascript?

Question

I am working on a large project where I have multiple managers to handle different tasks, I need an only a single object of these managers to be created when I start the app,

I came across this method of Singleton creation

class QuestionnaireManager {

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

Is this an acceptable way, is there any downside, I am coming from JAVA Kotlin background and this seems to simple to be true where we have so much to deal in case of singletons in other languages. (Most of those cases have to deal with multi-threading but as JS is single-threaded so I think this would be sufficient way)

Still need opinion on best practices, or any other Dependency Injection methods where we don't even rely on Singleton but create the object once and reuse all over the project with dependency injections.

I would like to know the opinion of sensie in JS.

Answer 1

That ain't the right way to implement Singleton in ES6. The correct way:

class QuestionnaireManager {
  constructor() {
    if (QuestionnaireManager._instance) {
      throw new Error("Singleton classes can't be instantiated more than once.")
    }
    QuestionnaireManager._instance = this;

    // ... your rest of the constructor code goes after this
  }
}

var managerOne = new QuestionnaireManager()
var managerTwo = new QuestionnaireManager() // Throws error

Or, if you don't want an error to be thrown on second instance creation you can just return the last instance, like so:

class QuestionnaireManager {
  constructor() {
    if (QuestionnaireManager._instance) {
      return QuestionnaireManager._instance
    }
    QuestionnaireManager._instance = this;

    // ... your rest of the constructor code goes after this
  }
}

var managerOne = new QuestionnaireManager()
var managerTwo = new QuestionnaireManager()

console.log(managerOne === managerTwo) // logs "true"

Answer 2

// Singleton.js

class Singleton {
    constructor(){
        if(Singleton._instance){
            console.warn("already created!");
            return Singleton._instance;
        }

        Singleton._instance = this;

        console.log("singleton created");

        this._createdTime = new Date();
    }

    static instance() {
        if(!Singleton._instance){
            return new Singleton();
        }

        return Singleton._instance;
    }

    createdTime() {
        return this._createdTime.toISOString();
    }
}

Singleton._instance = null;

export default Singleton;

// main.js

import Singleton from "./Singleton"

const a = new Singleton();
const b = new Singleton();
const c = Singleton.instance();

console.log(a.createdTime());
console.log(b.createdTime());
console.log(c.createdTime());

Output would be