RxJS Operator – From

Standard
Spread the love

RxJS is filled with rich set of functions – known as operators. But its easy to get lost if you are not familiar with Functional programming. With this in mind, I started creating a series of videos on RxJS. To begin with, we start with From operator.

RxJS – from

Observable

There are two options when you share a data between programs. Either using pull or push based approach. Generally, we use functions to modularise the code and return values. These values are either immediate result of the computation or it could be a promise to return values in future.

The limitation of Promise is that it either results success or error. There is no way to return values over a period of time. This limitation can be overcome with Observable. The approach requires observable to be observed by calling program.

RxJS comes with rich set of functions to create observables. In this article we will start with from.

Video version of the Article

RxJS Operator – from

Following examples assume that we are using Angular project to play around RxJS. Angular is not pre-requisite to run RxJS project, but we are using it for demonstration. Refer below example

import {from} from ‘rxjs’;

from([10, 15, 25, 30]).subscribe(
val=> console.log(val)
);

from will iterate over the array and emit that as a value. The example might look simple, but from function has many hidden functionalities. It classifies the input passed to it – Whether its a Promise, array, object or a single value? Based on the classification from will process the contents and then adjust the Observable behavior. In above case each value is printed separately on console. (To see the effect, just remove all the values from the array and re-run the program)

This also highlights an interesting behavior of from. If you pass undefined or empty array, from will simply do nothing. So be careful of this behavior.

Leave a Reply