[RxJS] Replace zip with combineLatest when combining sources of data

This lesson will highlight the true purpose of the zip operator, and how uncommon its use cases are. In its place, we will learn how to use the combineLatest operator.

const length$ = Rx.Observable.of(5, 4);
const width$ = Rx.Observable.of(7,1);
const height$ = Rx.Observable.of(2.8, 2.5);

const volume$ = Rx.Observable
  .zip(length$, width$, height$,
    (length, width, height) => length * width * height
  );

volume$.subscribe(function (volume) {
  console.log(volume); 
});

zip requiers each observable has synchronized emissions.  It means:

const length$ = Rx.Observable.of(5);
const width$ = Rx.Observable.of(7);
const height$ = Rx.Observable.of(2.8, 2.5);

2.5 won't be calculated only when lenth$ and width$ provide second value.

 

In this case we can use combineLatest instead of zip:

const length$ = Rx.Observable.of(5);
const width$ = Rx.Observable.of(7);
const height$ = Rx.Observable.of(2.8, 2.5);

const volume$ = Rx.Observable
  .combineLatest(length$, width$, height$,
    (length, width, height) => length * width * height
  );

volume$.subscribe(function (volume) {
  console.log(volume); 
});

 

One useful tip for using zip:

zip can spread sync value over time, when combine with interval

const source$ = of('hello')
const interval$ = interval(100).take(5)

source$.zip(interval$, (s, n) => s)
    .subscribe()

/* 
source$: (hello)|
interval$          ----0----1----2----3----4
    
       zip

                   ----h----e----l----l----o
*/    

 

The same effect can also be done with concatMap + delay

const source$ = of('hello')
source$.concatMap(x => of(x).delay(100))