As per the official website of RxJS, it is defined as a library for composing asynchronous and event-based programs by using observable sequences. It provides one core type, the Observable, satellite types (Observer, Schedulers, Subjects) and operators inspired by Array#extras (map, filter, reduce, every, etc.) to allow handling asynchronous events as collections.
RsJS Operators
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.
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.
Categories of Operators
You can find the following categories of operators:
Creation
Mathematical
Join or Combination
Transformation
Filtering
Utility
Conditional
Multicasting
Error handling
Boolean
Aggregate
Creation Operators
Operators | Description |
Ajax | The ajax operator is used to make an ajax request for the given URL. |
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. |
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. |
fromEventPattern | The fromEventPattern operator is used to create an observable from the input function that is used to register event handlers. |
interval | The interval operator is used to create an Observable for every time for the given time interval. |
of | The of operator is used to take in the arguments passed and convert them to observable. |
range | The range operator is used to create an Observable that gives you a sequence of numbers based on the range provided. |
throwError | The throwError operator is used to create an observable that notifies an error. |
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. |
iif | The iif operator is used to decide which Observable will be subscribed. |
Mathematical Operators
count | The count operator is used to take an observable with values and convert it into an observable that gives a single value. |
max | The max method is used to take an observable with all values and return an observable with the maximum value from the list. |
min | The min method is used to take an observable with all values and return an observable with the minimum value from the list. |
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. |
Join Operators
concat | The concat operator is used to sequentially emit the Observable given as input and proceed to the next one. |
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. |
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. |
race | The race operator is used to return an observable that will be a mirror copy of the first source observable. |
Transformation Operators
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. |
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. |
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. |
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. |
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. |
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. |
groupBy | The groupBy operator is used to group the output according to specific conditions, and these group items are emitted as GroupedObservable. |
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. |
mapTo | In the mapTo operator, a constant value is given as output along with the Observable every time the source Observable emits a value. |
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. |
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. |
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. |
Filtering Operators
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. |
debounceTime | The debounceTime operator is used to emit value from the source observable only after the time is complete. |
distinct | This operator is used to give all the values from the source observable that are distinct compared with the previous values. |
elementAt | This operator is used to give a single value from the source observable based upon the given index |
filter | This operator is used to filter the values from source Observable based on the predicate function given. |
first | The first operator is used to give the first value emitted by the source Observable. |
last | The last operator is used to give the last value emitted by the source Observable. |
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. |
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. |
skip | The skip operator is used to give back an observable that will skip the first occurrence of count items taken as input. |
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. |
Utility Operators
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. |
delay | The delay operator is used to delay the values emitted from the source observable based on the timeout given. |
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. |
observeOn | The observeOn operator is based on the input scheduler. It is used to reemit the notifications from the source observable. |
subscribeOn | The subscribeOn operator helps to asynchronous subscribes to the source observable based on the scheduler taken as input. |
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. |
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. |
timeout | The timeout operator is used to throw an error if the source observable does not emit a value after the given timeout. |
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. |
Conditional Operators
defaultEmpty | The defaultIfEmpty operator is used to return a default value if the source observable is empty. |
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. | |
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. |
findIndex | The findIndex operator is based on the input schedule. It is used to reemit the notifications from the source observable. |
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. |
Multicasting Operators
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. |
publish | The publish operator is used to give back ConnectableObservable and use connect method to subscribe to the observables. |
publishBehavior | The publishBehaviour makes use of BehaviourSubject, and returns ConnectableObservable. The connect method is used to subscribe to the observable created. |
publishLast | The publishBehaviour operator makes use of AsyncSubject, and returns ConnectableObservable. The connect method is used to subscribe to the observable created. |
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. |
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
CatchError | The catchError operator is used to take care of catching errors on the source observable by returning a new observable or an error. |
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. |
retryWhen | ​ |
Features of RxJS
In RxJS, the following concepts takes care of handling the async task −
1. Observable
An observable is a function that creates an observer and attaches it to the source where values are expected, for example, clicks, mouse events from a dom element or an Http request, etc.
2. Observer
It is an object with next(), error() and complete() methods, that will get called when there is interaction to the with the observable i.e. the source interacts for an example button click, Http request, etc.
3. Subscription
When the observable is created, to execute the observable we need to subscribe to it. It can also be used to cancel the execution.
4. Operators
An operator is a pure function that takes in observable as input and the output is also an observable.
5. Subject
A subject is an observable that can multicast i.e. talk to many observers. Consider a button with an event listener, the function attached to the event using addlistener is called every time the user clicks on the button similar functionality goes for subject too.
6. Schedulers
A scheduler controls the execution of when the subscription has to start and notified.
Advantages of using RxJS
The following are the advantages of using RxJS −
RxJS can be used with other Javascript libraries and frameworks. It is supported by javascript and also with typescript. Few examples are Angular, ReactJS, Vuejs, nodejs etc.
RxJS is an awesome library when it comes to the handling of async tasks.RxJS uses observables to work with reactive programming that deals with asynchronous data calls, callbacks and event-based programs.
RxJS offers a huge collection of operators in mathematical, transformation, filtering, utility, conditional, error handling, join categories that makes life easy when used with reactive programming.
Disadvantages of using RxJS
The following are the disadvantages of using RxJS −
Debugging the code with observables is little difficult.
As you start to use Observables, you can end up your full code wrapped under the observables.
The Tech Platform