TIL - Use Tap in RxJS for side effects

What is the tap operator?

I recently learned about the tap operator when trying to perform a side-effect inside of a map operator. While you could perform side-effects inside of a map operator, it's a better practice to do so in a tap operator where it allows you to separate the business logic transformation from the side effects, making your code more modular and easier to maintain.

In other words, using map for both transformations and side effects can lead to "business logic" being intertwined with "infrastructure concerns", which can make it harder to reason about and modify your code. By isolating side effects in a separate tap operator, you can keep your map operators focused on the core transformation logic, making your code more composable, scalable, and maintainable.

How does it work?

When using the tap operator, you can pass a function as an argument. This function will be called whenever the source observable emits a value. The returned observable from tap is identical to the original observable; only the side effect is triggered.

Example Usage

import { from, tap } from 'rxjs';

const numbers = from([1, 2, 3]);
numbers.pipe(tap(x => console.log('Received:', x))).subscribe();

In this example, tap logs each emitted value to the console without affecting the original observable. The subscription will still receive the values as expected.