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

By Shabazz

Software Engineer, MCSD, Web developer & Angular specialist

Leave a Reply

Your email address will not be published. Required fields are marked *