Understanding RxJS Mapping Operators with a Hospital Story

🏥 Welcome to RxJS Hospital

Imagine a hospital with four different departments. Patients keep arriving, and each department follows a different policy for handling them. Each department represents one RxJS mapping operator.

🟢 mergeMap – General Outpatient Department (OPD)

Scenario: You walk into the General OPD with a fever. Another patient arrives with a cough. Another comes in with a headache. Since there are multiple general doctors available, every patient is assigned to the next available doctor immediately.

• Patient A → Doctor 1
• Patient B → Doctor 2
• Patient C → Doctor 3
• Patient D → Doctor 4

Everyone is treated simultaneously. Some consultations finish earlier than others, depending on the complexity of the case.

RxJS Behavior: mergeMap allows multiple inner Observables to run at the same time.

• No waiting
• No ordering guarantee
• Maximum throughput

Angular Example: Loading product details for multiple products simultaneously.

from(productIds).pipe(
  mergeMap(id => this.http.get(`/api/products/${id}`))
);

🔵 concatMap – Specialist Consultation

Scenario: Now imagine you're visiting a heart specialist. There is only one specialist available. Even if several patients arrive together, they cannot enter at the same time.

• Patient A ↓
• Patient B ↓
• Patient C

The doctor finishes one consultation completely before calling the next patient. Nobody skips the queue.

RxJS Behavior: concatMap executes requests sequentially.

• Preserves order
• Waits for completion
• Perfect for dependent operations

Angular Example: Uploading multiple files one after another.

from(files).pipe(
  concatMap(file => this.upload(file))
);

Each upload starts only after the previous upload finishes.

🟡 switchMap – Emergency ICU

Scenario: Now let's move to the ICU. A doctor is examining Patient A. Suddenly an ambulance arrives with a critical patient. The doctor immediately shifts attention to the emergency case. The previous consultation is abandoned because the emergency patient has higher priority. If another even more critical patient arrives, the doctor switches again.

• Patient A ❌
• Emergency Patient B ✔
• Emergency Patient C ✔

Only the latest emergency matters.

RxJS Behavior: switchMap cancels the previous Observable and subscribes to the newest one.

• Previous request is cancelled
• Latest request always wins

Angular Example: Search autocomplete. The user types: A, An, Ang, Angu, Angular. You don't want five HTTP requests. You only care about the latest search term.

searchText.pipe(
  switchMap(text => this.http.get(`/search?q=${text}`))
);

🔴 exhaustMap – Operation Theatre

Scenario: Finally, we arrive at the Operation Theatre. A surgeon has already started performing surgery. While the surgery is in progress, more patients arrive: Patient B, Patient C, Patient D. The surgeon cannot leave the operating table. No new patient is accepted until the current operation is fully completed.

• Operation in Progress ↓
• Ignore New Patients ↓
• Operation Completed ↓
• Accept Next Patient

RxJS Behavior: exhaustMap ignores all new emissions until the current Observable completes.

• First request wins
• Ignore everything else
• Prevents duplicate execution

Angular Example: Preventing duplicate form submissions.

fromEvent(button, 'click').pipe(
  exhaustMap(() => this.http.post('/save', data))
);

Even if the user clicks the Save button multiple times, only the first request is processed until it completes.

Comparison

How to Remember Forever

Whenever you forget these operators, ask yourself one simple question: "What happens when another patient arrives while the doctor is already busy?"

• mergeMap → "Send them to another available doctor."
• concatMap → "Please wait for your turn."
• switchMap → "Emergency! Stop everything and attend the latest patient."
• exhaustMap → "The surgeon is operating. Nobody else can enter."

That single question is enough to identify the correct RxJS operator in most real-world Angular scenarios.