DEV Community

Cover image for RxJS - Conditional & Mathematical Operators
Luca Del Puppo for This is Learning

Posted on

RxJS - Conditional & Mathematical Operators

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);
Enter fullscreen mode Exit fullscreen mode
value 10
complete
Enter fullscreen mode Exit fullscreen mode

defaultIfEmpty Marble Diagram
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);
Enter fullscreen mode Exit fullscreen mode
value true
complete
Enter fullscreen mode Exit fullscreen mode

every Marble Diagram
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);
Enter fullscreen mode Exit fullscreen mode
value 5
complete
Enter fullscreen mode Exit fullscreen mode

find Marble Diagram
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);
Enter fullscreen mode Exit fullscreen mode
value 4
complete
Enter fullscreen mode Exit fullscreen mode

findIndex Marble Diagram
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);
Enter fullscreen mode Exit fullscreen mode
value true
complete
Enter fullscreen mode Exit fullscreen mode

isEmpty Marble Diagram
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);
Enter fullscreen mode Exit fullscreen mode
value 5
complete
Enter fullscreen mode Exit fullscreen mode

count Marble Diagram
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);
Enter fullscreen mode Exit fullscreen mode
value e
complete
Enter fullscreen mode Exit fullscreen mode

max Marble Diagram
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);
Enter fullscreen mode Exit fullscreen mode
value a
complete
Enter fullscreen mode Exit fullscreen mode

min Marble Diagram
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);
Enter fullscreen mode Exit fullscreen mode
value 45
complete
Enter fullscreen mode Exit fullscreen mode

reduce Marble Diagram
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.

Discussion (0)