Filter Events with RxJS Operators takeLast and last

André Staltz
InstructorAndré Staltz

Share this video with your friends

Send Tweet
Published 6 years ago
Updated 2 years ago

Operators take(), skip(), and first() all refer to values emitted in the beginning of an Observable execution. In this lesson we will see similar operators which refer instead to the end of an Observable execution, such as takeLast().

🚨 Since we are importing interval from RxJS, we don't need to preface our Observables with Rx.Observable. You can no longer .{operator}, you need to .pipe({operator}) instead.

[00:00] Operators like skip, take, and first refer to the beginning of an observable. That's why, if we say, "skip five," it actually means, "skip the first five," and that's why it looks like this. When we call, "take," it actually means take first five, and if we call, "take first one," that's why first is the same as take the first one.

[00:26] If we can refer to the beginning of an observable, can we refer to its end as well? Yes, we can. We do that only if an observable has a completion.

[00:39] Let's first take five values from this infinite observable, it will just keep on taking forever, so let's take five of those only. If we take five, then after we take the fifth value, take five will just complete for us. Now that we know that we have this observable that completes, we can take the last two values.

[01:01] There's an operator called, "take last." It allows us to get only the last two values or the last three values or the last "n" values, but it does so not here. It won't omit three at this point in time, but it will actually delay that until later on when it knows that it completed. That's because at this point in time, the operator that is listening to this observable -- and this is by the way foo -- it doesn't know if this will continue on forever or if it will complete.

[01:41] That's why we need to keep this in mind, keep the values in mind, so that's what "take last" does, it keeps these values in a buffer. Once it reaches the completion, will it immediately send synchronously those views. If we run this now, bar, so here this is bar, bars take last two from foo, we will see actually five seconds of silence because it's waiting for the completion.

[02:11] Once it completes, we're going to see three and four immediately. Zero, one, two, three, four, five, and then we see the last two values and done.

[02:24] Similarly, we have "take last." We also have "skip last," and we actually "take last one." There's a short cut for that which is "last." Last is the most useful of these that I just mentioned because usually you just want to know what is the last value that was omitted in an observable. Last will give us here just that. It's basically just "take last one."

[02:53] It's going to think for five seconds, and then once it reaches the completion, it will just give us the last value. Now you know how to get values from the beginning of an observable or from the end, or you also know how to ignore them from the beginning or ignore from the end.

Jin
Jin
~ 5 years ago

skipLast doesn't seems to exist, i am using RXjs 5.0.3