zip

zip operator combines observable streams in a way that resembles the mechanics of a zipper on clothing or a bag. It brings together two or more sequences of corresponding values as a tuple (a pair in case of two input streams). It waits for the corresponding value to be emitted from all input streams, then transforms them into a single value using a projection function and emits the result. It will only emit the value once it has a pair of fresh values from each source sequence. So if one of the source observables emits values faster than the other sequence, the rate of publishing will be dictated by the slower of the two sequences.

The resulting stream completes when any of the inner streams complete and the corresponding matched pairs are emitted from other streams. It will never complete if any of the inner streams doesn’t complete and will throw an error if any of the inner streams errors out.

The operator works in the following way:

1. Subscribe to all input observables
2. When a source observable emits a value, add to the cache for this source observable under certain index
3. If there’s a cached value for each obsevable in the cache for this index, emit the combined values to the observer
4. As long as one of the source observables complete, and no more cached pairs to emit, send the complete notification to the observer, zip complete.
5. If any of the source observables throws an error, send the error notification to the observer.

In the diagram below you can see the zip operator combining two streams A and B. As soon as a corresponding pair is matched the resulting sequence produces a combined value:

Here is the code example that demonstrates the setup shown by the above diagram:

<>Copy
const a = stream('a', 200, 3);
const b = stream('b', 500, 3);

zip(a, b).subscribe(fullObserver(operator));

And the editable demo:

Additional resources

Link to this section

• Official documentation

See also

Link to this section

• concat
• concatAll
• merge
• mergeAll
• combineLatest
• withLatestFrom