The tap
and map
are both RxJS operators, RxJS operators are just function that performs some manipulation over the (stream) data.
- he
map
is a pipeable operator that takes an input observable, performs some manipulation on it and returns a new manipulated observable. - The
tap
operator on another hand takes an input observable perform some action and returns the same input observable.
Tap should be Used for Notification, logging non-contextual/critical side effects. It’s like a “peek” into the “pipe”. The data stays the same, You can do something with it. Some data goes in, you look, same data comes out.
for example:
const source = of(1, 2, 3, 4, 5);
// here we are manipulating the input value but the output value of the observable still
// the same in the output
const example = source.pipe(
tap(val => val + 100)
).subscribe(val => console.log(val));
// output: 1, 2, 3, 4, 5
Map is for transformation/mapping of the Data in the “pipe”. Some data comes in, different/transformed data comes out.
example:
const source = of(1, 2, 3, 4, 5);
const example = source.pipe(
map(val => val + 100)
).subscribe(val => console.log(val));
// output: 101, 102, 103, 104, 105