hardFrontend

What is the difference between switchMap, mergeMap, concatMap, and exhaustMap?

Q: What is the difference between switchMap, mergeMap, concatMap, and exhaustMap?

**Core concept.** All four are **higher-order mapping** operators: they map each source value to an **inner observable** and flatten the results. They differ in how they handle a **new** source value while a previous inner observable is still running: switchMap cancels the old one, mergeMap runs them concurrently, concatMap queues them, and exhaustMap ignores new ones until the current finishes. switchMap cancel previous keep latest typeahead/search <rect

487 views

Understand the problem

Compare RxJS flattening operators.

rxjsoperators

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

switchMap for a search box

import { fromEvent, switchMap, debounceTime, map } from 'rxjs';
// import { ajax } from 'rxjs/ajax';  // (illustrative)

const input = document.querySelector('input')!;

const results$ = fromEvent(input, 'input').pipe(
  map((e: any) => e.target.value),
  debounceTime(300),
  // cancel the previous request when a new keystroke arrives
  switchMap(term => fetch('/search?q=' + term).then(r => r.json())),
);

results$.subscribe(r => console.log('latest results only:', r));

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

Explain the shareReplay operator in RxJS and how it prevents duplicate HTTP requests.

What is ViewEncapsulation in Angular?