map, filter, and reduce Operators

Operators transform, filter, and combine Observable streams. They are the core of reactive programming in Angular.

map — Transform Each Value

import { map } from 'rxjs/operators';

const numbers$ = of(1, 2, 3, 4, 5);

numbers$.pipe(
  map(n => n * 2)
).subscribe(result => console.log(result));
// Output: 2, 4, 6, 8, 10

filter — Drop Values Failing a Predicate

import { filter } from 'rxjs/operators';

numbers$.pipe(
  filter(n => n % 2 === 0)
).subscribe(result => console.log(result));
// Output: 2, 4

reduce — Accumulate to a Single Value

import { reduce } from 'rxjs/operators';

numbers$.pipe(
  reduce((acc, n) => acc + n, 0)
).subscribe(result => console.log(result));
// Output: 15

pipe — Chaining Operators

import { of } from 'rxjs';
import { map, filter, reduce } from 'rxjs/operators';

of(1, 2, 3, 4, 5).pipe(
  filter(n => n % 2 === 0),  // Keep even numbers: 2, 4
  map(n => n * 10),            // Multiply by 10: 20, 40
  reduce((acc, n) => acc + n, 0) // Sum: 60
).subscribe(result => console.log(result));
// Output: 60

Practical Angular Example

this.http.get<User[]>('/api/users').pipe(
  map(users => users.filter(u => u.isActive)),
  map(users => users.map(u => u.name))
).subscribe(names => {
  this.activeUserNames = names;
});

Beyond map, filter, and reduce, RxJS provides many operators for common transformations.

tap — Side Effects

import { tap } from 'rxjs/operators';

this.data$.pipe(
  tap(data => console.log('Received:', data)),
  map(data => data.items)
).subscribe();

take — Limit Emissions

import { take } from 'rxjs/operators';

// Take only the first 3 values
this.data$.pipe(
  take(3)
).subscribe();

skip — Skip Emissions

import { skip } from 'rxjs/operators';

// Skip the first 2 values
this.data$.pipe(
  skip(2)
).subscribe();

distinctUntilChanged — Deduplicate

import { distinctUntilChanged } from 'rxjs/operators';

this.search$.pipe(
  debounceTime(300),
  distinctUntilChanged()
).subscribe(query => {
  this.search(query);
});

scan — Running Accumulation

import { scan } from 'rxjs/operators';

// Like reduce, but emits intermediate values
numbers$.pipe(
  scan((acc, n) => acc + n, 0)
).subscribe(runningTotal => console.log(runningTotal));
// Output: 1, 3, 6, 10, 15

Common Operator Categories