Examples of JavaScript Design Patterns
Example 1: In this example, we will see how the Builder design pattern, as well as the Chain of Responsibilities design pattern, works.
let Task = function (name, description) {
this.name = name;
this.description = description;
};
let TaskBuilder = function () {
let name;
let description;
this.setName = function (name) {
this.name = name;
return this;
};
this.setDescription = function (description) {
this.description = description;
return this;
};
this.build = function () {
return new Task(this.name, this.description);
};
return this;
};
let task = new TaskBuilder();
let object = task
.setName("First Task")
.setDescription("Study React and TypeScript")
.build();
console.log(object);
Output:
Task { name: 'First Task', description: 'Study React and TypeScript' }
Example 2: In this example, we will understand how does Proxy Design Pattern works. Here we will create a proxy method that actually works for the main method since it is responsible for all the output which user wants to display as a result.
function mainDisplayFunction() {
this.getData = function (name) {
if (name === "ABC") return 20000;
else if (name === "DEF") return 5000;
else return 0;
};
}
function proxyDisplayFunction() {
let object_1 = new mainDisplayFunction();
let result_object = {};
return {
getData: function (name) {
if (!result_object[name]) {
result_object[name] = object_1.getData(name);
}
console.log(name + ": " + result_object[name]);
return result_object[name];
},
};
}
function mainFunction() {
let main_object = new proxyDisplayFunction();
main_object.getData("ABC");
main_object.getData("DEF");
main_object.getData("Apple");
}
mainFunction();
Output:
ABC: 20000
DEF: 5000
Apple: 0
JavaScript Design Patterns
JavaScript design patterns are reusable solutions to common software design problems encountered in JavaScript development. They help in structuring code, promoting modularity, improving maintainability, and ensuring best practices for scalable and efficient applications.
Many developers have documented their solutions to these problems over time, and as more and more people began to use them, they became widely accepted as a standard way of problem-solving. This led to the term “design patterns” being coined to describe them.
As the importance of design patterns became better understood, they were further developed and standardized. Today, most modern design patterns have a defined structure and are organized into multiple categories. They are also commonly taught as independent topics in computer science-related degrees.
Table of Content
- JavaScript Design Patterns
- Classification of JavaScript Design Patterns
- Benefits of JavaScript design patterns
- Examples of JavaScript Design Patterns
In this JavaScript Design Patterns article, You’ll learn various types of Design Patterns like creational patterns, structural patterns, and behavioral patterns along with coding examples provided by JavaScript.
Contact Us