"Of" vs "From" - How to use each and what is the difference?

#rxjs #angular #webdev #javascript

Overview

This article will dive into the use cases for the "of" and "from" RxJs Operators. We will cover what each do individually to allow you to find their differences. Finally, examples will be given for each operator to further help you apply them to your own work.

Create A Sandbox App

Go to Stackblitz and start a new "RxJs" project. Or you can fork my Stackblitz here to allow you to follow along and use RxJs without any problems.

"Of" RxJs Operator

The RxJs Operator "of" converts the argument(s) given to an Observable. It is pretty simple in this regard. We can know that whatever is given to the operator will be returned, just wrapped in an Observable. Each value given as an argument will be separately emitted from the Observable. Some example use cases for "of":

const str = 'Hello World';
const str$ = of(str);
str$.subscribe((result) => console.log({ result }));
// Will emit a single item with the type of string
// result: "Hello World"

const arr = [1, 2, 3];
const arr$ = of(arr);
arr$.subscribe((result) => console.log({ result }));
// Will emit a single item with the type of Array<number>
// result: [1,2,3]

const arr2 = [4, 5, 6];
const arr2$ = of(arr, arr2);
arr2$.subscribe((result) => console.log({ result }));
// Will emit a single two values each with the type of Array<number>
// result: [1,2,3]
// result: [4,5,6]

const imAPromise = fetch('https://pokeapi.co/api/v2/pokemon/ditto').then(
  (response) => response.json()
);
const imAPromise$ = of(imAPromise);
imAPromise$.subscribe((result) => console.log({ result }));
// Will emit a single item with the type of Promise
// result: Promise

function* iterator() {
  const values = ['iterator-1', 'iterator-2', 'iterator-3'];
  for (let i = 0; i < values.length; i++) {
    yield values[i];
  }
}

const imAnIterable = iterator();
const imAnIterable$ = of(imAnIterable);
imAnIterable$.subscribe((result) => console.log({ result }));
// Will emit a single item with the type of Object
// result: Object

"For" RxJs Operator

The RxJs Operator "from" is very similar to the operator "of". It also converts the argument to an Observable. The main differences are that this operator can only take one argument to for the value of the observable. The second argument to this operator is for the scheduler. Another notable difference is that this allows a promise, array, or iterable like object to be converted to an Observable. Each of these use cases can be seen below.

*** Note the difference in how each handles a string and an array ***

const str = 'Hello World';
const str$ = from(str);
str$.subscribe((result) => console.log({ result }));
// Will emit each character from the given string
// result: "H"
// result: "e"
// result: "l"
// result: "l"
// result: "o"
// result: " "
// result: "W"
// result: "o"
// result: "r"
// result: "l"
// result: "d"

const arr = [1, 2, 3];
const arr$ = from(arr);
arr$.subscribe((result) => console.log({ result }));
// Will emit each value within the array that was given as input to the operator.
// result: 1
// result: 2
// result: 3

const imAPromise = fetch('https://pokeapi.co/api/v2/pokemon/ditto').then(
  (response) => response.json()
);
const imAPromise$ = from(imAPromise);
imAPromise$.subscribe((result) => console.log({ result }));
// Will emit the return value of the endpoint that we called to get the information about "Ditto".
// result: This will now be an object of information about the pokemon "Ditto".

function* iterator() {
  const values = ['iterator-1', 'iterator-2', 'iterator-3'];
  for (let i = 0; i < values.length; i++) {
    yield values[i];
  }
}

const imAnIterable = iterator();
const imAnIterable$ = from(imAnIterable);
imAnIterable$.subscribe((result) => console.log({ result }));
// Will emit each value that we gave to the iterator item within the function
// result: "iterator-1"
// result: "iterator-2"
// result: "iterator-3"

Conclusion

These two operators function very similarly, so it could be easy to get the two confused. In some cases, either may work. Being aware of how each handles input types differently can allow you to leverage the full advantages of RxJs to be more efficient in your development. Want to see live examples? Check out this Stackblitz!