Sebastian Gomez

Feb 23, 2022

Updated: Apr 21, 2025

Entendiendo el patrón observador (Observer Pattern) en Javascript

En este post, aprenderemos cómo implementar el patrón observer en Javascript y en qué situaciones lo podemos usar. 💡

El patrón observador es uno de los patrones de diseño de software más usado en Javascript. De él se extienden importantes aplicaciones que pueden ayudar a definir mejores arquitecturas en aplicaciones web, por lo que su uso y estudio es altamente recomendado. 📚

1. El patrón observador se define como un patrón de comportamiento en la programación orientada a objetos, siendo responsable de la comunicación entre objetos. 🔄
2. Puedes encontrarlo como el patrón publicador-subscriptor o modelo-patrón, que nos da una idea básica de lo que hace. 📬
3. En términos simples, este patrón permite la notificación a objetos (subscriptores u observadores) al cambio de otro objeto (publicador). 🚀

Para implementar el patrón observador en Javascript, comenzamos creando una clase llamada Publicador que contenga los métodos subscribe(), unsubscribe() y notify(). Aquí tienes el código de ejemplo:

// Define la clase "Publicador"
class Publicador {
  // Constructor de la clase "Publicador"
  constructor() {
    // Crea una propiedad "subscriptors" para almacenar la lista de subscriptores
    this.subscriptors = [];
  }

  // Método "subscribe" para agregar un nuevo subscriptor a la lista de subscriptores
  subscribe(subscriptor) {
    // Agrega el "subscriptor" pasado como argumento al final de la lista "subscriptors"
    this.subscriptors.push(subscriptor);
  }

  // Método "unsubscribe" para eliminar un subscriptor de la lista de subscriptores
  unsubscribe(subscriptor) {
    // Filtra la lista de subscriptores, manteniendo solo aquellos que no coincidan con el "subscriptor" pasado como argumento
    this.subscriptors = this.subscriptors.filter(
      (item) => item !== subscriptor
    );
  }

  // Método "notify" para notificar un evento a todos los subscriptores de la lista
  notify(event) {
    // Itera sobre cada elemento de la lista de subscriptores
    this.subscriptors.forEach((item) => {
      // Llama al método "call" en cada subscriptor, pasando el objeto "this" como contexto y el "event" como argumento
      item.call(this, event);
    });
  }
}

Ahora, imaginemos que usaremos esta definición de Publicador para un periódico que regularmente publica nuevas ediciones. 📰

const periodico = new Publicador();

Pensemos en los clientes (subscriptores), que necesitarán saber cuándo llega una nueva versión del periódico. Inicialmente, los clientes son funciones:

// Define la función "Observer" que acepta un argumento "edicion"
function Observer(edicion) {
  // Imprime un mensaje en la consola, informando que llegó una nueva edición con el nombre del argumento "edicion"
  console.log("LLegó una nueva edición con el nombre de: " + edicion);
}

// Utiliza el método "subscribe" del objeto "periodico" para suscribir la función "Observer" como subscriptor
periodico.subscribe(Observer);

// Utiliza nuevamente el método "subscribe" del objeto "periodico" para suscribir otra vez la función "Observer" como subscriptor
// (en este caso, "Observer" será notificado dos veces por cada evento)
periodico.subscribe(Observer);

// Utiliza el método "notify" del objeto "periodico" para notificar a todos los subscriptores, en este caso, las dos instancias de "Observer"
// Pasando como argumento el string "Nueva edicion"
periodico.notify("Nueva edicion");

Como un mejor acercamiento, podríamos definir una clase para los clientes que nos permita crear instancias de ella y tener un control más granular. Además, debemos definir un método específico para escuchar nuevas ediciones del periódico.

// Define la clase "Observador"
class Observador {
  // Constructor de la clase "Observador" que acepta un argumento "id"
  constructor(id) {
    // Asigna el valor del argumento "id" a la propiedad "id" del objeto
    this.id = id;
    // Imprime un mensaje en la consola, informando que se ha creado un subscriptor con el número de "id" pasado como argumento
    console.log("Se ha creado el subscriptor #: " + id);
  }
  // Método "buzon" que acepta un argumento "edicion"
  buzon(edicion) {
    // Imprime un mensaje en la consola, informando que el subscriptor con el "id" recibió una nueva edición con el nombre del argumento "edicion"
    console.log(
      "Subscriptor # " + this.id + " recibió una nueva edición: " + edicion
    );
  }
}

// Crea una nueva instancia de la clase "Subscriptor" con el argumento "1" y la asigna a la constante "subscriptor1"
const subscriptor1 = new Subscriptor(1);

// Crea una nueva instancia de la clase "Subscriptor" con el argumento "2" y la asigna a la constante "subscriptor2"
const subscriptor2 = new Subscriptor(2);

// Crea una nueva instancia de la clase "Subscriptor" con el argumento "3" y la asigna a la constante "subscriptor3"
const subscriptor3 = new Subscriptor(3);

De esta forma, podemos tener más control sobre los subscriptores y podemos suscribirlos y des-suscribirlos de mejor manera. 💼

El patrón observador es fácil de implementar en Javascript y su utilidad es casi inmediata. Con este patrón, podemos manejar de manera efectiva la comunicación entre objetos, manteniendo el código limpio y organizado. 🧹

🎯 Ejercicios para practicar

1. Implementa el patrón observador en una aplicación de mensajería instantánea, donde los usuarios se subscriben a un chat grupal y reciben notificaciones cuando hay nuevos mensajes. 📱
2. Crea un sistema de notificaciones de eventos para una aplicación de calendario, donde los usuarios puedan subscribirse a eventos y recibir recordatorios cuando estos estén próximos a realizarse. 📅
3. Diseña un sistema de monitoreo de temperatura para un conjunto de sensores, donde cada sensor es un observador y un controlador central es el publicador. Cuando la temperatura cambia en un sensor, el controlador es notificado y puede tomar decisiones en función de los cambios. 🌡️

📋 Resumen en 3 puntos

1. El patrón observador es un patrón de comportamiento en la programación orientada a objetos que facilita la comunicación entre objetos, permitiendo la notificación a objetos (subscriptores) al cambio de otro objeto (publicador). 📞
2. En Javascript, podemos implementar el patrón observador mediante clases y métodos como subscribe(), unsubscribe() y notify(). 👨‍💻
3. Utilizar el patrón observador en tus proyectos te permitirá tener un control más granular y mantener tu código limpio y organizado. 🌟

Esperamos que este post te haya sido útil y te ayude a aplicar el patrón observador en tus proyectos futuros. Si tienes alguna duda, sugerencia o quieres compartir tus experiencias implementando este patrón, no dudes en dejarnos un comentario. ¡Buena suerte en tus proyectos! 🚀