Many of us make use of RxJS for its Operators and the Observable is treated as a foundation for that. further, in this blog, we are going get the understanding of Operators provided by RxJS but before digging into it lets under what is Operators.
What are the Operators?
Operators are basically pure functions, that transform information into the observables stream. it always creates new observables, often based on the current observables. It allows any complex code to be easily composed in a declarative manner.
we can also use multiple operators in one method using pipe() which is introduced in RxJS 5.5.x using Observable.pipe() method which is also known as a Channing of Operators.
So this is the small overview of operators, it is are of various types but we are discussing only a few out of them, which are majorly use in almost all the use cases below:
1) map(): map() operator is used for data stream transformation operator, it is used when we are dealing with arrays w.r.t Array.prototype .map. It passes each source value through a transformation function to get the corresponding output value.
for eg:
import { of } from ‘rxjs’;
import { map } from ‘rxjs/operators’;map(x => x * x)(of(1, 2, 3))
.subscribe((value) => console.log(`value: ${value}`));
Output:
value: 1
value: 4
value: 9
In the above example, the value is passed from the map one by one and multiply the value ‘x’ with ‘x’ and which results in a square of its number.
2) filter(): It is a data stream for filtration operator, also filters returns the boolean value. It is the well-known Array.prototype.filter method, this operator takes values from the source Observable.
for eg:
import { from } from ‘rxjs’;
import { filter } from ‘rxjs/operators’;//emit (1,2,3,4,5)
const source = from([1, 2, 3, 4, 5]);
//filter out non-even numbers
const example = source.pipe(filter(num => num % 2 === 0));
const subscribe = example.subscribe(value => console.log(`Even number: ${value}`));
Output:
“Even number: 2”
“Even number: 4”
In the above example, using filter operator it filters all the even numbers out of observables.
3) SwitchMap(): SwitchMap is another transformation operator. SwitchMap from one stream to another, It emitting values from the most recently projected Observables. Basically, in other words, it subscribes to the new observables from previous observables.
This works perfectly for scenarios like typeaheads where you are no longer concerned with the response of the previous request when a new input arrives.
for eg:
import { of } from ‘rxjs’;
import { map } from ‘rxjs/operators’;Rx.Observable.of(‘enter_url’)
.switchMap(url => this.http.get(url));
In the above example, Observable produces an URL string, after that HTTP service is invoked with this URL.
4) take(): take an operator returns the first N values observed and complete stream. It is also another filteration operator.
for eg:
import { interval } from ‘rxjs’;
import { take } from ‘rxjs/operators’;const intervalCount = interval(1000);
const takeFive = intervalCount.pipe(take(5));
takeFive.subscribe(x => console.log(x));
Output:
0, 1, 2, 3, 4
The above example will take only the first five elements after every 5 seconds with the 1-second interval for five seconds.
5) skip(): The skip operator skips first N values observed then continuous to emit any additional values. It is also another filteration operator, often used with replay/behavior subject to skip unwanted values.
for eg:
import { subject } from ‘rxjs/Subject’;
import { BehaviorSubject } from “rxjs/BehaviorSubject”;const subject = new behaviourSubject(null);
subject.pipe(skip(2).subscribe(value => console.log(value);subject.next(1);
subject.next(2);
subject.next(3);
subject.next(4);
The above example will skip the first two values emits from the observables.
Output:
3
4
6) distinctUntilChanged(): This operator will only emit distinct values from the source, It allows comparator function to be used to determine uniqueness. under the hood, it uses strict equality check by default if no comparator provided.
for eg:
import { of } from ‘rxjs’;
import { distinctUntilChanged } from ‘rxjs/operators’;of(1, 1, 2, 2, 2, 1, 1, 2, 3, 3, 4).pipe(
distinctUntilChanged(),
)
.subscribe(x => console.log(x));
Output:
1,2,1,2,3,4
The above example results in all the unique elements which are possible with this operator instead of iterating and comparing the elements.
Conclusion: I hope after reading this blog, you will get the basic understanding of operators of Rxjs which is commonly used in every scenario or use case.
Thanks for reading!!!
