Question

143

What does the `map` method mean in RxJS?

rated 0 times [ 148] [ 5] / answers: 1 / hits: 42570 / 10 Years ago, fri, january 23, 2015, 12:00:00

I'm learning RxJS by reading this tutorial http://reactive-extensions.github.io/learnrx/.

I have a hard time understanding the map method of Observable. The Array version of map is really simple and straightforward. I have no idea about what exactly the map means in case of a Observable(and why does it have a alias named select?!).

Here is what the documentation told me. Might not be helpful for most beginners...

Projects each element of an observable sequence into a new form by incorporating the element's index. This is an alias for the select method.

I don't understand map in the context of event.
For example, the code below works exactly what I expected. I thought of this piece of code as : Listen to the click-event from the event-stream of #btn.

var btnClicks, observable;



btnClicks = Rx.Observable.fromEvent($('#btn'), click);



observable = btnClicks.subscribe(function(e) {

	console.log(e);

});

But what happens when it becomes to this??

var btn2Clicks, btnClicks, observable;



btnClicks = Rx.Observable.fromEvent($('#btn'), click);



btn2Clicks = Rx.Observable.fromEvent($('#btn2'), click);



observable = btnClicks.map(function(e) {

  return btn2Clicks;

}).subscribe(function(e) {

  console.log(e);

});

What I thought is use the map to transform a collection of a click-event to another collection of event-collection.
The filter is easy to understand, it just as the word filter means, take the event only I interested, and skip others. But how about the map in the context of event? If it means 'transform a collection to another ones' just as the array version, why it still fires when #btn clicked??

I mean I'v mapped it to another collections, now it's no longer a collection of click-event of #btn but it's a new collection of something... But it still fires when #btn clicked which not make sense for me.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

mustafaericho

Add To Favorites

Follow

Total Points: 322

Total Questions: 103

Total Answers: 110

Location: Montenegro

Member since Thu, Jun 16, 2022

2 Years ago

answered 10 Years ago tayla · Accepted Answer

map works exactly the same for Observables as it does for arrays. You use map to transform a collection of items into a collection of different items. It helps if you think of an Observable as a collection of items (just like an array is also a collection of items), at least from the observer's point of view.

For example, take these 2 methods that you wrote to use with some arrays:

function multiplyByTwo(collection) {

    return collection.map(function (value) {

        return value * 2;

    });

}



function removeZeroes(collection) {

    return collection.filter(function (value) {

        return value !== 0;

    });

}



var a = [1, 2, 3, 4, 0, 5];

var b = multiplyByTwo(a); // a new array [2, 4, 6, 8, 0, 10]

var c = removeZeroes(b); // a new array [2, 4, 6, 8, 10]

You can use these same functions for an observable:

var a = Rx.Observable.of(1, 2, 3, 4, 0, 5);

var b = multiplyByTwo(a); // a new observable [2, 4, 6, 8, 0, 10]

var c = removeZeroes(b); // a new observable [2, 4, 6, 8, 10]

This is possible because RxJs observables implement the array operators like map and filter to have the exact same semantics as they do for arrays. If you know how they work for arrays, then you know how they work for observables.

This trick is the result of the dual nature of observables and enumerables.

If you work through the interactive tutorial you are viewing, it actually walks you through this process. I believe it starts you off by writing map operators for arrays and then in a later tutorial sneaks an observable in as the source.

P.S.
It is an alias for select because of its history: Reactive Extensions was first implemented in .NET and later ported to other languages. Rx.NET uses the same operators that are used by .NET's LINQ (since IObservable is the dual of IEnumerable). LINQ's map operator is known as Select (and its filter operator is known as Where). These names come from LINQ's origination. One of the goals when LINQ was built was to make it possible to write database queries in C#. Thus they adopted SQL naming conventions for many of the operators (LINQ SELECT maps directly to SQL SELECT, LINQ WHERE maps to SQL WHERE, etc).