RxJS Mapping Operators Explained: map, switchMap, mergeMap, concatMap & exhaustMap

The Restaurant Analogy 🍽️

Imagine you're a waiter at a restaurant. Customers (events) place orders (trigger inner Observables). How you handle multiple orders defines which operator you are!

Meet the Operators

map() - The Simple Transformer

What it does: Transforms each value. No inner Observables involved.

of(1, 2, 3).pipe(
  map(x => x * 10)
);
// Output: 10, 20, 30

switchMap() - The Impatient Waiter

What it does: Cancels previous inner Observable, switches to new one.

searchInput.valueChanges.pipe(
  switchMap(term => this.searchService.search(term))
);

✅ Best for: Search autocomplete, route changes, polling

mergeMap() - The Multitasking Kitchen

What it does: Runs all inner Observables in parallel.

from(files).pipe(
  mergeMap(file => this.upload(file), 3) // max 3 parallel
);

✅ Best for: Bulk uploads, parallel API requests

concatMap() - The One-Chef Kitchen

What it does: Waits for each to complete before starting next.

from(transactions).pipe(
  concatMap(tx => this.bankService.process(tx))
);

✅ Best for: Bank transactions, chat messages, sequential saves

exhaustMap() - The Focused Waiter

What it does: Ignores new emissions while current is running.

loginButton.clicks.pipe(
  exhaustMap(() => this.authService.login())
);
// Rapid clicks are ignored!

✅ Best for: Login buttons, form submits, refresh buttons

The Ultimate Decision Tree

Scenario Decision Tree

Quick Scenario Matcher

Comparison Cheat Sheet

Common Mistakes

❌ Using mergeMap for search

// Wrong - race conditions!
searchInput.pipe(
  mergeMap(term => this.search(term))
);

// Right
searchInput.pipe(
  switchMap(term => this.search(term))
);

❌ Using switchMap for saves

// Wrong - may cancel saves!
formChanges.pipe(
  switchMap(data => this.save(data))
);

// Right
formChanges.pipe(
  concatMap(data => this.save(data))
);

Summary: One-Line Definitions

• map: Transform values (no Observables)
• switchMap: Cancel old, use new (search)
• mergeMap: Run all parallel (uploads)
• concatMap: One at a time, in order (transactions)
• exhaustMap: Ignore new while busy (submit buttons)