DEV Community

Artak Mkr
Artak Mkr

Posted on

Difference between mergeMap vs switchMap vs concatMap vs exhaustMap

Hi, in your interview as an Angular developer, you might be asked several questions about RxJs operators and their differences.

One of the most common questions is "What is the difference between mergeMap vs switchMap vs concatMap vs exhaustMap?"

Let's get into it and explain them in simple terms.

I will explain the difference in behavior using one simple example:



import { interval, take, tap, from } from 'rxjs';
import {
  switchMap,
  mergeMap,
  concatMap,
  exhaustMap,
} from 'rxjs/operators';

const mapOperators = [
  mergeMap,
  switchMap,
  concatMap,
  exhaustMap
];

const selectedMap = mapOperators[0]; // <- Change operator index here

const clicks$ = from(['First Click', 'Second Click', 'Third Click']).pipe(
  tap(console.log),
);

clicks$
  .pipe(
    selectedMap((click: number) =>
      interval(500).pipe(
        tap((intervalValue: number) =>
          console.log(
            `${click} Value: ${intervalValue}`
          )
        ),
        take(3)
      )
    )
  )
  .subscribe();



Enter fullscreen mode Exit fullscreen mode

In the code example, which you can experiment with on Stackblitz, you can see the imitation of 3 user clicks

Now, let's see what each of the operators will return

MergeMap

RxJs Merge Map



First Click
Second Click
Third Click
First Click Value: 0
Second Click Value: 0
Third Click Value: 0
First Click Value: 1
Second Click Value: 1
Third Click Value: 1
First Click Value: 2
Second Click Value: 2
Third Click Value: 2


Enter fullscreen mode Exit fullscreen mode

The mergeMap operator runs the emissions in parallel which is why you see



First Click Value: 0
Second Click Value: 0
Third Click Value: 0


Enter fullscreen mode Exit fullscreen mode

with value 0

SwitchMap

RxJs Switch Map



First Click
Second Click
Third Click
Third Click Value: 0
Third Click Value: 1
Third Click Value: 2



Enter fullscreen mode Exit fullscreen mode

The switchMap operator will cancel the previous one after each new click, in our case First Click will be canceled by Second Click and Second Click will be canceled by Third Click and as the result we will see Third Click Values



Third Click Value: 0
Third Click Value: 1
Third Click Value: 2


Enter fullscreen mode Exit fullscreen mode

ConcatMap

RxJs Concat Map



First Click
Second Click
Third Click
First Click Value: 0
First Click Value: 1
First Click Value: 2
Second Click Value: 0
Second Click Value: 1
Second Click Value: 2
Third Click Value: 0
Third Click Value: 1
Third Click Value: 2


Enter fullscreen mode Exit fullscreen mode

The concatMap operator will memorize all clicks and console.log them in the same order, in our case First Click, Second Click, Third Click as you see in the console



First Click Value: 0
First Click Value: 1
First Click Value: 2
Second Click Value: 0
Second Click Value: 1
Second Click Value: 2
Third Click Value: 0
Third Click Value: 1
Third Click Value: 2


Enter fullscreen mode Exit fullscreen mode

ExhaustMap

RxJs Exhaust Map



First Click
Second Click
Third Click
First Click Value: 0
First Click Value: 1
First Click Value: 2


Enter fullscreen mode Exit fullscreen mode

The exhaustMap operator will block the stream until First Click is complete and in our case Second Click and Third Click will be ignored



First Click Value: 0
First Click Value: 1
First Click Value: 2


Enter fullscreen mode Exit fullscreen mode

Now that you understand the differences between these operators, you can imagine the consequences of choosing the wrong one

Top comments (0)