zip

Combines multiple observables by pairing their emissions by index. Waits for all sources to emit their nth value before emitting the nth tuple. Completes when any source completes.

Marble Diagram

zip

Example

//  Timeline:
//
//  letters$  'A'       'B'       'C'
//  numbers$  1         2         3
//  zipped$   ['A',1]   ['B',2]   ['C',3]
//
//  Explanation:
//  - zip pairs values by their index from multiple sources
//  - Waits for all sources to emit at the same index
//  - Completes when any source completes

const [letters$, setLetter] = createState<string>('A');

const [numbers$, setNumber] = createState<number>(1);

const zipped$ = zip([letters$, numbers$]);

const valueHistory: (readonly [string, number])[] = [];

zipped$.subscribe(([letter, num]) => {
    valueHistory.push([letter, num]);
});

for (const letter of ['B', 'C']) {
    setLetter(letter);
}

for (const num of [2, 3]) {
    setNumber(num);
}

assert.deepStrictEqual(valueHistory, [
    ['A', 1],
    ['B', 2],
    ['C', 3],
]);

View source on GitHub