Join Values from Multiple Observables with RxJS combineLatest

[00:00] Operator merge is an "or" style combination operator. Does that mean we also have an "and" style combination operator? Yes, we do, and that's called CombineLatest. CombineLatest is an "and" style combination operator because in order to create a single output value here on the output observable, you need a value from foo and from bar. Let's say, for instance, we would like to add numbers from foo and bar.

[00:28] For instance, we want to add one with two to get three, and one with three to get four. Then, we need a value from both of them. It's not enough here that only bar emitted because foo has not yet emitted and you can't really add a number from here with no number from there. That's why we need two values.

[00:46] CombineLatest takes a function as an argument, and this function will have two arguments, x and y. X is a value coming from foo and y is a value coming from bar. If you would have, let's say, three observables here, then you would have x, y, z.

[01:06] Here, what we return as the output of this function is the output value that we want to have here at the bottom. That would be x plus y. The way the CombineLatest works is that once it hits value here on the bar, it doesn't have to get the value from foo so it doesn't yet have "x" there to make this. It won't actually do anything here. It will just do nothing.

[01:31] Since we get now a value from foo, it will remember what was the last value from bar, and it will provide that to this function. "Y" is from bar, it's zero and "x" is from foo, it's zero. Then, zero plus zero is zero. That's why CombineLatest has this latest in the name because it keeps this memory of what are the latest values emitted by each of these observables.

[01:58] For instance, when one comes on bar here, it remembers what was the latest value from foo, which was zero. X is zero, y is one, and then it gives us one. It just keeps on going. Two plus zero would be two, and then one plus the latest value from bar, which is two, that gives us three, four, and then five and six, and three plus four, seven, and then it completes.

[02:30] How do we use CombineLatest. You can use it in a similar fashion that we have here, merge as a static operator. We can do CombineLatest, and you need to provide the two observables, but also at the end here, you provide the combination function, which is x and y values, should return x plus y. Let's call this one combined and let's run it.

[02:54] We see there's zero, one, two, three until seven just like we outline here.

[03:00] You can also use the instance style, which is just foo has instance operator called CombineLatest, which takes the other observable, just bar, and this still does the same thing. Just keep in mind that CombineLatest is an "and" style operator, and it's mainly useful when you have two independent sources of data such as foo and bar are considered to be very independent and of different nature, and you want to make a value, which takes values from both of these observables.

[03:34] One canonical example would be if you would be calculating your body mass index, that requires your weight and your height. If you consider that this weight and height would be observables, then we combine them together with a formula to calculate your body mass index. It's obvious why you can't use merge here because merge is an or style, and body mass index is not your weight or your height. It's both of them together, calculated as some formula.

[04:06] Here, we would put the formula for BMI. In general, that's what you should take out from this lesson is that merge is an "or" style combinator and CombineLatest is the "and" style.