mergeMap vs concatMap vs exhaustMap in Angular - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the operator that merges inner observables concurrently.

Angular

import { [1] } from 'rxjs/operators';

Drag options to blanks, or click blank then click option'

AconcatMap

BmergeMap

CexhaustMap

DswitchMap

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing mergeMap with concatMap which queues inner observables.

Using switchMap which cancels previous inner observables.

The mergeMap operator merges inner observables concurrently, allowing multiple active subscriptions.

2fill in blank

medium

Complete the code to use the operator that queues inner observables and runs them one after another.

Angular

source$.pipe([1](value => innerObservable(value)))

Drag options to blanks, or click blank then click option'

AexhaustMap

BmergeMap

CconcatMap

DswitchMap

Attempts:

3 left

💡 Hint

Common Mistakes

Using mergeMap which runs inner observables concurrently.

Using exhaustMap which ignores new inner observables while one is active.

concatMap queues inner observables and subscribes to them one at a time, preserving order.

3fill in blank

hard

Fix the error in the code to use the operator that ignores new inner observables while one is active.

Angular

source$.pipe([1](value => innerObservable(value)))

Drag options to blanks, or click blank then click option'

AexhaustMap

BconcatMap

CmergeMap

DswitchMap

Attempts:

3 left

💡 Hint

Common Mistakes

Using mergeMap which allows concurrent inner observables.

Using concatMap which queues inner observables instead of ignoring.

exhaustMap ignores new inner observables if the previous one is still running, preventing overlap.

4fill in blank

hard

Fill both blanks to create a mapping that runs inner observables one after another and logs each value.

Angular

source$.pipe([1](value => innerObservable(value))).subscribe(val => console.log([2]));

Drag options to blanks, or click blank then click option'

AconcatMap

BmergeMap

Cval

Dvalue

Attempts:

3 left

💡 Hint

Common Mistakes

Using mergeMap instead of concatMap for sequential execution.

Logging the wrong variable name inside subscribe.

Using concatMap ensures inner observables run sequentially, and logging val shows each emitted value.

5fill in blank

hard

Fill all three blanks to create a mapping that merges inner observables concurrently, filters values greater than 10, and logs them.

Angular

source$.pipe([1](value => innerObservable(value)), filter([2] => [3] > 10)).subscribe(val => console.log(val));

Drag options to blanks, or click blank then click option'

AconcatMap

BmergeMap

Cx

Dy

Attempts:

3 left

💡 Hint

Common Mistakes

Using concatMap instead of mergeMap for concurrent execution.

Using different variable names inconsistently in the filter function.

mergeMap merges inner observables concurrently. The filter uses x as the parameter to check values greater than 10.

Practice

1. Which RxJS operator runs all inner tasks at the same time and emits results as they complete, without waiting for order?

easy

A. switchMap

B. concatMap

C. exhaustMap

D. mergeMap

Solution

1. Step 1: Understand mergeMap behavior

   mergeMap subscribes to all inner observables immediately and merges their outputs as they arrive.

2. Step 2: Compare with other operators

   concatMap waits for each inner observable to complete before starting the next, exhaustMap ignores new inner observables if one is active, and switchMap cancels previous inner observables.

3. Final Answer:

   mergeMap -> Option D

4. Quick Check:

   Runs all tasks at once = mergeMap [OK]

Hint: All tasks at once means mergeMap [OK]

Common Mistakes:

• Confusing concatMap with mergeMap because both handle multiple tasks
• Thinking exhaustMap runs all tasks simultaneously
• Mixing switchMap behavior with mergeMap

2. Which of the following is the correct syntax to use concatMap in an Angular RxJS pipe?

easy

A. concatMap(source$, value => inner$)

B. source$.pipe(concatMap(value => inner$))

C. source$.concatMap(value => inner$)

D. source$.pipe(map(concatMap(value => inner$)))

Solution

1. Step 1: Recall RxJS pipe usage

   Operators like concatMap are used inside pipe() method on observables.

