Operators are the important part of RxJS. RxJS provides a huge collection of operators. There are over a 100+ operators in RxJS that you can use with observables. An operator is a pure function that takes a observable as an input and provide the output in also in the form of an observable.
In simple words, we can say that operators are simply methods that can be used with Observables or Subjects of RxJS. RxJS operators facilitate us to change the original observable in some manner and return a new observable. The operators do not change the existing observable. They simply modify it and return a new one. Operators are known as the type of functions that do not modify the variables outside of its scope. There are mainly two types of RxJS operators:
Static Operators: The static operators are generally used to create observables. These types of operators can be found mainly under the creation operators.
Instance Operators: The instance operators are methods on observable instances. These are used to account the majority of RxJS operators that we have used.
How to work with Operator?
As we know that operators are pure functions which take in observable as the input and the provided output is also an observable.
We need a pipe() method to work with operators. Let’s see an example of pipe() function.
Syntax of using pipe() Method
In the above syntax, we have created a observable using of() method. This method takes in values 1, 2 and 3. On this observable, you can perform many operations using different types of operators using pipe() method as the above syntax.
Let’s see a working example of operators to understand the concept clearly. In this example, we are using a filter operator to filter the even numbers and then we will use a reduce() operator that will add all the even values and give the result.
After the execution of the program by using the node -r esm testrx.js command, we will see the following result.
You can see that 110 is the total of all the even values of the above numbers.
Let’s see another example of interval operator. This operator will create an Observable every time for the given time interval. In the following example, the program will return an observable after every 1000 millisecond.
Categorization of RxJS Operators
According to the official documentation for categories of RxJS operators, you can find the following categories of operators:
- Join or Combination
- Error handling
Following is the list of operators that can be used as creation operators:
|1.||ajax||The ajax operator is used to make an ajax request for the given URL.|
|2.||from||The from operator is used to create an observable from an array, an array-like object, a promise, an iterable object, or an observable-like object.|
|3.||fromEvent||The fromEvent operator is used to give output as an observable that is to be used on elements that emit an event for example buttons, clicks, etc.|
|4.||fromEventPattern||The fromEventPattern operator is used to create an observable from the input function that is used to register event handlers.|
|5.||interval||The interval operator is used to create an Observable for every time for the given time interval.|
|6.||of||The of operator is used to take in the arguments passed and convert them to observable.|
|7.||range||The range operator is used to create an Observable that gives you a sequence of numbers based on the range provided.|
|8.||throwError||The throwError operator is used to create an observable that notifies an error.|
|9.||timer||The timer operator is used to create an observable that emits the value after the timeout and the value will keep increasing after each call.|
|10.||iif||The iif operator is used to decide which Observable will be subscribed.|
Following is the list of operators that can be used as mathematical operators:
|1.||count||The count operator is used to take an observable with values and convert it into an observable that gives a single value.|
|2.||max||The max method is used to take an observable with all values and return an observable with the maximum value from the list.|
|3.||min||The min method is used to take an observable with all values and return an observable with the minimum value from the list.|
|4.||reduce||In reduce operator, an accumulator function is used on the input observable. It returns the accumulated value in an observable form, with an optional seed value passed to the accumulator function.|
So, the reduce function takes two arguments, one accumulator function, and second the seed value.
Following is the list of operators that can be used as join operators:
|1.||concat||The concat operator is used to sequentially emit the Observable given as input and proceed to the next one.|
|2.||forkJoin||The forkJoin operator is used to take in an array or dict object as an input and wait for the observable to complete and return the last values emitted from the given observable.|
|3.||merge||The merge operator is used to take in the input observable and emit all the values from the observable and emit one single output observable.|
|4.||race||The race operator is used to return an observable that will be a mirror copy of the first source observable.|
Following is the list of operators that can be used as transformation operators:
|1.||buffer||The buffer operator is used to be operated on an observable and take in argument as an observable. It starts buffering the values emitted on its original observable array and emits when the observable taken as an argument, emits. Once the observable taken as arguments emits, the buffer is reset and starts buffering again on original till the input observable emits, and the same process repeats itself.|
|2.||bufferCount||The buffercount operator is used to collect the values from the observable on which it is called and emit the same when the buffer size is given to buffercount matches.|
|3.||bufferTime||The bufferTime operator is similar to bufferCount. It is used to collect the values from the observable on which it is called and emit the bufferTimeSpan. It takes in 1 argument, i.e., bufferTimeSpan.|
|4.||bufferToggle||The bufferToggle operator is used to take two arguments, openings and closingSelector. The opening arguments are subscribable or a promise to start the buffer. The second argument closingSelector is again subscribable or promises an indicator to close the buffer and emit the values collected.|
|5.||bufferWhen||The bufferWhen operator is used to give the values in the array form, it takes in one argument as a function that will decide when to close, emit and reset the buffer.|
|6.||expand||The expand operator is used to take in a function as an argument applied on the source observable recursively and on the output observable. The final value is observable.|
|7.||groupBy||Te groupBy operator is used to group the output according to specific conditions, and these group items are emitted as GroupedObservable.|
|8.||map||In the map operator’s case, a project function is applied on each value on the source Observable, and the same output is emitted as an Observable.|
|9.||mapTo||In the mapTo operator, a constant value is given as output along with the Observable every time the source Observable emits a value.|
|10.||mergeMap||In the mergeMap operator, a project function is applied on each source value, and the output of it is merged with the output Observable.|
|11.||switchMap||The switchMap operator is used to apply a project function on each source value. The output of it is merged with the output Observable, and the value given is the most recent projected Observable.|
|12.||window||The window operator is used to take an argument windowboundaries which is an observable and give back a nested observable whenever the given windowboundaries emits.|
Following is the list of operators that can be used as filtering operators:
|1.||debounce||In the debounce operator, a value is emitted from the source Observable after a while, and the emission is determined by another input given as Observable or promise.|
|2.||debounceTime||The debounceTime operator is used to emit value from the source observable only after the time is complete.|
|3.||distinct||This operator is used to give all the values from the source observable that are distinct compared with the previous values.|
|4.||elementAt||This operator is used to give a single value from the source observable based upon the given index.|
|5.||filter||This operator is used to filter the values from source Observable based on the predicate function given.|
|6.||first||The first operator is used to give the first value emitted by the source Observable.|
|7.||last||The last operator is used to give the last value emitted by the source Observable.|
|8.||ignoreElements||The ignoreElements operator is used to ignore all the values from the source Observable and only execute calls to complete or error callback functions.|
|9.||sample||The sample operator is used to give the most recent value from the source Observable, and the output will depend upon the argument passed to it emits.|
|10.||skip||The skip operator is used to give back an observable that will skip the first occurrence of count items taken as input.|
|11.||throttle||The throttle operator is used to give output and ignore values from the source observable for the time determined by the input function taken as an argument, and the same process will be repeated.|
Following is the list of operators that can be used as utility operators:
|1.||tap||The tap operator contains the output, same as the source observable, and it can be used to log the values to the user from the observable.|
|2.||delay||The delay operator is used to delay the values emitted from the source observable based on the timeout given.|
|3.||delayWhen||The delayWhen operator is used to delay the values emitted from the source observable based on the timeout from another observable taken as input.|
|4.||observeOn||The observeOn operator is based on the input scheduler. It is used to reemit the notifications from the source observable.|
|5.||subscribeOn||The subscribeOn operator helps to asynchronous subscribes to the source observable based on the scheduler taken as input.|
|6.||timeInterval||The timeInterval operator is used to return an object containing current value, and the time elapsed between the current and previous value calculated using the scheduler input.|
|7.||timestamp||The timestamp operator is used to return the timestamp along with the value emitted from the source observable. It tells about the time when the value was emitted.|
|8.||timeout||The timeout operator is used to throw an error if the source observable does not emit a value after the given timeout.|
|9.||toArray||The toArray operator is used to accumulate all the source values from the observable and provide their outputs as an array when the source completes.|
Following is the list of operators that can be used as conditional operators:
|1.||defaultIfEmpty||The defaultIfEmpty operator is used to return a default value if the source observable is empty.|
|2.||every||The every operator is used to return an observable based on the input function, which satisfies the condition on each of the values on source observable.|
|3.||find||The find operator is used to return the observable when the source observable’s first value satisfies the condition for the predicate function taken as input.|
|4.||findIndex||The findIndex operator is based on the input schedule. It is used to reemit the notifications from the source observable.|
|5.||isEmpty||The isEmpty operator gives the output “True” if the input observable goes for complete callback without emitting any values and “False” if the input observable emits any values.|
Following is the list of operators that can be used as multicasting operators:
|1.||multicast||A multicast operator shares the single subscription created with other subscribers. The params that multicast takes in is a subject or a factory method that returns a ConnectableObservable that has a connect method. The connect method is called to subscribe.|
|2.||publish||The publish operator is used to give back ConnectableObservable and use connect method to subscribe to the observables.|
|3.||publishBehavior||The publishBehaviour makes use of BehaviourSubject, and returns ConnectableObservable. The connect method is used to subscribe to the observable created.|
|4.||publishLast||The publishBehaviour operator makes use of AsyncSubject, and returns ConnectableObservable. The connect method is used to subscribe to the observable created.|
|5.||publishReplay||The publishReplay operator uses behavior subject where it can buffer the values, replay the same to the new subscribers, and return ConnectableObservable. The connect method is used to subscribe to the observable created.|
|6.||share||The share operator is an alias for a multicast operator. The only difference is that you don’t have to called the connect method manually to start the subscription.|
Error Handling Operators
Following is the list of operators that can be used as error handling operators:
|1.||catchError||The catchError operator is used to take care of catching errors on the source observable by returning a new observable or an error.|
|2.||retry||The retry operator is used to take care of retrying back on the source observable if there is an error. The retry is done according to the given input count.|