RxJS: Map explained

Posted by Tomasz Smykowski on

RxJS stands for Reactive Extensions for JavaScript. It is a great library to handle flow of items received by your application. Today you will learn what is one of the most commonly used RxJS operator: map.

The documentation offers a nice diagram with circles that is self-explanatory:

But what does it really mean? Let's forget about the diagram for a moment.

The analogy

Imagine you are a blacksmith. The king ordered you to sharpen the edges of all swords of his army. Swords are gathered next to your tent, and you start to sharpen each sword, one by one. It is easy to recall also other situations when you have to take things one by one, and modify them in a way. RxJS map is an operator to abstract this concept.

It looks like this:

How to translate this analogy to programming? Why an app should change each incoming item?

The example

Let's say you are building an application showing current temperature outside. To accomplish it, you connect with a Raspberry Pi device equipped in a temperature sensor via WebSockets. After initial test you see temperature readings be sent from the device to your application properly.

You notice the temperature reading is always nested in data.reading.temperature, and presented in degree Celsius. You'd like to extract the value and convert it to degree Fahrenheit, because it is the temperature system you want to see.

The logic you want to introduce to your app looks like this:

  1. When a new WebSocket message arrives:
    - extract value from data.reading.temperature
    - convert it to degree Fahrenheit
    - round the value

The formal way to write it down with RxJS like this:

temperatureMessage
   .pipe(

      map(
         message => Math. round(
                                   message.data.reading.temperature * 9/5 + 32
                              )

      )

   )
   .subscribe(
      temperature => showTemperature(temperature)
   );

As you can see it is pretty complex syntax. It is because RxJS offers more operators than map and ways to combine them. You can think of pipe section as a decision-making how to handle incoming events, and subscribe what to do with events that pipe returns.

There are other operators you can use in the pipe section. However, there are two interesting things about the map I want to share with you before this article finishes.

Interesting facts

There is no limit how to use the map operator. In the example above we were extracting and manipulating incoming items. But nothing stands in a way to use "external" classes, properties and variables to calculate what you want to receive. You can use conditions, loops and everything you want in the operator function.

The operator function can take another parameter called index. It indicates how many items was received so far. You can think of index like a variable i in a classical for loop:

   for (let i = 0; i < items.length; i++)

Summary

Map operator is far the most popular RxJS operator. It is great if you receive items, but you want to manipulate each item to return something that suits better to your needs. Remember about it every time you want to change every item.

Also check out:

Part 1: RxJS throttle
Part 2: RxJS debounce
Part 3: RxJS filter
Part 4: RxJS distinctUntilChanged
Part 5: RxJS takeUntil

 

0 comments

Leave a comment

Please note, comments must be approved before they are published