RxJS Observables: Zip vs CombineLatest
RxJS is a powerful library for reactive programming, that uses the concept of Observables, offering many tools that simplifies the code developing with asynchronous events and callback based events. It’s a complex library, giving the developer a complete set of operators for the most diverse solutions that involves reactive programming.
Between these operators, some of the most used are the combination operators, which combines multiple source Observables into one single Observable. The use cases can vary greatly, from multiple input event detection to multiple HTTP requests handling.
Zip
The Zip operator applies a combination to the emitted items in sequence, by two or more Observables, resulting in a stream of emitted items in the returned Observable. It strictly applies this combination in sequence, that is, the first emitted item in this new returned Observable by Zip will be the combination applied to the first item emitted by the Observable #1, and the first item emitted by the Observable #2, the second emitted item will be the result of the combination applied to the second item emitted by the Observable #1 and the second item emitted by the Observable #2, and will continue until the last set of emitted items (or more, in case we have more source Observables).
Go on and interact with the marbles in this link to help you understand this concept. Try to click and drag the marbles of the two source Observables and verify the returned Observable stream.
Code time!
Let’s see how the operator Zip works.
- The emitted combination will be an array with every source emission, ordered in the same way the Observables are passed into Zip function parameters.
- The new Observable will emit the same quantity of items emitted by the source Observable which has the least number of emissions. As Zip expects a “package” matching all Observable sources, if a source Observable has emitted a number of times more than others, Zip will not emit until all other source Observables have emitted the same number of items (see the marble “5” this same link).
You can also provide an optional function of your choosing to Zip, which receives the source Observables as input and produces a single item emitted by the resultant Observable. Let’s modify the above example providing a function to modify the items in the returned Observable.
In the above example we are returning a custom string in each resultant item in the stream, and this is where you can enter any logic according to your needs.
CombineLatest
The CombineLatest operator behaves similarly to Zip, but while Zip emits only when each Observable source has previously emitted an item, CombineLatest emits an item whenever any of the source Observables emits an item (provided that each of the Observable sources have emitted at least one item, i.e., the first item of the stream).
When either source emits an item, CombineLatest combines the most recent items from each of the source Observables and outputs the combined value from all of these sources.
In this link you can check this concept by clicking and dragging the marbles.
Below an example following the same idea as the previous code, but instead of Zip, we are now using CombineLatest.
- Like Zip, the emitted combination will also be an array ordered by the order of the Observables that are passed to function parameters.
- As Zip, CombineLatest also accepts an optional function if any handling of items received by the source Observables is required and emit a custom item in the returned Observable.
Below an animation where you can compare these two operators in parallel.
You can use them as much as you need to solve whenever a problem crosses your path as a developer. Your imagination is the limit and RxJS provides a lot of tools for it. But remember: with great power, comes great responsibility 😉
