Design Patterns — Javascript

Hello everyone! In today’s article, I will talk about design patterns. I have just started to learn this subject, so I want to reinforce my knowledge and correct any misunderstandings with your help. I hope it will be useful for all of us. Feel free to leave a comment!

What is a Design Pattern?

They are solution methods used to solve problems that often arise in software. These methods usually refer to principles and guidelines. It is not a specific block of code, it is not used to obtain a solution by copy and paste. Instead, it provides general approaches that we can apply. For example, the structures of java and javascript are different from each other, so even if we solve a problem with the same design pattern, the steps may differ from each other.

Design patterns do not have strict rules, they can be customised depending on the need. It is also an advantage for teamwork that they provide common language usage among software developers.

With Design Patterns: Elements of Reusable Object-Oriented Software by Gang of Four (GoF) book, design patterns have become widespread. In this book, 23 design patterns are mentioned. Since Javascript has both OOP features and different approaches from traditional object oriented languages, I preferred to proceed from a source where I can learn the use of design patterns with Javascript.

My course; JavaScript Design Patterns for Web Apps by Maximiliano Firtman

In GoF’s book, Design Patterns are categorised under 3 main headings. These are;

• Creational Patterns
• Structural Patterns
• Behavioral Patterns

In this article, I will talk about the Singleton Pattern in the Creational Patterns category.

Singleton Pattern

Reason: In cases where it is necessary to create only one instance of a class and provide global access to this instance

Get Esra Akbulat’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Example code:

class Configuration {
  static #instance = null; // Private a static field

  #settings = {
    theme: "light",
    language: "en",
  };

  constructor() {
    if (Configuration.#instance) {
      return Configuration.#instance;
    }

    Configuration.#instance = this;
  }

  getSetting(key) {
    return this.#settings[key];
  }

  setSetting(key, value) {
    this.#settings[key] = value;
  }
}

// Usage:
const config1 = new Configuration();
console.log(config1.getSetting("theme")); // "light"

const config2 = new Configuration();
config2.setSetting("theme", "dark");

console.log(config1.getSetting("theme")); // "dark" (config1 and config2 are same instance)
console.log(config1 === config2); // true

When you search for examples of Singleton Pattern, you encounter examples written with classes similar to this code block. To think more simply, we can also apply the singleton pattern with objects in javascript.

Example code — object version:

const Configuration = {
  settings: {
    theme: "light",
    language: "en",
  },

  getSetting(key) {
    return this.settings[key];
  },

  setSetting(key, value) {
    this.settings[key] = value;
  }
};

// Usage:
const config1 = Configuration;
console.log(config1.getSetting("theme")); // "light"

const config2 = Configuration;
config2.setSetting("theme", "dark");

console.log(config1.getSetting("theme")); // "dark" (config1 and config2 are same instance)
console.log(config1 === config2); // true

Since config1 and config2 point to the same object, their reference points are the same and changes made to this object affect both of them.

Example Usage Areas:

• Configuration Management: Managing the general settings of the application from a central location
• Database Connections: Optimise resource usage by providing a single database connection
• Logger Management: Using a single logging system across the application