Suggest an edit

Improve this article

Refine the answer for “What does map() do?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

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.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts180 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.