Cédric Soulas
I make motion graphics with RxJS. I code apps with JavaScript and Elm. I will be available for freelance work from mid-April 2018. Get in touch!

Ep. 7 Ep. 9 Newsletter Watch all Source on Github

Episode 8 - zip vs combineLatest in RxJS Monday, 6 Nov.

After ❚ merge (Episode 5) and ❚ combineLatest (Episode 7), we continue our exploration of the combining streams category. Today I picked a third card from this category: ❚ zip.

As for ❚ combineLatest, we need a project function that combines two values (or more) into a new one. I note it figuratively ⚬ ⟶ ⚭ ⟵ ⚬.

Let’s compare those two cards. In the following example, they both take the exact same arguments (the same input streams and the same project function):

As you can see, ❚ zip produces the first combined value only when both input streams have all emitted their first value. More generally, this is how ❚ zip operates with two (or more) input streams:

While ❚ combineLatest combines values whenever any input stream emits a value, ❚ zip only combines each n-th values together.

In the combining streams category, you now have the following cards:

Ep. 7 Ep. 9 Newsletter Watch all Source on Github

reactive.how list of animated cards

Learn Reactive Programming

Focus on one new concept – every Monday

Occasional updates, plus:

Cédric Soulas
I make motion graphics with RxJS. I code apps with JavaScript and Elm. I will be available for freelance work from mid-April 2018.