Operators

Here we will walk you through some basic operators. Each one will have link to RxMarbles: Interactive diagrams of Rx Observablesarrow-up-right example and from RxJS and Reactive Programming - Animations and visual lessonsarrow-up-right

map

map is an operator which is mapping emitted values to ones we want - it takes value, passes it through given function and returns new Observable.

Map on RxMarblesarrow-up-right

Map on reactive.howarrow-up-right

You may think of map as of a mist which each boat makes a blue boat - it is mapping boat 🚀 to blue boat.

filter

filter is an operator which emits only those values which satisfy a specified predicate.

filter on RxMarblesarrow-up-right

Map vs Filter on reactive.howarrow-up-right

This operator may be one that will allow only yellow boats to pass the bridge, or only those who has at least 3 people on board.

merge

merge flattens multiple Observables together by returning mix of their values into one Observable.

merge on RxMarblesarrow-up-right

merge on reactive.howarrow-up-right

merge may be understood as a place where two rivers join and make one new river. Boats from both of them will flow on the new river with the order they've entered the river crossing.

combineLatest

combineLatest multiple Observables to create an Observable whose values are calculated from the latest values of each of its input Observables.

combineLatest on RxMarblesarrow-up-right

combineLatest on reactive.howarrow-up-right

You may think of combineLatest as of gallery showing a pair of boats (from different rivers), always the latest ones that entered joined river.

takeLast

takeLast emits last x values emitted by the source Observable. Which means that if you will call takeLast(3) it will emit last 3 values emitted by Observable. It will do so after Observable reaching completed state.

takeLast on RxMarblesarrow-up-right

takeLast on reactive.howarrow-up-right

take

take emits first x values emitted by the source Observable. Which means that if you will call take(3) it will emit first 3 values emitted by Observable. After that it will complete returned Observable.

take on RxMarblesarrow-up-right

take on reactive.howarrow-up-right

Last updated