map operator for transformation in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will be the output of this Angular component using map operator?

Consider this Angular component that uses RxJS map operator to transform data from an observable. What will be displayed in the template?

Angular

import { Component } from '@angular/core';
import { of } from 'rxjs';
import { map } from 'rxjs/operators';

@Component({
  selector: 'app-transform',
  template: `<div>{{ transformedValue | async }}</div>`
})
export class TransformComponent {
  source$ = of(5);
  transformedValue = this.source$.pipe(
    map(x => x * 3)
  );
}

A Observable { }

B 5

C 15

D undefined

💡 Hint

Remember that map transforms the emitted value before it reaches the template.

The map operator multiplies the emitted value 5 by 3, resulting in 15. The async pipe unwraps the observable and displays 15.

📝 Syntax

intermediate

Which option correctly uses the map operator to transform an observable of strings to their lengths?

Given an observable emitting strings, which code snippet correctly uses map to transform each string to its length?

Angular

import { of } from 'rxjs';
import { map } from 'rxjs/operators';

const source$ = of('apple', 'banana', 'cherry');
const lengths$ = source$.pipe(
  // transformation here
);

A map(str => str.length)

B map(str => str.toUpperCase())

C map(str => str.length())

D map(str => str.length + 1)

💡 Hint

Check how to get the length of a string in JavaScript.

Option A correctly accesses the length property of the string. Option A tries to call length() as a function, which is invalid. Option A transforms to uppercase, not length. Option A adds 1 to length, which is incorrect.

🔧 Debug

advanced

Why does this Angular observable transformation cause a runtime error?

Examine the following code snippet. Why does it cause a runtime error when subscribed?

Angular

import { of } from 'rxjs';
import { map } from 'rxjs/operators';

const source$ = of(null);
const transformed$ = source$.pipe(
  map(x => x.toString())
);

transformed$.subscribe(console.log);

A Because <code>subscribe</code> is missing a callback function

B Because <code>map</code> operator is not imported correctly

C Because <code>of(null)</code> does not emit any value

D Because <code>x</code> is null and calling <code>toString()</code> on null causes a TypeError

💡 Hint

Think about what happens when you call a method on null.

The observable emits null. Calling toString() on null causes a runtime TypeError because null has no methods.

❓ state_output

advanced

What is the final emitted value after applying multiple map operators?

Given this observable pipeline, what is the final value emitted?

Angular

import { of } from 'rxjs';
import { map } from 'rxjs/operators';

const source$ = of(2);
const result$ = source$.pipe(
  map(x => x + 3),
  map(x => x * 2),
  map(x => `Value: ${x}`)
);

result$.subscribe(console.log);

A Value: 7

B Value: 10

C Value: 5

D Value: 4

💡 Hint

Apply each map transformation step by step.

Starting with 2, add 3 → 5, multiply by 2 → 10, then format as string → 'Value: 10'.

🧠 Conceptual

expert

Which statement best describes the behavior of the map operator in Angular's RxJS?

Choose the most accurate description of how the map operator works in Angular's RxJS library.

A It transforms each emitted value from the source observable by applying a given function, emitting the transformed value.

B It combines multiple observables into one by merging their emissions.

C It filters out values from the source observable that do not satisfy a condition.

D It delays the emission of values from the source observable by a specified time.

💡 Hint

Recall the purpose of map in functional programming and RxJS.

The map operator applies a function to each value emitted by the source observable and emits the result. Other options describe different operators like filter, merge, and delay.

Practice

1. What does the map operator do in Angular's RxJS pipe()?

easy

A. Delays the emission of values by a set time

B. Filters out values that do not meet a condition

C. Combines multiple streams into one

D. Transforms each emitted value by applying a function to it

Solution

1. Step 1: Understand the purpose of map

   The map operator changes each value emitted by an observable by applying a function to it.

2. Step 2: Compare with other operators

   Unlike filter or combineLatest, map transforms values, not filters or combines streams.

3. Final Answer:

   Transforms each emitted value by applying a function to it -> Option D

