30 días de JS con Teffcode

Aprende a implementar el patrón observer en JavaScript con un caso real de un newsletter. En una sesión de live coding, Tef mostró con claridad cómo modelar clases, manejar arrays y pasar pruebas en un Playground, destacando trucos esenciales con filter, forEach y console.log que todo dev debe dominar.

¿Qué es el patrón observer y cómo aplicarlo en un newsletter con JavaScript?

El patrón observer plantea un sujeto que notifica a sus observadores cuando hay cambios. Aquí, el sujeto es la clase Newsletter y los observadores son instancias de Subscriber. Cuando se publica un artículo, el newsletter debe avisar a cada suscriptor.

• Programación orientada a objetos: clase con atributos y métodos.
• Newsletter como sujeto: mantiene un array de suscriptores y envía actualizaciones.
• Suscriptor como observador: conoce su email y sabe “recibir” artículos.
• Artículo: objeto con propiedades title y content.

¿Qué responsabilidades tienen Newsletter y Subscriber?

• Newsletter: gestionar suscripción con subscribe, eliminación con unsubscribe y notificaciones con post.
• Subscriber: inicializar con email y exponer un método receive que imprime un mensaje.

¿Cómo se implementa paso a paso: subscribe, unsubscribe, post y receive?

La solución usa POO y métodos de array. Los puntos críticos son la mutación del estado y el uso correcto de filter.

• subscribe: agrega un suscriptor con push al array.
• unsubscribe: usa filter para crear un nuevo array sin el email dado y reasigna el resultado.
• post: itera con forEach y llama subscriber.receive(article).
• receive: imprime en consola con template literals que el suscriptor recibió el artículo.

Código de referencia en JavaScript:

fullscreen
class Newsletter {
  constructor() {
    this.subscribers = [];
  }

  subscribe(subscriber) {
    this.subscribers.push(subscriber);
  }

  unsubscribe(email) {
    this.subscribers = this.subscribers.filter(sub => sub.email !== email);
  }

  post(article) {
    this.subscribers.forEach(sub => sub.receive(article));
  }
}

class Subscriber {
  constructor(email) {
    this.email = email;
  }

  receive(article) {
    console.log(`El suscriptor ${this.email} ha recibido el artículo ${article.title}.`);
  }
}

Errores comunes y cómo evitarlos:

• Olvidar reasignar el resultado de filter: filter no muta, crea un nuevo array; reasigna a this.subscribers.
• Confiar en que forEach devuelva algo: forEach no retorna; úsalo solo para efectos (notificar).
• Mensajes en consola: usa template literals para interpolar email y title.

¿Qué consejos prácticos dio Tef sobre frameworks, portafolio y entrevistas?

Además del ejercicio, Tef compartió rutas y hábitos de aprendizaje que aceleran el crecimiento profesional.

¿Por dónde empezar con frameworks como React, Vue o Angular?

• Construye piezas pequeñas: una card con botón y un toast que aparece y se cierra.
• Domina fundamentos: POO, métodos de array, manejo del DOM y renderizado de datos.
• Elige cualquier framework y compara: JavaScript puro vs. React para entender responsabilidades.
• Mantén continuidad: retos como “treinta días de JavaScript” solidifican bases.

¿Cómo fortalecer portafolio y preparar entrevistas?

• Crea un portafolio en GitHub con proyectos claros y específicos.
• Enfócate: sé muy bueno en pocas cosas antes de abarcar más.
• Participa en comunidad: comparte, da charlas, practica pair programming.
• En entrevistas y live coding: disfruta el proceso, aprende de los errores y controla lo controlable.

Extra de Tef sobre diseño de interfaz:

• Sistemas de diseño: construir componentes y estilos en Figma con design tokens.
• Integración en código: documentar componentes en Storybook y llevar el Design System a JavaScript.

¿Te gustaría que añadamos pruebas extra del patrón observer o que llevemos este ejercicio a React con un estado global? Cuéntalo en los comentarios y comparte tu avance.