Sebastian Gomez

Feb 23, 2022

Updated: Jun 24, 2026

Implementando of como operador en Observables

En este post vamos a aumentar el número de operadores que podemos implementar y usar dentro de un Observable creando el operador of. Básicamente, será un operador de generación de observables, de manera que podamos convertir datos en observables.

Anteriormente, exploramos la implementación del operador filter y el operador map en observables, implementándolos desde cero de manera similar a como lo hace RxJS. Esto nos ayudó a entender un poco más la filosofía y el funcionamiento interno de los observables. Si todavía no los has leído, te recomiendo revisar esos dos posts de la serie antes de continuar, porque seguiremos la misma idea de reconstruir un operador desde cero.

Ejemplo de uso del operador of

Antes de implementarlo, veamos cómo se usaría. Empecemos por la forma moderna de RxJS, que es la que encontrarás hoy en la mayoría de proyectos. En RxJS actual, of es una función independiente que importas directamente desde la librería.

// Forma moderna de RxJS: of es una funcion independiente que se importa de 'rxjs'
import { of } from 'rxjs';

// Crea un Observable a partir del valor 5 usando la funcion of
const fancyObservable = of(5);

// Se suscribe al Observable e imprime cada valor emitido
const fancySubscription = fancyObservable.subscribe({
  next(e) {
    console.log(e);
  },
});

Nota: La forma Observable.of(5) que verás a continuación es la API estática anterior a RxJS 6 (2018), que ya fue eliminada de la librería. En este post la usamos a propósito porque vamos a reimplementar el operador desde cero como un método estático de nuestra propia clase Observable, con fines educativos. El equivalente vigente en RxJS es la función independiente of(...) que viste arriba.

Con esa aclaración, así se vería usando nuestra reimplementación estática:

// Crea una constante "fancyObservable" que contiene un Observable creado con el metodo "of" y el valor 5 como argumento
// Nota: aqui of es un metodo estatico de nuestra propia clase Observable (reimplementacion educativa)
const fancyObservable = Observable.of(5);

// Crea una constante "fancySubscription" que contiene una suscripcion al "fancyObservable"
const fancySubscription = fancyObservable.subscribe({
  // Define un objeto con un metodo "next" que acepta un argumento "e"
  next(e) {
    // Imprime en la consola el valor del argumento "e" cuando el metodo "next" es llamado
    console.log(e);
  },
});

Te estarás preguntando, ¿por qué es esto importante? ¿Qué sentido tiene convertir un dato ya desenvuelto en un Observable? La respuesta más inmediata es porque, a veces, necesitas combinar datos "puros" con datos que provienen de Observables. Más adelante veremos maneras de combinar observables, pero no tenemos forma de combinar datos "puros" con observables sin primero llevar los datos a Observables.

Implementando el operador of

Para implementar el operador of, vamos a crearlo de manera estática, es decir, esta función va a estar ligada al prototipo (prototype) sin importar si existe o no una instancia de un Observable.

// Define un metodo estatico "of" dentro de una clase (por ejemplo, la clase "Observable"), que acepta un argumento "value"
static of(value) {
  // Retorna una nueva instancia de la clase "Observable" (o la clase que contiene este metodo estatico)
  return new Observable(function subscribe(observer) {
    // Llama al metodo "next" del objeto "observer" y le pasa el argumento "value" que fue proporcionado a "of"
    observer.next(value);
    // Llama al metodo "complete" del objeto "observer" para indicar que no se emitiran mas valores
    observer.complete();
    // Retorna un objeto que contiene un metodo "unsubscribe"
    return {
      // Define el metodo "unsubscribe" que, en este caso, no realiza ninguna accion
      unsubscribe() {},
    };
  });
}

Nota: El of real de RxJS acepta múltiples valores, por ejemplo of(1, 2, 3), y los emite uno tras otro. Nuestra versión didáctica emite un único valor para mantener el ejemplo simple. Como ejercicio, más adelante podrías extenderla para que reciba varios argumentos y los recorra emitiendo cada uno.

Eso es todo

Espero que este post te sea de utilidad y lo puedas aplicar a algún proyecto que tengas en mente, o que simplemente te haya ayudado a entender la naturaleza de los operadores sobre observables.

Resumen de lo aprendido

• Aprendimos a crear el operador of para convertir datos en observables.
• Vimos que el operador of es útil cuando necesitamos combinar datos "puros" con datos que provienen de Observables.
• Implementamos el operador of de manera estática en el prototipo (prototype) de un Observable, recordando que en RxJS moderno of es una función independiente que se importa con import { of } from 'rxjs'.

Ejercicios propuestos

1. Implementa el operador of en un proyecto que estés desarrollando y analiza cómo mejora la combinación de datos "puros" y observables.
2. Extiende tu versión de of para que acepte varios argumentos, igual que el of real de RxJS, y los emita uno por uno.
3. Experimenta con otros operadores en Observables, como concat, merge o switchMap, y analiza cómo funcionan en conjunto con el operador of.
4. Crea un pequeño proyecto que utilice el operador of para realizar operaciones asíncronas, como llamadas a una API.

Si lograste implementarlo, quieres añadir alguna otra funcionalidad o tienes alguna duda, no dudes en dejarme un comentario en la parte de abajo. Recuerda que si te gustó este post, también puedes compartirlo usando los links a las redes sociales en la parte de abajo. ¡Hasta la próxima!