16. tap: посмотреть, не меняя

tap — посмотреть, не трогая

Оператор tap(fn) вызывает функцию для каждого значения, но не меняет сам поток. То, что вошло в tap, выходит из него таким же.

of(1, 2).pipe(
  tap(value => console.log('saw', value)),
  map(value => value * 10)
)
// tap печатает 1, потом пропускает 1 в map → 10
// tap печатает 2, потом пропускает 2 в map → 20

Когда использовать tap

Отладка: посмотреть, что приходит в конкретную точку pipe.
Аналитика, логирование, запись в localStorage — там, где есть побочный эффект, но менять значение не нужно.

Не путайте с map

Если функция должна преобразовать значение — используйте map. Если только посмотреть или сделать что-то «снаружи» — tap. В tap возвращаемое значение игнорируется.

Глоссарий

Побочный эффект (side effect) — любое действие, кроме возврата нового значения: лог, запись в БД, изменение DOM, отправка аналитики.

Что нужно сделать

В pipe добавьте три оператора по порядку (через запятую):
tap(value => console.log('Before: ' + value)) — посмотреть значение до map.
map(value => value * 5) — умножить на 5.
tap(value => console.log('After: ' + value)) — посмотреть значение после map.
Ожидаемый вывод: Before: 1 → After: 5 → Final: 5 → Before: 2 → After: 10 → Final: 10. Заметьте: каждое значение проходит весь pipe полностью, прежде чем начинается следующее.

Решение spoiler · click to reveal

const { of, tap, map } = Rx;

const result$ = of(1, 2).pipe(
  tap(value => console.log('Before: ' + value)),
  map(value => value * 5),
  tap(value => console.log('After: ' + value))
);

result$.subscribe(value => {
  console.log('Final: ' + value);
});

script.ts // TypeScript

CONSOLE · Console Output

Нажмите на запуск, чтобы увидеть результат...