← Back to publications
SoftwareArticleDesign Patterns

SingletonHello: Understanding the Singleton Design Pattern

3 min read
design-patternssingletonjavascripttypescript
Diagram illustrating the Singleton design pattern showing a single instance shared across multiple access points

I decided to write about numerous design patterns starting with singleton. This is to improve my understanding of javascript/typescript (and its framework) and as well share what I have learnt with others.

In this article, I present no new knowledge per say, I am merely aggregating the knowledge found online whilst ensuring uniqueness in presentation.

What is a Design Pattern?

A design pattern is an optimized way used and proposed for adoption to solve coding problems. For better understanding, look at it as a mother teaching her child the effective way of making bread so that it would be highly satisfactory, although, if she leaves her child to it, the child would successfully make a bread but would not be as satisfactory as it is when following the guidelines of the mother.

That is what design patterns are. Some experienced programmers developed some patterns that worked well with coding problems and shared them for the public's adoption.

What is Singleton Design Pattern?

So, coming back to the singleton design pattern. As the name connotes, this is a design pattern in which only one instance (creation) of an object is allowed to exist.

For example, assume we have 4 gates leading to an office, of which a visitor can come in through gate 1 and decide to go out via gate 2.

In this scenario, adopting a singleton structure in managing visitors' data proof to be effective as there would be a single source of truth that protects against duplication of data such that when the security at gate 1 inputs a visiting visitor's data, the security at gate 3 can input the exit of that same visitor because their data would be synchronized and their actions would be managed by one system.

Implementation of Singleton Design Pattern

let instance: any = null;

const singletonPattern = function (num: number) {
  function createInstance(num: number) {
    return () => {
      console.log("This is an instance", num);
    };
  }

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

export const singleOne = singletonPattern(1).getInstance();
export const singleTwo = singletonPattern(2).getInstance();

console.log(singleOne()); // This is an instance 1
console.log(singleTwo()); // This is an instance 1
console.log(singleOne === singleTwo); // true

In this code sample, a global instance variable was used to hold the value of our singleton system.

Once the singletonPattern function has been called once and the global instance variable has been set, any further calling of such function would result to returning that instance regardless or where or how many times it's called.

Pros of Singleton Design Pattern

Assets Management: Singleton aid in management of assets that are needed and used by more than one player in your codebase.

Cons of Singleton Design Pattern

Violates Single Responsibility Principle: When you implement singleton, it's most likely going to handle more than one functionality and thus violating one of the clean code principles which states that each class should have only one reason to change.


PS: I will continually update this article and add more useful information relating to singleton and with focus on how it applies to react and react native.