[RXJS] mergeMap, switchMap 차이

개요

• 흔히 rx.js를 사용할 때, Promise를 unwrap 할 때, mergeMap 또는 switchMap을 사용한다.
• 이 때 둘의 차이를 알아보자.

mergeMap vs switchMap

우선 가이드 문서를 읽어보자.

우선 mergeMap의 설명은 아래와 같다.

Projects each source value to an Observable which is merged in the output Observable.

그리고 switchMap은 아래와 같다.

Projects each source value to an Observable which is merged in the output Observable, emitting values only from the most recently projected Observable.

둘의 설명에서 차이를 보면 switchMap은 Emitting values only from the most recently projected Observable.
라는 추가 문구가 붙는다.

그래서 차이는?

결론적으로 단일 observable value를 transform할 때는 둘의 차이는 없다.
하지만 가장 최신의 observable값을 활용한다는 것이 다른데,

import { of, mergeMap, switchMap
, interval, map } from 'rxjs';

const letters = of('a', 'b', 'c');

// case 1
const result = letters.pipe(
   mergeMap(x => interval(1000).pipe(map(i => x + i)))
); 
result.subscribe(x => console.log(x));

// case 2
const result2 = letters.pipe(
  switchMap(x => interval(1000).pipe(map(i => x + i)))
);
result2.subscribe(x => console.log(x));

위의 동작을 보면 mergeMap은 a0, b0, c0와 같이 동작한다.
하지만 switchMap은 c0, c1, c2와 같이 동작한다.

즉, mergeMap은 이전의 observable 값을 전부 다 map연산을 수행하지만
switchMap은 방출된 가장 최신의 값을 기준으로 map 연산을 수행한다.

출처

• RxJS - switchMap git
• RxJS - mergeMap git