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

muhammadawaisshaikh profile image

Angular Version 19: New Features and Updates

Muhammad Awais -

anhchienvu profile image

Working with GitHub OAuth Authentication

AnhChienVu -

kasir-barati profile image

Module declaration in TS

Mohammad Jawad (Kasir) Barati -

catundanatalia profile image

We are simplifying (literals(arrays and objects)) in Js.

Natália Catunda -