The singleton design pattern is a popular one for JavaScript. It offers a means of organizing the code into a logical chunk that can be reached via a single variable. When a single instance of an object is required for the duration of an application, the singleton design pattern is utilized. The Singleton pattern in JavaScript can be used for a variety of purposes, including NameSpacing, which lowers the number of global variables on your page (preventing global space from becoming cluttered), organizing the code consistently, and improving the readability and maintainability of your pages.

The standard definition of the Singleton pattern emphasizes these two ideas:

• A class should only be permitted to have one instance, and
• We ought to make that one instance accessible from anyone in the world.

Let me explain the singleton pattern in the context of JavaScript:

Encapsulation is the process of using an object to give a namespace to a collection of related methods and attributes. If initiating is permitted, it can only be done once.

Using object literals, we can generate singletons in JavaScript. There is another option, which I will discuss in my subsequent piece.

The object itself, with all of its members (methods and attributes), plus the global variable used to access it, make up a singleton object. One of the main characteristics of the singleton pattern is that the variable is global, allowing the object to be accessible from anywhere on the page.

JavaScript: A Singleton as a Namespace

As I already mentioned, singletons can be used in JavaScript to declare namespaces. In JavaScript, NameSpacing plays a significant role in responsible programming. Because everything may be changed, and because it is quite simple to accidentally delete a variable, a method, or even a class without realising it. As an example of something that frequently occurs when working concurrently with another team member,

function findUserName(id) {

}

/* Later in the page another programmer
added code */
var findUserName = $('#user_list');

/* You are trying to call :( */
console.log(findUserName())

Namespacing your code inside of a singleton object is one of the greatest techniques to avoid unintentionally overwriting variables.

/*  Using Namespace */

var MyNameSpace = {
  findUserName : function(id) {},
  // Other methods and attribute go here as well
}

/* Later in the page another programmer
added code */
var findUserName = $('#user_list');

/* You are trying to call and you make this time workable */
console.log(MyNameSpace.findUserName());

Singleton Design Pattern Implementation

/* Lazy Instantiation skeleton for a singleton pattern */

var MyNameSpace = {};
MyNameSpace.Singleton = (function() {

  // Private attribute that holds the single instance
  var singletonInstance;  

  // All of the normal code goes here
  function constructor() {
    // Private members
    var privateVar1 = "Nishant";
    var privateVar2 = [1,2,3,4,5];

    function privateMethod1() {
      // code stuff
    }

    function privateMethod1() {
      // code stuff
    }

    return {
      attribute1 : "Nishant",
      publicMethod: function() {
        alert("Nishant");// some code logic
      }
    }
  }

  return {
    // public method (Global access point to Singleton object)
    getInstance: function() {
      //instance already exist then return  
      if(!singletonInstance) {
        singletonInstance = constructor();
      }
      return singletonInstance;           
    }           
  }

})();   

// getting access of publicMethod
console.log(MyNamespace.Singleton.getInstance().publicMethod());

The singleton that was used above is simple to comprehend. The static getInstance() method of the singleton class returns a reference to the single singleton instance, which the singleton class keeps as a static reference.