DEV Community

Cover image for Difference between the RxJs operators: zip, forkedJoin, combineLatest, and withLatestFrom
Amine M
Amine M

Posted on • Updated on

Difference between the RxJs operators: zip, forkedJoin, combineLatest, and withLatestFrom

#javascript #reactive #rxjs

sometimes, the usage of these four RxJs operators is a bit tricky, as they work almost the same way by merging different Observables inputs into only one output, to understand easily the difference between 'em all I've prepared some examples that show the difference of the outputs.If you have questions, suggestions or something not clear, feel free to comment with your question and I'll be glad to answer it.

  • ZIP
  • forkedJoin
  • combineLatest
  • withLatestFrom 
type Shape = '♠️' | '❤';
type Card = '👑' | '1️⃣';
const shapes$ = new Subject<Shape>();
const cards$ = new Subject<Card>();
Enter fullscreen mode Exit fullscreen mode
  1. ZIP Each time the zipped observables (or subjects) emit all of their values, the ZIP operator emits one time an array of all observables values. 
// zip the 2 observables:
zip(shapes$, cards$).subscribe(console.log);
// then next data as:
shapes$.next('♠️');
cards$.next('👑');
shapes$.next('❤');
cards$.next('1️⃣');
shapes$.next('♠️');
cards$.next('👑');
shapes$.next('❤');
cards$.next('1️⃣');
// no need to complete the observables, it will output:
["♠️", "👑"]
["❤", "1️⃣"]
["♠️", "👑"]
["❤", "1️⃣"]
Enter fullscreen mode Exit fullscreen mode
  1. forkedJoin emits an array of the last values emitted by the observables (or the subjects) being forkJoined only after completing the stream of the observables (or the subjects). 
// forkJoin the 2 observables:
forkJoin(shapes$, cards$).subscribe(console.log);
// then next data as:
shapes$.next('♠️');
cards$.next('👑');
shapes$.next('❤');
cards$.next('1️⃣');
shapes$.next('♠️');
cards$.next('👑');
shapes$.next('❤');
cards$.next('1️⃣');
// emits only when observable completed:
shapes$.complete();
cards$.complete();
// outputs:
["❤", "1️⃣"]
Enter fullscreen mode Exit fullscreen mode
  1. combineLatest each time an observable (or a subject) emits a new value the combineLatest operator emits a new array of values (from all the observables passed to the combineLatest operator) containing the new value. 
// combineLatest the 2 observables:
combineLatest(shapes$, cards$).subscribe(console.log);
// then next data as:
shapes$.next('♠️');
cards$.next('👑');
shapes$.next('❤');
cards$.next('1️⃣');
shapes$.next('♠️');
cards$.next('👑');
shapes$.next('❤');
cards$.next('1️⃣');
// no need to complete the observables, it will output:
["♠️", "👑"]
["❤", "👑"]
["❤", "1️⃣"]
["♠️", "1️⃣"]
["♠️", "👑"]
["❤", "👑"]
["❤", "1️⃣"]
Enter fullscreen mode Exit fullscreen mode
  1. withLatestFrom emits an array of both values, the main observable value, and the other observable last value being withLatestFromed. 
// withLatestFrom the 2 observables:
shapes$.pipe(withLatestFrom(cards$)).subscribe(console.log);
// then next data as:
shapes$.next('♠️');
cards$.next('👑');
shapes$.next('❤');
cards$.next('1️⃣');
shapes$.next('♠️');
cards$.next('👑');
shapes$.next('❤');
cards$.next('1️⃣');
// no need to complete the observables, it will output:
["❤", "👑"]
["♠️", "1️⃣"]
["❤", "👑"]
Enter fullscreen mode Exit fullscreen mode

In case you want to play with these operators stackblitz here.

Top comments (0)

Read next

devmarcosanjos profile image

Client-Side Rendering (CSR)

Marcos Anjos -

zanepearton profile image

Rust + WASI: Application Monitoring

Zane -

willowjr profile image

What I’ve Learned from Building a Calculator with Vue.js

William Kwadwo Owusu -

skylerdev profile image

How I Created a Hover Reveal Text Animation with TailwindCSS and React

Skyler Dev -