Software development is a mix of art and science, and as in any discipline, there are methodologies and techniques that help to better structure our work. In the world of programming, one of the most effective strategies for writing more maintainable, scalable, and efficient code is the use of design patterns. In the context of JavaScript, design patterns are particularly relevant due to the dynamic and flexible nature of the language. In this article, we'll explore design patterns in JavaScript, providing essential guidance for developers looking to improve the structure of their JavaScript projects.
What are design patterns?
Definition of Design Patterns
Design patterns are reusable solutions to common problems in software design. They are like templates that can be applied when writing code to solve design problems efficiently.
Importance of Design Patterns in JavaScript
JavaScript, being a flexible language with a permissive syntax, can lead developers to write disorganized or poorly structured code. Design patterns offer a framework to avoid such problems, making it easy to create structured JS code that is easy to understand, test, and maintain.
Classification of Design Patterns in JavaScript
Design patterns can be classified into different categories, each adapting to a specific type of design problem. We will examine the three main types: creational, structural and behavioral patterns.
Creational Patterns in JS
Creational patterns focus on the way objects are created in JavaScript. These patterns seek to abstract the process of instantiating an object to make the system more independent of how its objects are created and represented.
Factory Method
The Factory Method pattern is designed to create an instance of a class from one of several possible subclasses, depending on logic decided at runtime.
function Developer(name) { this.name = name; this.type = "Developer"; } function Tester(name) { this.name = name; this.type = "Tester"; } function EmployeeFactory() { this.create = (name, type) => { return type === "Developer" ? new Developer(name) : new Tester(name); }; } const employeeFactory = new EmployeeFactory(); const employees = []; employees.push(employeeFactory.create("Patrick", "Developer")); employees.push(employeeFactory.create("John", "Tester"));Singleton
The Singleton pattern restricts the instantiation of a class to a single object. This is useful when exactly one object is needed to coordinate actions across the system.
let instance = null; class Database { constructor(data) { if (!instance) { instance = this; this.data = data; } return instance; } } const mongo = new Database('mongo'); const mysql = new Database('mysql'); console.log(mongo === mysql); // trueStructural Patterns in JS
Structural patterns focus on the way objects and classes are composed to form larger structures. The purpose of these patterns is to facilitate design by identifying a simple way to realize relationships between entities.
Adapter
The Adapter pattern allows incompatible interfaces to work together. It acts as an intermediary, translating calls from one interface into a form that the other interface can understand.
class OldCalculator { constructor() { this.operations = function(term1, term2, operation) { switch (operation) { case 'add': return term1 + term2; case 'sub': return term1 - term2; default: return NaN; } }; } } class NewCalculator { constructor() { this.add = function(term1, term2) { return term1 + term2; }; this.sub = function(term1, term2) { return term1 - term2; }; } } class CalcAdapter { constructor() { const newCalc = new NewCalculator(); this.operations = function(term1, term2, operation) { switch (operation) { case 'add': return newCalc.add(term1, term2); case 'sub': return newCalc.sub(term1, term2); default: return NaN; } }; } }Decorator
The Decorator pattern provides a way to dynamically add new responsibilities to objects without altering their structure.
class Book { constructor(title, author, price) { this._title = title; this._author = author; this.price = price; } getPrice() { return this.price; } } function giftWrap(book) { book.isGiftWrapped = true; book.getPrice = function() { return this.price + 10; // Adding extra cost for gift wrap }; return book; } const myBook = new Book('Clean Code', 'Robert C. Martin', 30); const giftWrappedBook = giftWrap(myBook);Behavior Patterns in JS
Behavior patterns focus on communication between objects, specifying how objects interact and share responsibility.
Observer
The Observer pattern facilitates a subscription model where objects can subscribe to certain events of another object and be notified when that event occurs.
class Product { constructor() { this.price = 0; this.actions = []; } setBasePrice(val) { this.price = val; this.notifyAll(); } register(observer) { this.actions.push(observer); } unregister(observer) { this.actions = this.actions.filter(el => !(el instanceof observer)); } notifyAll() { return this.actions.forEach((el) => el.update(this)); } } class Fees { update(product) { product.price = product.price * 1.2; } } class Profit { update(product) { product.price = product.price * 2; } } const product = new Product(); const fees = new Fees(); const profit = new Profit(); product.register(fees); product.register(profit); product.setBasePrice(100);Chain of Responsibility
The Chain of Responsibility pattern allows multiple objects to process a request without requiring the requester to know the specific handling chain.
class CumulativeSum { constructor(initialValue = 0) { this.sum = initialValue; } add(value) { this.sum += value; return this; } } // Use const sum1 = new CumulativeSum(); console.log(sum1.add(10).add(2).add(50).sum); // 62 const sum2 = new CumulativeSum(10); console.log(sum2.add(10).add(20).add(5).sum); // Four. FiveGood Practices in Using Design Patterns in JavaScript
Don't Overuse Patterns
It is important not to be tempted to use design patterns in all situations. Not all problems require a design pattern, and in some cases, its use could further complicate the solution.
Clean and Maintainable Code
Design patterns are a tool for writing cleaner, more maintainable code. Specifically, JS structured code should be easy to understand and change over time.
Get familiar with the Patterns
To effectively use design patterns, it is essential to thoroughly understand each pattern and recognize the problems they are intended to solve.
Refactoring
Applying design patterns can be an effective step in the refactoring process. They can help transform poorly structured code into a cleaner, more understandable architecture.
Conclusion
Design patterns in JavaScript are essential tools for any developer looking to write robust and scalable code. By learning and applying these patterns, developers can significantly improve the quality of their applications and work more effectively on complex projects. However, it is crucial to remember that each pattern should be used with discernment and always based on the specific needs of the project. With practice and experience, design patterns will become a valuable part of any JavaScript developer's repertoire.
English 
Spanish