Understanding RxJS Mapping Operators with a Hospital Story

If you've been learning RxJS in Angular, you've probably come across these four operators:

• mergeMap
• concatMap
• switchMap
• exhaustMap

At first, they all seem to do almost the same thing—they map one Observable into another. The real difference lies in how they handle new incoming requests while another request is already in progress.

Instead of memorizing definitions, let's visit a hospital.

---

🏥 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

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

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

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

Operator	Hospital Department	What Happens?
mergeMap	General OPD	Every patient gets a doctor immediately.
concatMap	Specialist Consultation	Patients wait in a queue and are treated one by one.
switchMap	ICU	Stop treating the current patient and immediately attend the latest emergency.
exhaustMap	Operation Theatre	Ignore new patients until the current surgery is complete.

---

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.