of – RxJS Reference

of

Q: What does the of operator do in RxJS?

The of operator in RxJS emits its arguments as values in sequence and then completes the stream. It creates an observable from the arguments you pass directly, so you can return a plain value where an observable is expected or start an observable chain. Each argument is emitted as the same type it was passed, without conversion or flattening.

Q: What is the difference between of and from in RxJS?

The main difference is that of emits each argument unchanged, while from converts its input into an observable sequence. With of, an Array, a Promise or an iterable passed as an argument is emitted as that same type and is not flattened into individual values. from does flatten these inputs, so use of when you want to emit the value itself and from when you want to iterate over its items.

Q: Does of flatten an array into separate emissions in RxJS?

No, of does not flatten an Array, array-like object, Promise or iterable into a sequence of its items. Each argument is emitted as the same type it was passed, so of([1, 2, 3]) emits one Array value. If you need each element emitted separately, use from instead, which converts these inputs into an observable sequence of values.

Q: How do I emit values asynchronously with the of operator in RxJS?

To emit items asynchronously with of, pass a scheduler to the operator as an additional argument. The scheduler controls when the values and the complete notification are delivered, so emissions no longer have to happen inline. Use this approach when a consumer should receive values on a scheduled tick rather than immediately.

Q: How do I return a cached value or fetch data with of and mergeMap in RxJS?

Inside mergeMap, return of(cached) when a cached value exists, which gives an observable where an observable is expected, and return a fromFetch(url) chain otherwise. This lets each URL either emit immediately from the cache or make a request. Pipe the fetch result through switchMap(response => response.json()) to parse the body, then subscribe to the outer stream to receive every value.

of is used to emit arguments as values in a sequence and then complete the stream.

Unlike from, it does not do any flattening or conversion and emits each argument as the same type it receives as arguments. If you pass it an Array (including array-like objects), a Promise and an iterable object it won’t be flattened into an observable sequence of values. Those arguments will be emitted as the same type, i.e. an Array, a Promise or an Iterable object without any conversion.

If you need to emit items asynchronously, the operator takes a scheduler as the second argument.

of operator works in the following way:

Create an observable instance
Take the next argument in queue and send it to the observer
When there are no more values in the data source, send the complete notification to the observer

Usage

of is commonly used when you simply need to return a value where an observable is expected or start an observable chain. This is a common need when using combination operators like mergeMap. Here’s an example that checks if there’s a cached value for the URL and if so, returns the value immediately, otherwise it makes a request:

from(urls).pipe(
   mergeMap((url) => {
       const cached = cache[url];
       // here we use `of` to create an observable from a plain value
       if (cached) return of(cached);
       return fromFetch(url).pipe(switchMap(response => response.json()));
   })
).subscribe((value) => console.log(value));

Check this section to learn how mergeMap operator works.

Playground

Additional resources

Official documentation

Frequently asked questions

What does the of operator do in RxJS?

The of operator in RxJS emits its arguments as values in sequence and then completes the stream. It creates an observable from the arguments you pass directly, so you can return a plain value where an observable is expected or start an observable chain. Each argument is emitted as the same type it was passed, without conversion or flattening.

What is the difference between of and from in RxJS?

The main difference is that of emits each argument unchanged, while from converts its input into an observable sequence. With of, an Array, a Promise or an iterable passed as an argument is emitted as that same type and is not flattened into individual values. from does flatten these inputs, so use of when you want to emit the value itself and from when you want to iterate over its items.

Does of flatten an array into separate emissions in RxJS?

No, of does not flatten an Array, array-like object, Promise or iterable into a sequence of its items. Each argument is emitted as the same type it was passed, so of([1, 2, 3]) emits one Array value. If you need each element emitted separately, use from instead, which converts these inputs into an observable sequence of values.

How do I emit values asynchronously with the of operator in RxJS?

To emit items asynchronously with of, pass a scheduler to the operator as an additional argument. The scheduler controls when the values and the complete notification are delivered, so emissions no longer have to happen inline. Use this approach when a consumer should receive values on a scheduled tick rather than immediately.

How do I return a cached value or fetch data with of and mergeMap in RxJS?

Inside mergeMap, return of(cached) when a cached value exists, which gives an observable where an observable is expected, and return a fromFetch(url) chain otherwise. This lets each URL either emit immediately from the cache or make a request. Pipe the fetch result through switchMap(response => response.json()) to parse the body, then subscribe to the outer stream to receive every value.

Share this post