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

Amine M — Tue, 28 Jul 2020 13:12:40 +0000

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>();

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️⃣"]

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️⃣"]

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️⃣"]

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️⃣"]
["❤", "👑"]

DEV Community: Amine M

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

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