top of page

What is RsJS? and its Operators

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:

  1. Static Operators: The static operators are generally used to create observables. These types of operators can be found mainly under the creation operators.

  2. 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.

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.

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

www.thetechplatform.com

0 comments
bottom of page