4. Quick Check:

   map = transform values [OK]

Hint: Remember: map changes values, filter removes them [OK]

Common Mistakes:

• Confusing map with filter operator
• Thinking map combines streams
• Assuming map delays emissions

2. Which of the following is the correct syntax to use map inside an Angular RxJS pipe()?

easy

A. observable.pipe(map(value => value * 2))

B. observable.map(value => value * 2)

C. observable.pipe(map => value * 2)

D. observable.pipe(map(value, value * 2))

Solution

1. Step 1: Recall RxJS pipe syntax

   The map operator is used inside pipe() with a function: map(value => ...).

2. Step 2: Identify correct function usage

   observable.pipe(map(value => value * 2)) correctly uses map(value => value * 2) inside pipe(). Others misuse syntax or method chaining.

3. Final Answer:

   observable.pipe(map(value => value * 2)) -> Option A

4. Quick Check:

   Correct map syntax = observable.pipe(map(value => value * 2)) [OK]

Hint: Use pipe(map(fn)) not observable.map(fn) [OK]

Common Mistakes:

• Calling map directly on observable without pipe
• Incorrect arrow function syntax
• Passing multiple arguments to map incorrectly

3. Given this code, what will be logged?

import { of } from 'rxjs';
import { map } from 'rxjs/operators';

of(1, 2, 3).pipe(
  map(x => x + 1)
).subscribe(console.log);

medium

A. 1 2 3

B. 2 3 4

C. [2, 3, 4]

D. Error: map is not a function

Solution

1. Step 1: Understand the source observable

   of(1, 2, 3) emits values 1, then 2, then 3 sequentially.

2. Step 2: Apply the map transformation

   The map adds 1 to each value, so outputs are 2, 3, and 4.

3. Final Answer:

   2 3 4 -> Option B

4. Quick Check:

   Input + 1 = Output [OK]

Hint: map changes each value, so 1 becomes 2, etc. [OK]

Common Mistakes:

• Expecting original values without change
• Thinking output is an array instead of separate logs
• Confusing import syntax causing runtime error

4. Identify the error in this code snippet using map:

import { of } from 'rxjs';
import { map } from 'rxjs/operators';

of(10, 20, 30).pipe(
  map(x => { x * 2; })
).subscribe(console.log);

medium

A. Missing return statement inside map function

B. Incorrect import of map operator

C. Using pipe instead of subscribe

D. of() cannot emit multiple values

Solution

1. Step 1: Analyze the map function body

   The function uses curly braces but does not return a value explicitly, so it returns undefined.

2. Step 2: Understand effect on output

   Because no value is returned, the output will be undefined for each emission, which is likely unintended.

3. Final Answer:

   Missing return statement inside map function -> Option A

4. Quick Check:

   Curly braces need explicit return [OK]

Hint: Use parentheses or return inside braces in map [OK]

Common Mistakes:

• Assuming implicit return with braces
• Importing map incorrectly
• Confusing pipe and subscribe usage

5. You have an observable emitting user objects:

of(
  {name: 'Alice', age: 25},
  {name: 'Bob', age: 30},
  {name: 'Carol', age: 22}
).pipe(
  map(user => /* ??? */)
).subscribe(console.log);

Which map function will transform the stream to emit only the user names in uppercase?

hard

A. user => ({name: user.name})

B. user => user.age.toString()

C. user => user.name.toUpperCase()

D. user => user.name.toLowerCase()

Solution

1. Step 1: Identify desired output

   The goal is to emit only the user names converted to uppercase strings.

2. Step 2: Check each map option

   user => user.name.toUpperCase() converts user.name to uppercase, matching the goal. Others either convert age, return objects, or lowercase names.

3. Final Answer:

   user => user.name.toUpperCase() -> Option C

4. Quick Check:

   Uppercase names = user => user.name.toUpperCase() [OK]

Hint: Pick map that returns uppercase user.name string [OK]

Common Mistakes:

• Returning full user object instead of name
• Using toLowerCase instead of toUpperCase
• Converting age instead of name