In JavaScript, design patterns are classes and communicating objects that are designed to deal with a general design problem in a specific setting. Generic, reusable solutions to typical issues that come up throughout software design and development are known as software design patterns.
They give developers a forum to discuss successful design concepts and function as best practices for resolving particular kinds of problems.
What are Design Patterns?
A design pattern in software engineering is a generic, replicable fix for a typical problem in program design. The design is not complete enough to be coded right away. It is a description or model for problem-solving that can be used in various contexts.
Types of Software Design Patterns
In JavaScript, there are primarily three categories of design patterns namely −
- Creational Design Patterns
- Structural Design Patterns
- Behavioral Design Patterns
Let’s discuss them one by one −
Creational Design Patterns in JavaScript
In software development, creational design patterns are a subset of design patterns. They work on the object generation process, trying to make it more flexible and efficient. It maintains the independence of the system and the composition, representation, and creation of its objects.
Singleton Pattern
The singleton design pattern makes sure a class has only one immutable instance. In simple terms, the singleton pattern is an object that cannot be changed or replicated. It is often useful when we want an immutable single point of truth for our application.
Suppose that we want to have a single object that has all of our application’s configuration. We also want to make it prohibit to copy or modify that object.
Two ways to implement this pattern are using classes and object literals −
const Settings ={initialize:()=> console.log('Application is now running'),refresh:()=> console.log('Application data has been refreshed'),}// Freeze the object to prevent modifications
Object.freeze(Settings)// "Application is now running"
Settings.initialize()// "Application data has been refreshed"
Settings.refresh()// Trying to add a new key
Settings.version ="1.0"
console.log(Settings)
This will generate the below result −
Application is now running
Application data has been refreshed
{ initialize: [Function: initialize], refresh: [Function: refresh] }
classSettings{constructor(){}launch(){ console.log('Application is now running')}refresh(){ console.log('Application data has been refreshed')}}const appInstance =newSettings()
Object.freeze(appInstance)// "Application is now running"
appInstance.launch()// "Application data has been refreshed"
appInstance.refresh()
Output
Here is the outcome of the above code −
Application is now running
Application data has been refreshed
Factory Method Pattern
The Factory method pattern provides an interface for creating objects that can be modified after they are generated. By combining the logic for building our objects in a single place, this reduces and enhances the organization of our code.
This often used pattern can be implemented in two ways: by using classes or factory functions, which are methods that return an object.
classCreature{constructor(name, message){this.name = name
this.message = message
this.type ="creature"}fly=()=> console.log("Whoooosh!!")speak=()=> console.log(this.message)}const creature1 =newCreature("Zee","Hello! I'm Zee from outer space!")
console.log(creature1.name)// output: "Zee"
This will produce the below output −
Zee
Abstract Factory Pattern
Without knowing the precise types of linked objects, we can use the Abstract Factory design to generate groups of them. This is useful when we need to build unique objects that share only a few characteristics.
It works like this: a primary abstract factory connects with the client, or user. This abstract factory then uses some logic to invoke a specific factory to generate the actual object. As a result, it acts as an overlay over the typical factory layout, allowing us to produce a large range of items in a single primary factory.
For example, we are able to develop a system for an automobile manufacturer that includes trucks, motorcycles, and cars. The Abstract Factory pattern, which handles several object types with a single primary factory, makes this easy for us to do.
// Each class represents a specific type of vehicleclassCar{constructor(){this.type ="Car"this.wheels =4}startEngine=()=> console.log("Vroom Vroom!")}classTruck{constructor(){this.type ="Truck"this.wheels =8}startEngine=()=> console.log("Rumble Rumble!")}classMotorcycle{constructor(){this.type ="Motorcycle"this.wheels =2}startEngine=()=> console.log("Zoom Zoom!")}const vehicleFactory ={createVehicle:function(vehicleType){switch(vehicleType){case"car":returnnewCar()case"truck":returnnewTruck()case"motorcycle":returnnewMotorcycle()default:returnnull}}}const car = vehicleFactory.createVehicle("car")const truck = vehicleFactory.createVehicle("truck")const motorcycle = vehicleFactory.createVehicle("motorcycle")
console.log(car.type)
car.startEngine()
console.log(truck.type)
truck.startEngine()
console.log(motorcycle.type)
motorcycle.startEngine()
Output
This will generate the below result −
Car
Vroom Vroom!
Truck
Rumble Rumble!
Motorcycle
Zoom Zoom!
Builder Pattern
The Builder pattern is used to generate objects in “steps”. Functions or methods that add particular attributes or methods are typically included in our object.
Because it separates the development of methods and attributes into separate entities, this design is cool.
The object we create will always contain every property and method defined by a class or factory function. Using the builder pattern, which enables us to construct an object and apply only the “steps” that are required, provides a more flexible approach.
// Define our creaturesconst creature1 ={
name:"Buzz Lightwing",
message:"You'll never debug me!"}const creature2 ={
name:"Sneaky Bugsworth",
message:"Can't catch me! Ha ha!"}// These functions add abilities to an objectconstenableFlying=obj=>{
obj.fly=()=> console.log(${obj.name} has taken flight!)}constenableSpeaking=obj=>{
obj.speak=()=> console.log(${obj.name} says: "${obj.message}")}// Add abilities to the creaturesenableFlying(creature1)
creature1.fly()enableSpeaking(creature2)
creature2.speak()
Output
This will give the following result −
Buzz Lightwing has taken flight!
Sneaky Bugsworth says: "Can't catch me! Ha ha!"
Prototype Pattern
By using another object as a blueprint and inheriting its properties and methods, you can create an object using the prototype pattern.
Prototypal inheritance and how JavaScript handles it are likely familiar to you if you have been using JavaScript for a time.
As methods and properties can be shared between objects without depend on the same class, the final result is much more flexible than what we obtain when we use classes.
// Define a prototype objectconst creatureAbilities ={attack:()=> console.log("Zap! Zap!"),escape:()=> console.log("Soaring through the sky!")}// Create a new creature const creature1 ={
name:"Winged Buzz",
message:"You can't debug me!"}// Set the prototype
Object.setPrototypeOf(creature1, creatureAbilities)// Confirm that the prototype is set successfully
console.log(Object.getPrototypeOf(creature1))
console.log(creature1.message)
console.log(creature1.attack())
console.log(creature1.escape())
Output
This will produce the following outcome −
{ attack: [Function: attack], escape: [Function: escape] }
You can't debug me!
Zap! Zap!
undefined
Soaring through the sky!
undefined
Structural Design Patterns in JavaScript
In software development, structural design patterns are a subset of design patterns that focus on how classes or objects are put together to create complex, larger structures. In order to increase a software system’s flexibility, re-usability, and maintainability, they help in the organization and management of relationships between objects.
Adapter Pattern
The Adapter Method is a structural design pattern which helps you to connect the gap between two incompatible interfaces and make them operate together.
Let us see an example below −
// Array of cities with population in millionsconst citiesPopulationInMillions =[{ city:"Mumbai", population:12.5},{ city:"Delhi", population:19.0},{ city:"Bangalore", population:8.4},{ city:"Kolkata", population:4.5},]// The new city we want to addconst Chennai ={
city:"Chennai",
population:7000000}consttoMillionsAdapter=city=>{ city.population =parseFloat((city.population /1000000).toFixed(1))}toMillionsAdapter(Chennai)// We add the new city to the array
citiesPopulationInMillions.push(Chennai)// This function returns the largest population number constCityWithMostPopulation=()=>{return Math.max(...citiesPopulationInMillions.map(city=> city.population))}
console.log(CityWithMostPopulation())
Output
This will generate the below result −
19
Decorator Pattern
The decorator method is a structural design pattern that enables the addition of static or dynamic functionality to particular objects without changing how other objects of the same class behave.
Following is the simple demonstration of this Reactivity Pattern −
// Base class for a CarclassCar{constructor(){this.description ="Basic Car";}getDescription(){returnthis.description;}cost(){// Base price return10000;}}// Decorator to add air conditioningclassAirConditioningDecorator{constructor(car){this.car = car;}getDescription(){returnthis.car.getDescription()+" + Air Conditioning";}cost(){// Adds cost for air conditioning returnthis.car.cost()+1500;}}// Decorator to add a sunroofclassSunroofDecorator{constructor(car){this.car = car;}getDescription(){returnthis.car.getDescription()+" + Sunroof";}cost(){returnthis.car.cost()+2000;}}// Create a basic carconst myCar =newCar();
console.log(myCar.getDescription());
console.log(Cost: $${myCar.cost()});// Add air conditioning featureconst myCarWithAC =newAirConditioningDecorator(myCar);
console.log(myCarWithAC.getDescription());
console.log(Cost: $${myCarWithAC.cost()});// Add sunroof feature to the car const myCarWithACAndSunroof =newSunroofDecorator(myCarWithAC);
console.log(myCarWithACAndSunroof.getDescription());
console.log(Cost: $${myCarWithACAndSunroof.cost()});
Output
This will generate the below result −
Basic Car
Cost: $10000
Basic Car + Air Conditioning
Cost: $11500
Basic Car + Air Conditioning + Sunroof
Cost: $13500
Facade Pattern
The Facade Method is a structural design pattern that improves client interaction with a subsystem by offering a higher-level, simplified interface to a group of interfaces within that subsystem.
To make it simpler to interface with a subsystem containing multiple complex parts in an automobile, we want to create a CarFacade class. The client should only use the CarFacade class; it should not use the individual components.
// Subsystem classesclassEngine{start(){
console.log("Engine started!");}stop(){
console.log("Engine stopped!");}}classTransmission{shiftGear(){
console.log("Transmission shifted!");}}classAirConditioning{turnOn(){
console.log("Air conditioning is ON.");}turnOff(){
console.log("Air conditioning is OFF.");}}// Facade classclassCarFacade{constructor(){this.engine =newEngine();this.transmission =newTransmission();this.airConditioning =newAirConditioning();}startCar(){
console.log("Starting the car...");this.engine.start();this.transmission.shiftGear();this.airConditioning.turnOn();}stopCar(){
console.log("Stopping the car...");this.airConditioning.turnOff();this.transmission.shiftGear();this.engine.stop();}}// Client code using the Facade patternconst myCar =newCarFacade();// Starting the car
myCar.startCar();// Stopping the car
myCar.stopCar();
Output
This will generate the below result −
Starting the car...
Engine started!
Transmission shifted!
Air conditioning is ON.
Stopping the car...
Air conditioning is OFF.
Transmission shifted!
Engine stopped!
Proxy Pattern
The Proxy Method is a structural design pattern that allows you to create an object substitute that can control access to the real object or serve as an intermediate.
// Real objectclassRealImage{constructor(filename){this.filename = filename;this.load();}load(){
console.log(Loading image: ${this.filename});}display(){
console.log(Displaying image: ${this.filename});}}// Proxy classclassProxyImage{constructor(filename){this.filename = filename;// Real image is only loaded when neededthis.realImage =null;}load(){if(!this.realImage){// Lazy load this.realImage =newRealImage(this.filename);}}display(){// Ensure the real image is loaded before displaying it this.load();this.realImage.display();}}// Client codeconst image1 =newProxyImage("image1.jpg");const image2 =newProxyImage("image2.jpg");// Image is not loaded yet
image1.display();// Image is already loaded
image1.display();// A different image is loaded
image2.display();
Output
This will lead to the below result −
Loading image: image1.jpg
Displaying image: image1.jpg
Displaying image: image1.jpg
Loading image: image2.jpg
Displaying image: image2.jpg
Behavioral Design Patterns in JavaScript
Behavioral design patterns are a subset of software development design patterns that focus on the interactions and communication between classes and objects. They focus on how classes and objects work together and communicate in order to fulfill responsibilities.
Chain of Responsibility Pattern
The Chain of Responsibility is used to route requests via a number of handlers. Each handler decides whether to process the request or pass it on to the next handler in the chain.
We could use the same example as before for this pattern because middlewares in Express are handlers that either execute a request or forward it to the next handler.
Iterator Pattern
The iterator can be used to navigate over the elements of a collection. This can appear unimportant in today’s computer languages, but it used to be that way.
Any of the built-in JavaScript functions that let us iterate across data structures (for, forEach, for…of, for…in, map, reduce, filter, and so on) can use the iterator pattern.
As with any traversal technique, we write code to iterate through data with advanced structures such as trees or graphs.
Observer Pattern
The observer pattern allows you to create a subscription mechanism that notifies multiple items about any changes to the item being observed. Basically, the rule is like having an event listener on a specific object, and when that object does the action we are looking for, we do something.
React’s useEffect hook could be an excellent example here. UseEffect executes a provided function at the time it is declared.
The hook is separated into two parts: the executable function and an array of dependents. If the array is empty, like in the example below, the function is called every time the component is shown.
useEffect(()=>{ console.log('The component has been rendered')},[])
If we declare any variables in the dependency array, the function will only run when they change.
useEffect(()=>{ console.log('var1 has been changed')},[var1])
Even simple JavaScript event listeners can be considered as observers. This approach is also illustrated by reactive programming and tools like RxJS, which manage asynchronous information and events across systems.
