RxJS transformation operators

In this article, I am going to discuss the subtle differences, but varied implementations and use cases of the operators mergeMap, SwitchMap, and ConcatMap.

If you are hearing these operators for the first time, I suggest you to follow the below learning path:
Start with concat, merge, combineLatest
Then, proceed to concatAll, combineAll, SwitchAll
and finally look at concatMap, mergeMap, SwitchMap

MergeMap —

• Takes a function as input which returns an observable for each emission from the source observable. This observable is termed as the inner observable.
• Contrast to the rest of the operators (switchMap, concatMap, and exhaustMap), mergeMap maintains as many active inner subscriptions as possible for each emission of the source observable.
• The values emitted by the inner observables are immediately emitted by the resultant observable, provided the resultant observable is subscribed to.
• The resultant observable is complete once all the inner observables are complete.

ConcatMap —

• Takes a function as input which returns an observable for each emission from the source observable. This observable is termed as the inner observable.
• Use this operator when the order of inner observables subscriptions matter. There will be always one active subscription at a time.
• The subscription of an inner observable happens when the previous inner observable is complete.
• The values emitted by the inner observable are immediately emitted by the resultant observable, provided the resultant observable is subscribed to.
• The resultant observable is complete once all the inner observables are complete.

SwitchMap—

• Takes a function as input which returns an observable for each emission from the source observable. This observable is termed as the inner observable.
• Use this operator when you no longer are concerned about current subscription when a new value from the source is emitted.
• In that case, the subscription is cancelled and the new inner observable is subscribed. Hence, the name switch.
• switchMap maintains only one inner active subscription at a time and the values emitted by this inner observable are immediately emitted by the resultant.

Conclusion —

All the operators discussed above create an inner observable for each source value. But, the number of active subscriptions, order and handling of subscriptions varies among each operator.

Also, each operator takes another function called selector function as a second parameter. This is useful when you wish to combine the source value with the inner observable value. You can find more about this in the referenced article at the end.

Thank you. I hope that this article enlightened you about some of the concepts of most commonly used RxJs operators.

P.S : switchAll inner functionality is the same as that of switchMap. All the map operators(switchMap,mergeMap,concatMap) are consolidated forms of their corresponding all operators.

If you are really interested in digging into switchMap operator, I suggest you to refer to the article below.

• Deep Dive Into The RxJs switchMap Operator — How Does it Work?
• SwitchMap