DEV Community

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

Posted on • Edited 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

pardnchiu profile image

NanoMD: Lightweight Markdown Editor

邱敬幃 Pardn Chiu -

pardnchiu profile image

QuickUI: Lightweight Frontend Framework

邱敬幃 Pardn Chiu -

suheldevs profile image

How to Optimize Your React Web App: 7 Essential Steps

Mohd Suhel -

goaqidev profile image

Optimizando la Integración de APIs de Blog: Lecciones Aprendidas con Dev.to y Hashnode

Joaquín Gutiérrez -