13. pipe and map

pipe — a conveyor for values

Until now we've created an Observable and subscribed right away. But usually you need to do something between the source and the subscription: filter, transform, delay. That's what the pipe(...) method is for.

Think of pipe as a belt with several stations. A value enters the first station, which processes it; the result moves to the second, and so on. What reaches the subscriber is the output of every station.

source$.pipe(op1, op2, op3).subscribe(...)
// 1 → op1 → op2 → op3 → subscriber

map — the most common transformation

The map(fn) operator takes each value, passes it to the function fn, and sends on whatever it returns. It's the exact counterpart of Array.prototype.map, just working on a stream over time.

of(1, 2, 3).pipe(map(x => x * 10))
// 1 → map → 10
// 2 → map → 20
// 3 → map → 30

const { of, map } = Rx;

const source$ = of(1, 2, 3);

const result$ = source$.pipe(
  map(value => value * 10)
);

result$.subscribe(value => console.log(value));