The first operator we want to explore is the most commonly used one:
We’ve probably all used
map before when we were working with arrays. The idea is that each
item in the collection will potentially be projected into a different value.
Here is a very simple example where an array of numbers is transformed so that each number is multiplied by 10.
By now we may be wondering what that has to do with Observables and the
map operator that is part of RxJS.
Observables are very much like arrays in a way. Well, they are actually more like Iterators but let’s not get lost in the details. The key point to understand is that both represent a sequence of values. The key difference is that with Arrays/Iterators you pull values out as you want to work with them whereas with Observables you get values pushed to you as they arrive.
It’s this similarity that allows us to take advantage of pretty much all operators that we know from the pull-based world and apply them to the push-based world.
map and Observables
Let’s start with a little demo. All we need is a simple
<input> element to enter some text.
Then we create an Observable that emits every time that the value of our input changes.
The payload of the Observable is the plain old Event object that is provided by the
input event of the browser. But that may not match what we are most interested in. What if we are more interested in the current value of the input? The
map operator lets us project the payload of the Observable into something else. All it takes to project the payload is this tiny change.
We can go on and chain
map calls to project the data even further. For instance, it may be more convenient to work with a data structure that carries the value among with the length of the string.
Of course, we could have done the same in the first
map call. But it’s sometimes more readable to break things into multiple steps. Notice that often we also use different operators in between of two
map calls (e.g to filter something out).
If you like to play a bit with the operator yourself, here is a working demo.
At this point, you may think that Observables are really just a minor enhancement on the Observer or Promise patterns… better suited to handle a sequence of events rather than a single callback. And the
.map() function certainly does not - at first glance - seem to offer any added-value. The power of Observables is revealed when you start using Rx operators to transform, combine, manipulate, and work with sequences of items emitted by Observables.
These operators allow you to compose asynchronous sequences together in a declarative manner with all the efficiency benefits of callbacks but without the drawbacks of nesting callback handlers that are typically associated with asynchronous systems.
We will see that in future articles. Watch out for the next article of this series where we’ll build upon this lesson with
map() and take a look at the related
Angular Master Class at Shopware
Join our upcoming public training!Get a ticket →
Get updates on new articles and trainings.
Join over 1400 other developers who get our content first.
Taming snakes with reactive streams
Reactive Programming is revolutionary but it's not always straightforward and requires a fundamental shift in mindset. In this post, we'll...
Exploring Rx Operators: flatMap
Another post in a series of articles to discover the magic of different Rx operators. In this article we like...
RxJS Master Class and courseware updates
If you've been following us for a while, you're quite aware that we're always striving to provide up-to-date and high-quality...
Advanced caching with RxJS
When building web applications, performance should always be a top priority. One very efficient way to optimize the performance of...
Angular Master Class - Redux and ngrx
Today we're super excited to announce that we finished working on our new Angular Master Class courseware. Read on for...
Three things you didn't know about the AsyncPipe
This article explains three lesser known features of the AsyncPipe that help us to write better async code.