JavaScript y caballeros: por qué necesitas patrones de diseño (y cómo te simplificarán la vida)

JavaScript y caballeros: por qué necesitas patrones de diseño (y cómo te simplificarán la vida)

¿Alguna vez has abierto tu antiguo proyecto de JavaScript y has pensado: «¿Quién escribió esto? ¡Esto es código espagueti!»? Si es así, bienvenido al club. Tarde o temprano, todo desarrollador se enfrenta a una situación en la que el código se convierte en caos. Y aquí es donde los patrones de diseño en JavaScript vienen al rescate: recetas probadas para problemas típicos.

Pero pongámonos de acuerdo desde ya: los patrones no son una bala de plata. No son magia que hará que tu código sea perfecto de la noche a la mañana. Son herramientas. Y cualquier herramienta es buena solo cuando sabes cuándo y por qué aplicarla. De eso es exactamente de lo que hablaremos.

¿Qué son los patrones de diseño en palabras sencillas?

Imagina que eres un arquitecto. No inventas una nueva forma de rueda o de marco de puerta cada vez. Usas soluciones probadas: arcos, columnas, muros de carga. Los patrones de diseño en JS son esos mismos «planos arquitectónicos», pero para el código.

Resuelven tres problemas principales:

\n
• Reutilización: no es necesario reinventar la rueda;
\n
• Legibilidad: otro desarrollador entenderá tu lógica de inmediato;
\n
• Escalabilidad: el código se puede ampliar fácilmente sin riesgo de romperlo todo.
\n

En este artículo, analizaremos los cuatro patrones más populares que realmente te serán útiles en el trabajo diario. Sin rodeos: solo código y práctica.

1. Singleton (Instancia única): cuando solo necesitas uno

Hay situaciones en las que debe existir exactamente una instancia de una clase en la aplicación. Por ejemplo:

\n
• Almacenamiento de estado global (como Redux store);
\n
• Registro (logger) para errores;
\n
• Conexión a una base de datos o API.
\n

El patrón Singleton garantiza que, sin importar cuántas veces intentes crear un objeto, obtendrás el mismo.

Ejemplo: Contador de visitas

class Counter {\n  constructor() {\n    if (Counter.instance) {\n      return Counter.instance;\n    }\n    this.count = 0;\n    Counter.instance = this;\n  }\n\n  increment() {\n    this.count++;\n  }\n\n  getCount() {\n    return this.count;\n  }\n}\n\n// Uso\nconst counter1 = new Counter();\nconst counter2 = new Counter();\n\ncounter1.increment();\ncounter1.increment();\n\nconsole.log(counter2.getCount()); // 2 — porque es el mismo objeto\nconsole.log(counter1 === counter2); // true\n

Cuándo usarlo: cuando es fundamental tener un único punto de acceso a un recurso. Pero ten cuidado: un efecto secundario frecuente de Singleton en JS es el estado global, que es difícil de probar. No abuses de él.

2. Module (Módulo): encapsulación inteligente

Antes de la llegada de los Módulos ES6, los desarrolladores usaban el patrón Module para crear métodos privados y públicos. Incluso ahora que tenemos import/export, este enfoque sigue siendo útil para organizar la lógica dentro de un solo archivo.

El secreto está en los closures. Creamos una función que devuelve un objeto con métodos, mientras que las variables internas permanecen inaccesibles desde fuera.

Ejemplo: Carrito de compras de una tienda online

const ShoppingCart = (function() {\n  // Variables privadas\n  let items = [];\n  \n  // Método privado\n  function calculateTotal() {\n    return items.reduce((sum, item) => sum + item.price * item.quantity, 0);\n  }\n\n  // API pública\n  return {\n    addItem(product) {\n      const existing = items.find(item => item.id === product.id);\n      if (existing) {\n        existing.quantity++;\n      } else {\n        items.push({ ...product, quantity: 1 });\n      }\n    },\n    removeItem(productId) {\n      items = items.filter(item => item.id !== productId);\n    },\n    getTotal() {\n      return calculateTotal();\n    },\n    clear() {\n      items = [];\n    }\n  };\n}