Skip to content

Latest commit

 

History

History
90 lines (58 loc) · 3.4 KB

File metadata and controls

90 lines (58 loc) · 3.4 KB
id skipWhile
mainCompare skipWhile
lesson 20
seeAlso take vs takeWhile
seeAlsoLink takeWhile
title takeWhile vs skipwhile in RxJS - Predicates everywhere
compare
skipWhile
takeWhile
learnBackAbout takeWhile
learnAbout takeLast
image skipWhile/takeWhile1-skipWhile1.jpg
layout default
class post
preview_image skipWhile/exercises.jpg
preview_image_alt

Can you fill in the blanks? Try to find solutions that use only one card. If you are stuck, try at least to solve them with a chain of several cards. Watch the solutions below when you are ready.


Solutions

Predicates everywhere

Here is a function:

{:.w250}

It returns ✔ true or ✘ false. This means you can use this function as a predicate on filtering cards. The six operations on this exercise are filtering operations. And all solutions are based on such a predicate.

Part I - Filter

{:.w79}

Here is the most common filtering card:

This is how ❚ filter works with a predicate:

  • Each event of the input stream is given to the predicate
  • If the predicate returns ✔ true, the event can pass
  • Otherwise, the event is ignored
  • As a result, it returns a new stream of filtered events

Part II - Slice

{:.w79}

Slicing is a sub-category of filtering. Cards from this sub-category take or skip everything while/until a certain condition is met. For example:

This is how ❚ takeWhile operates:

  • Each event value of the input stream is given to the predicate:
    • If the predicate returns ✔ true, the event can pass
    • Otherwise, the event is ignored and the output stream immediately completes, emitting a ◉ complete notification

❚ skipWhile is the counterpart of ❚ takeWhile. Note that, with ❚ skipWhile, the input stream and the output stream completes at the same time.

Note: ❚ take is another slicing card (it returns a new stream of at most N values). But you can't use ❚ take(2) instead of ❚ takeWhile(predicate) to solve this exercise: watch my take vs takeWhile video to see the difference.

Part III - Pick

{:.w79}

Finally, you can filter an input stream by emitting zero or one event value. For example, an output stream can emit only the first or the last event value of an input stream. To emit only the last value that satisfies a predicate, you can chain ❚ filter(predicate) and ❚ last().

In some reactive stream libraries (like RxJS), you can simply use ❚ first and ❚ last with an optional predicate:

This is how ❚ last operates with one input stream and a predicate:

  • When the input stream completes, the output stream:
    • emits the last value emitted by the input stream that satisfied the predicate
    • and immediately completes

Summary

See also

{:.w300}
Pipeable operators - Build your own with RxJS!

{:.w300}
The JavaScript pipeline operator proposal