2. Step 2: Check syntax correctness

   source$.pipe(concatMap(value => inner$)) correctly uses source$.pipe(concatMap(...)). Options A and B misuse method chaining or function call. source$.pipe(map(concatMap(value => inner$))) wrongly nests concatMap inside map.

3. Final Answer:

   source$.pipe(concatMap(value => inner$)) -> Option B

4. Quick Check:

   Use pipe with concatMap inside [OK]

Hint: Always use pipe() with concatMap inside [OK]

Common Mistakes:

• Calling concatMap directly on observable without pipe
• Passing concatMap as argument to map
• Using concatMap as a standalone function

3. Given the code below, what will be the output order of emitted values?

import { of } from 'rxjs';
import { concatMap, delay } from 'rxjs/operators';

of(1, 2, 3).pipe(
  concatMap(x => of(x).pipe(delay(100 - x * 10)))
).subscribe(console.log);

medium

A. [3, 2, 1]

B. [1, 3, 2]

C. [1, 2, 3]

D. [2, 1, 3]

Solution

1. Step 1: Understand concatMap behavior with delays

   concatMap waits for each inner observable to complete before starting the next, preserving order.

2. Step 2: Analyze delays and emission order

   Even though delays differ (90ms, 80ms, 70ms), concatMap queues them and emits in source order: 1, then 2, then 3.

3. Final Answer:

   [1, 2, 3] -> Option C

4. Quick Check:

   concatMap preserves order despite delays [OK]

Hint: concatMap keeps order even if inner delays differ [OK]

Common Mistakes:

• Assuming output order matches delay times
• Confusing concatMap with mergeMap behavior
• Ignoring that concatMap queues inner observables

4. You have this code snippet using exhaustMap. It should ignore new clicks while processing, but it processes all clicks anyway. What is the likely mistake?

buttonClicks$.pipe(
  exhaustMap(() => fetchData())
).subscribe();

medium

A. fetchData() returns a promise, not an observable

B. Using exhaustMap instead of mergeMap

C. Not subscribing to the observable

D. Not returning an observable inside exhaustMap

Solution

1. Step 1: Check exhaustMap inner function return type

   exhaustMap expects the function to return an observable. If fetchData() returns a promise, it won't behave correctly.

2. Step 2: Understand effect of returning a promise

   Promises are not cancellable observables, so exhaustMap can't ignore new clicks properly, causing all clicks to process.

3. Final Answer:

   fetchData() returns a promise, not an observable -> Option A

4. Quick Check:

   exhaustMap needs observables, not promises [OK]

Hint: exhaustMap requires observables, not promises [OK]

Common Mistakes:

• Thinking exhaustMap works with promises automatically
• Forgetting to subscribe to the observable
• Confusing exhaustMap with mergeMap usage

5. You want to handle user search input so that if a search is running, new inputs are ignored until it finishes. Which operator should you use and why?

searchInput$.pipe(
  ???(query => performSearch(query))
).subscribe(results => display(results));

hard

A. exhaustMap because it ignores new searches while one is running

B. concatMap because it queues searches and runs them one by one

C. mergeMap because it runs all searches simultaneously

D. switchMap because it cancels previous searches on new input

Solution

1. Step 1: Understand the requirement

   The user wants to ignore new search inputs while a search is running, preventing duplicates.

2. Step 2: Match operator behavior

   exhaustMap ignores new inner observables if one is active, perfect for this use case. mergeMap runs all, concatMap queues, switchMap cancels previous.

3. Final Answer:

   exhaustMap because it ignores new searches while one is running -> Option A

4. Quick Check:

   Ignore new inputs during active task = exhaustMap [OK]

Hint: Ignore new tasks while running = exhaustMap [OK]

Common Mistakes:

• Choosing switchMap which cancels previous instead of ignoring
• Using mergeMap which runs all searches simultaneously
• Using concatMap which queues instead of ignoring