{"id":1612,"date":"2022-01-24T00:08:36","date_gmt":"2022-01-23T23:08:36","guid":{"rendered":"https:\/\/nguenkam.com\/blog\/?p=1612"},"modified":"2022-01-24T00:09:49","modified_gmt":"2022-01-23T23:09:49","slug":"what-is-the-difference-between-tap-and-map-in-rxjs","status":"publish","type":"post","link":"https:\/\/nguenkam.com\/blog\/index.php\/2022\/01\/24\/what-is-the-difference-between-tap-and-map-in-rxjs\/","title":{"rendered":"&#8220;tap&#8221; VS &#8220;map&#8221; Operators in RxJS?"},"content":{"rendered":"\n<p>The&nbsp;<code>tap<\/code>&nbsp;and&nbsp;<code>map<\/code>&nbsp;are both RxJS operators, RxJS operators are just function that performs some manipulation over the (stream) data.<\/p>\n\n\n\n<ul><li>he&nbsp;<code>map<\/code>&nbsp;is a pipeable operator that takes an input observable, performs some manipulation on it and returns a new manipulated observable.&nbsp;<\/li><li>The&nbsp;<code>tap<\/code>&nbsp;operator on another hand takes an input observable perform some action and returns the same input observable.<\/li><\/ul>\n\n\n\n<p><strong>Tap<\/strong>&nbsp;should be Used for Notification, logging non-contextual\/critical side effects. It&#8217;s like a &#8220;peek&#8221; into the &#8220;pipe&#8221;. The data stays the same, You can do something with it. Some data goes in, you look, same data comes out.<\/p>\n\n\n\n<p>for example:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const source = of(1, 2, 3, 4, 5);\n\n\/\/ here we are manipulating the input value but the output value of the observable still \n\/\/ the same in the output \nconst example = source.pipe(\n  tap(val =&gt; val + 100)\n).subscribe(val =&gt; console.log(val));\n\n\/\/ output: 1, 2, 3, 4, 5\n<\/code><\/pre>\n\n\n\n<p><strong>Map<\/strong>&nbsp;is for transformation\/mapping of the Data in the &#8220;pipe&#8221;. Some data comes in, different\/transformed data comes out.<\/p>\n\n\n\n<p>example:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const source = of(1, 2, 3, 4, 5);\nconst example = source.pipe(\n  map(val =&gt; val + 100)\n).subscribe(val =&gt; console.log(val));\n\n\/\/ output: 101, 102, 103, 104, 105\n<\/code><\/pre>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The&nbsp;tap&nbsp;and&nbsp;map&nbsp;are both RxJS operators, RxJS operators are just function that performs some manipulation over the (stream) data. he&nbsp;map&nbsp;is a pipeable operator that takes an input observable, performs some manipulation on it and returns a new manipulated observable.&nbsp; The&nbsp;tap&nbsp;operator on another hand takes an input observable perform some action and returns the same input observable. Tap&nbsp;should [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[464,401,463,306,382,465],"_links":{"self":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/1612"}],"collection":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=1612"}],"version-history":[{"count":2,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/1612\/revisions"}],"predecessor-version":[{"id":1614,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/1612\/revisions\/1614"}],"wp:attachment":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=1612"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=1612"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=1612"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}