[RxJS] map vs flatMap

What's the difference between map and flatmap? First, let's show what map is. To show that, I need a source stream, so I'm going to make an interval. It takes a tenth of a second, and I'm only going to take 10 values, and subscribe to it.

 

var source = Rx.Observable.interval(100).take(10).map((x) => x*2);
console.clear();
source.subscribe(function(res){
  console.log(res);
});

/*
0
2
4
6
8
10
12
14
16
18
*/

 

But what happens if I want to do something asynchronous in here? To show this, I'm going to return an observable timer, which is just going to wait for half of a second, and then map to exactly the same values.

var source = 
    Rx.Observable.interval(100).take(10)
    .map(function(x){
      return Rx.Observable.timer(100).map(function(){
        return x;
      });
    });
console.clear();
source.subscribe(function(res){
  console.log(res.toString());
});

/*
"[object Object]"
"[object Object]"
"[object Object]"
"[object Object]"
"[object Object]"
"[object Object]"
"[object Object]"
"[object Object]"
"[object Object]"
"[object Object]"
*/

 

'Rx.Observable.timer(100)' causes it delay 100 ms.

You find You're going to get objects back. That's because these objects are observables. I'd really, really like to get my values back into my stream. There's actually two ways to do this. 

 

First Way: mergerAll()

What a merge all does is, it takes in a stream of observables, or an observable of observables, and merges them together as they come in.

It subscribes to each one, and pumps them into one output stream. 

var source = 
    Rx.Observable.interval(100).take(10)
    .map(function(x){
      return Rx.Observable.timer(100).map(function(){
        return x;
      });
    }).mergeAll();
console.clear();
source.subscribe(function(res){
  console.log(res.toString());
});

/*
"0"
"1"
"2"
"3"
"4"
"5"
"6"
"7"
"8"
"9"
*/

 

Second way: flatMap()

What flatmap is going to do is it's going to perform this mapping function and then subscribe to each observable returned by the map.

var source = 
    Rx.Observable.interval(100).take(10)
    .flatMap(function(x){
      return Rx.Observable.timer(100).map(function(){
        return x;
      });
    });
console.clear();
source.subscribe(function(res){
  console.log(res.toString());
});