Hi Guys and welcome back,
today I'll illustrate you two simple types of the pipeable operators: Conditional Operators and Mathematical Operators.
No time to waste, let's start.
Conditional Operators
These operators are useful to check if there are values in the observables or to find some specific value in them. Some of these operators are similar to some array methods, with the difference that they work with observables and not with arrays.
Emits a given value if the source Observable completes without emitting any next value, otherwise mirrors the source Observable.
import { EMPTY, Observer } from "rxjs";
import { defaultIfEmpty } from "rxjs/operators";
const observer: Observer<number> = {
next: x => console.log('value', x),
error: err => console.error('error', err),
complete: () => console.log('complete'),
};
EMPTY.pipe(
defaultIfEmpty(10)
).subscribe(observer);
value 10
complete
This operator, as you can see, permits us to receive a default value if the observable does not emit any value.
Returns an Observable that emits whether or not every item of the source satisfies the condition specified.
import { Observer, of } from "rxjs";
import { every } from "rxjs/operators";
const observer: Observer<boolean> = {
next: x => console.log('value', x),
error: err => console.error('error', err),
complete: () => console.log('complete'),
};
of(1,2,3,4,5,6,7,8,9).pipe(
every(val => val < 10)
).subscribe(observer);
value true
complete
This operator is like the every method in the arrays.
We can use it when we need to check if all the values of our observable meet a condition.
Emits only the first value emitted by the source Observable that meets some condition.
import { Observer, of } from "rxjs";
import { find } from "rxjs/operators";
const observer: Observer<number | undefined> = {
next: x => console.log('value', x),
error: err => console.error('error', err),
complete: () => console.log('complete'),
};
of(1,2,3,4,5,6,7,8,9).pipe(
find(val => val === 5)
).subscribe(observer);
value 5
complete
This operator is like the find method in the arrays.
We can use it to find a value that meets a condition in our observable. It's important to remember that when the operator finds a value that matches our condition it completes the observable.
Emits only the index of the first value emitted by the source Observable that meets some condition.
import { Observer, of } from "rxjs";
import { findIndex } from "rxjs/operators";
const observer: Observer<number> = {
next: x => console.log('value', x),
error: err => console.error('error', err),
complete: () => console.log('complete'),
};
of(1,2,3,4,5,6,7,8,9).pipe(
findIndex(val => val === 5)
).subscribe(observer);
value 4
complete
This operator is like the findIndex method in the arrays.
We can use it to find the index of a value that meets a condition in our observable. It's important to remember that when the operator finds a value that matches our condition it completes the observable.
Emits false if the input Observable emits any values, or emits true if the input Observable completes without emitting any values.
import { EMPTY, Observer } from "rxjs";
import { isEmpty } from "rxjs/operators";
const observer: Observer<boolean> = {
next: x => console.log('value', x),
error: err => console.error('error', err),
complete: () => console.log('complete'),
};
EMPTY.pipe(
isEmpty()
).subscribe(observer);
value true
complete
This operator is used to check if an observable has emitted at least a value.
Mathematical Operators
These operators are used to retrieve some special values in our observables or to reduce the values.
Counts the number of emissions on the source and emits that number when the source is completed.
import { Observer, of } from "rxjs";
import { count } from "rxjs/operators";
const observer: Observer<number | undefined> = {
next: x => console.log('value', x),
error: err => console.error('error', err),
complete: () => console.log('complete'),
};
of("a", "b", "c", "d", "e").pipe(
count()
).subscribe(observer);
value 5
complete
This operator is used to count the values of our observables.
The Max operator operates on an Observable that emits numbers (or items that can be compared with a provided function), and when source Observable completes it emits a single item: the item with the largest value.
import { Observer, of } from "rxjs";
import { max } from "rxjs/operators";
const observer: Observer<string> = {
next: x => console.log('value', x),
error: err => console.error('error', err),
complete: () => console.log('complete'),
};
of("a", "b", "e", "d", "c").pipe(
max()
).subscribe(observer);
value e
complete
This operator is used to get the maximum value emitted by our observables.
The Min operator operates on an Observable that emits numbers (or items that can be compared with a provided function), and when source Observable completes it emits a single item: the item with the smallest value.
import { Observer, of } from "rxjs";
import { min } from "rxjs/operators";
const observer: Observer<string> = {
next: x => console.log('value', x),
error: err => console.error('error', err),
complete: () => console.log('complete'),
};
of("a", "b", "e", "d", "c").pipe(
min()
).subscribe(observer);
value a
complete
This operator is used to get the minimum value emitted by our observables.
Applies an accumulator function over the source Observable, and returns the accumulated result when the source completes, given an optional seed value.
import { Observer, of } from "rxjs";
import { reduce } from "rxjs/operators";
const observer: Observer<number> = {
next: x => console.log('value', x),
error: err => console.error('error', err),
complete: () => console.log('complete'),
};
of(1,2,3,4,5,6,7,8,9).pipe(
reduce((acc, curr) => acc + curr, 0)
).subscribe(observer);
value 45
complete
This operator is like the reduce method of the array.
It can be used to reduce all the emitted values. The reduced algorithm has to be implemented by us.
Ok, That's all for today.
I hope these simple operators can help you in the future as they did me.
See you in the next article!
You can find the code of this article here.
