Skip to main content

What does map() do?

AngularJunior~1 min read
Suggest an edit

The map() operator in RxJS transforms each value in the stream and returns a new one.

A simple example:

ts
import { of } from 'rxjs'; import { map } from 'rxjs/operators'; of(1, 2, 3) .pipe(map(x => x * 10)) .subscribe(val => console.log(val));

The stream was: 1 → 2 → 3 The stream became: 10 → 20 → 30

How it works:

  • Each value passes through the function
  • A new value is returned, but the stream itself continues

Where it's used:

  • Transform data from an API
  • Add/remove fields
  • Convert a string to a number, an object into another object, and so on
  • In forms, events, search

Example in Angular:

ts
this.http.get('/api/user') .pipe(map(user => user.name)) .subscribe(name => console.log(name));

You receive the whole object, but map() keeps only the name.

Conclusion:

map() is like a filter lens: it takes an input value and returns a different one. Very handy when a stream is flowing and you need to "repaint" the data on the fly.

Short Answer

Interview ready
Premium

A concise answer to help you respond confidently on this topic during an interview.

Suggest an edit