Patrones de diseño en JavaScript y código limpio (con testing)

Cuando ya escribes JavaScript que funciona, el siguiente nivel es escribir JavaScript que se mantiene: código limpio, organizado con patrones de diseño y respaldado con tests. Es lo que separa a quien apaña un script de quien construye software que otros pueden tocar sin miedo. En esta guía tienes lo esencial: buenas prácticas, tres patrones clásicos y una introducción al testing.

Forma parte de la hoja de ruta para aprender JavaScript. Llega aquí cuando ya manejes funciones, objetos y asincronía.

Código limpio: reglas básicas

• Nombres que se entienden: calcularTotalCarrito(), no calc(). El código se lee muchas más veces de las que se escribe.
• Funciones cortas y con una sola responsabilidad: si una función hace tres cosas, pártela en tres.
• Evita repetirte (DRY): si copias y pegas un bloque, conviértelo en una función reutilizable.
• Funciones puras cuando puedas: mismas entradas, misma salida, sin efectos secundarios. Son fáciles de testear.
• const por defecto, let solo si el valor cambia, y nunca var.

Patrón Singleton

Garantiza que una clase tenga una sola instancia en toda la app. Útil para configuración global o una conexión compartida.

class Config {
  constructor() {
    if (Config.instancia) return Config.instancia;
    this.datos = {};
    Config.instancia = this;
  }
}

const a = new Config();
const b = new Config();
console.log(a === b); // true: es la misma instancia

Patrón Observer

Un objeto (el sujeto) mantiene una lista de observadores y les avisa cuando algo cambia. Es la base de la reactividad de muchos frameworks.

class Sujeto {
  constructor() { this.observadores = []; }
  suscribir(fn) { this.observadores.push(fn); }
  notificar(dato) { this.observadores.forEach((fn) => fn(dato)); }
}

const noticias = new Sujeto();
noticias.suscribir((n) => console.log('Usuario 1:', n));
noticias.suscribir((n) => console.log('Usuario 2:', n));
noticias.notificar('¡Nueva publicación!');

Patrón Factory

Una función (la fábrica) que crea objetos según lo que le pidas, sin que quien la usa tenga que saber los detalles de construcción.

function crearUsuario(tipo) {
  const roles = {
    admin: { permisos: ['leer', 'escribir', 'borrar'] },
    editor: { permisos: ['leer', 'escribir'] },
    lector: { permisos: ['leer'] }
  };
  return { tipo, ...roles[tipo] };
}

const admin = crearUsuario('admin');
console.log(admin.permisos); // ['leer', 'escribir', 'borrar']

Introducción al testing con Jest

Un test comprueba automáticamente que tu código hace lo que esperas. Jest es la herramienta más usada. Se instala con npm y escribes pruebas que verifican una función.

npm install --save-dev jest

// suma.js
export function suma(a, b) { return a + b; }

// suma.test.js
import { suma } from './suma.js';

test('suma 2 + 3 = 5', () => {
  expect(suma(2, 3)).toBe(5);
});

Lanzas los tests con npx jest (o un script de npm). Si la función deja de funcionar en el futuro, el test te avisa al instante. Empieza testeando tus funciones puras: son las más fáciles y las que más te protegen. Para montar el entorno de Node necesario, mira la guía de Node.js y npm.

Preguntas frecuentes

¿Necesito patrones de diseño en proyectos pequeños?

No fuerces patrones donde no hacen falta: en un script pequeño, sobran. Su valor aparece cuando el código crece y necesitas orden. Conocerlos te ayuda a reconocer cuándo uno encaja de verdad.

¿Jest o Mocha?

Jest viene con todo integrado (aserciones, mocks, cobertura) y es el estándar actual, sobre todo con React. Mocha es más modular y flexible, pero requiere configurar más piezas. Para empezar, Jest.

¿Qué es una función pura?

Una que, con las mismas entradas, siempre devuelve la misma salida y no modifica nada de fuera (no toca variables globales ni el DOM). Son predecibles y facilísimas de testear.

Con esto ya escribes código de nivel profesional. Ponlo en práctica con los proyectos de JavaScript para practicar, y repasa el temario en la hoja de ruta de JavaScript.