Creational Design Patterns in JavaScript

Design patterns are reusable solutions to common problems that arise during software development. In this blog post, we will explore creational design patterns in JavaScript with practical examples. These patterns focus on the process of object creation, providing flexibility and control over how objects are instantiated.

1. Singleton Pattern

The Singleton pattern ensures that a class has only one instance and provides a global point of access to it. This is useful when you want to limit the number of instances of a class.

Example:

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

	someMethod() {
		// Your code here
	}
}

const instance1 = new Singleton();
const instance2 = new Singleton();
console.log(instance1 === instance2); // true

2. Factory Pattern

The Factory pattern provides an interface for creating objects, but allows subclasses to alter the type of objects that will be created. It's useful when you have multiple objects with common behaviors.

Example:

class Product {
	constructor(name) {
		this.name = name;
	}
}

class ProductFactory {
	createProduct(name) {
		return new Product(name);
	}
}

const factory = new ProductFactory();
const product1 = factory.createProduct("Product 1");
const product2 = factory.createProduct("Product 2");

3. Constructor Pattern

The Constructor pattern is a basic way to create objects. It uses the new keyword and constructor functions to create instances.

Example:

function Person(name, age) {
	this.name = name;
	this.age = age;
}

const person1 = new Person("John", 30);
const person2 = new Person("Alice", 25);

4. Prototype Pattern

The Prototype pattern involves creating new objects by copying an existing object, known as the prototype. This can be more efficient than creating objects from constructors.

Example:

const personPrototype = {
	sayName: function () {
		console.log(this.name);
	},
};

const person1 = Object.create(personPrototype);
person1.name = "John";

const person2 = Object.create(personPrototype);
person2.name = "Alice";

5. Abstract Factory Pattern

The Abstract Factory pattern provides an interface for creating families of related or dependent objects without specifying their concrete classes.

Example:

class Button {}
class Checkbox {}

class GUIFactory {
	createButton() {}
	createCheckbox() {}
}

class MacFactory extends GUIFactory {
	createButton() {
		return new MacButton();
	}

	createCheckbox() {
		return new MacCheckbox();
	}
}

class WindowsFactory extends GUIFactory {
	createButton() {
		return new WindowsButton();
	}

	createCheckbox() {
		return new WindowsCheckbox();
	}
}

These are just a few creational design patterns in JavaScript. Using these patterns, you can make your code more flexible, maintainable, and scalable. It's essential to choose the right pattern for your specific use case to improve code quality and maintainability.