Angular - Difference between RxJS map, pluck, switchMap, mergeMap and exhaustMap

RxJS is a powerful library that provides a range of operators to work with asynchronous data streams. One of the most commonly used operators in RxJS is the map operator. The map operator allows you to transform the data emitted by an observable, and there are several different types of maps you can use. In this article, we will discuss the different types of RxJS maps and how they can be used in Angular.

1. map()

The map() operator is the most commonly used operator in RxJS. It allows you to transform the data emitted by an observable by applying a function to each item emitted. For example, if you have an observable that emits a stream of numbers, you can use the map() operator to transform those numbers into strings:

import { from } from 'rxjs';
import { map } from 'rxjs/operators';

const numbers$ = from([1, 2, 3, 4, 5]);

numbers$
  .pipe(
    map(num => `Number: ${num}`)
  )
  .subscribe(console.log);

Output:

Number: 1
Number: 2
Number: 3
Number: 4
Number: 5

In this example, the map() operator transforms the stream of numbers emitted by the observable into a stream of strings, by appending the string 'Number: ' to each number.

2. pluck()

The pluck() operator allows you to extract a specific property from each object emitted by an observable. For example, if you have an observable that emits a stream of objects with 'name' properties, you can use the pluck() operator to extract only the 'name' properties:

import { from } from 'rxjs';
import { pluck } from 'rxjs/operators';

const people$ = from([
  { name: 'John', age: 30 },
  { name: 'Mary', age: 25 },
  { name: 'Mike', age: 40 },
]);

people$
  .pipe(
    pluck('name')
  )
  .subscribe(console.log);

 

Output:

John
Mary
Mike

 

In this example, the pluck() operator extracts only the 'name' property from each object emitted by the observable, resulting in a stream of strings with the names.

3. switchMap()

The switchMap() operator allows you to switch to a new observable whenever a new item is emitted by the source observable. For example, if you have an observable that emits a stream of user IDs, you can use the switchMap() operator to switch to a new observable that fetches the user data for each ID:

import { fromEvent } from 'rxjs';
import { switchMap } from 'rxjs/operators';

const button = document.querySelector('button');

const buttonClick$ = fromEvent(button, 'click');

buttonClick$
  .pipe(
    switchMap(() => fetch('https://jsonplaceholder.typicode.com/users'))
  )
  .subscribe(console.log);

In this example, the switchMap() operator switches to a new observable that fetches the user data for each button click. The result is a stream of user data objects emitted by the new observable.

4. mergeMap()

The mergeMap() operator is similar to the switchMap() operator, but it merges the emissions of the inner observables instead of cancelling them out. For example, if you have an observable that emits a stream of user IDs, you can use the mergeMap() operator to merge the emissions of the observables that fetch user data for each ID:

import { fromEvent } from 'rxjs';
import { mergeMap } from 'rxjs/operators';

const button = document.querySelector('button');

const buttonClick$ = fromEvent(button, 'click');

buttonClick$
  .pipe(
    mergeMap(() => fetch('https://jsonplaceholder.typicode.com/users'))
  )
  .subscribe(console.log);

 

In this example, the mergeMap() operator merges the emissions of the observables that fetch user data for each button click, resulting in a stream of user data objects.

5. exhaustMap()

The exhaustMap() operator allows you to ignore new emissions from the source observable until the current inner observable completes. For example, if you have an observable that emits a stream of user IDs, you can use the exhaustMap() operator to ignore new button clicks until the inner observable that fetches user data for the current ID completes:

import { fromEvent } from 'rxjs';
import { exhaustMap } from 'rxjs/operators';

const button = document.querySelector('button');

const buttonClick$ = fromEvent(button, 'click');

buttonClick$
  .pipe(
    exhaustMap(() => fetch('https://jsonplaceholder.typicode.com/users'))
  )
  .subscribe(console.log);

In this example, the exhaustMap() operator ignores new button clicks until the inner observable that fetches user data for the current click completes. Once it completes, the next button click will trigger a new inner observable.

Conclusion

The map() operator is just one of the many powerful operators available in RxJS. By understanding the different types of RxJS maps, you can use them to transform, filter, and merge data streams in a variety of ways. Whether you're working with Angular or any other JavaScript framework, RxJS maps can help you handle asynchronous data in a more efficient and readable way.