Categories
JavaScript Rxjs

Rxjs Operators — Conditional and Booleans

Spread the love

Rxjs is a library for doing reactive programming. Creation operators are useful for generating data from various data sources to be subscribed to by Observers.

In this article, we’ll look at the defaultIfEmpty , every , find , findIndex and isEmpty operators.

defaultIfEmpty

The defaultIfEmpty operator returns an Observable that emits a value if the source Observable completes without emitting anything. Otherwise, the values from the source Observable are emitted.

It takes one optional value which is the defaultValue . The default for this is null . It’s the value that’ll be emitted if the source Observable is empty.

For example, we can use it as follows:

import { of } from "rxjs";  
import { defaultIfEmpty } from "rxjs/operators";  
of()  
  .pipe(defaultIfEmpty(1))  
  .subscribe(x => console.log(x));

We have an empty of() Observable, which will emit nothing before completing, so we’ll see 1 emitted.

every

The every operator returns an Observable that emits whether or not every item of the source satisfies the condition specified.

It takes up to 2 arguments. The first is a predicate function to determine if the item emitted by the source Observable meets a specified condition.

The second argument is the thisArg , which is optional and defaults to undefined . We set this to set the value of this in the predicate function.

We can use it as follows:

import { of } from "rxjs";  
import { every } from "rxjs/operators";  
const of$ = of(1, 2, 3, 4, 5, 6);  
const result = of$.pipe(every(val => val % 2 === 0));  
result.subscribe(x => console.log(x));

The code above checks if every value of the of$ Observable is an even number since we passed in val => val % 2 === 0 as the predicate function.

The result Observable emits false since not every number is even in the of$ Observable.

find

The find operator returns the first value emitted by the source Observable that matches the condition.

It takes up to 2 arguments. The first is a predicate function that returns the condition to check for matching the emitted values from the source Observable.

The second argument is the thisArg , which is optional and defaults to undefined . We set this to set the value of this in the predicate function.

We can use it as follows:

import { of } from "rxjs";  
import { find } from "rxjs/operators";  
const of$ = of(1, 2, 3, 4, 5, 6);  
const result = of$.pipe(find(val => val % 2 === 0));  
result.subscribe(x => console.log(x));

We should get 2 since it’s the first even number emitted by of$ , since we specified that val => val % 2 === 0 is the predicate that we want to check.

findIndex

The findIndex operator returns an Observable that emits of the first match of the value emitted from the source Observable that matches the condition returned by the predicate function.

It takes up to 2 arguments. The first is a predicate function that returns the condition to check for matching the emitted values from the source Observable.

The second argument is the thisArg , which is optional and defaults to undefined . We set this to set the value of this in the predicate function.

We can use it as follows:

import { of } from "rxjs";  
import { findIndex } from "rxjs/operators";  
const of$ = of(1, 2, 3, 4, 5, 6);  
const result = of$.pipe(findIndex(val => val % 2 === 0));  
result.subscribe(x => console.log(x));

We should get 1 since it’s the first index with an even number emitted by of$ , since we specified that val => val % 2 === 0 is the predicate that we want to check.

isEmpty

The isEmpty operator returns an Observable that emits false if the source Observable emit any values. Otherwise, true is emitted by the returned Observable.

It takes no arguments.

For example, we can use it as follows:

import { of } from "rxjs";  
import { isEmpty } from "rxjs/operators";  
const of$ = of();  
const result = of$.pipe(isEmpty());  
result.subscribe(x => console.log(x));

Then we should get true since of$ emits nothing.

The defaultIfEmpty operator returns an Observable that emits a default value if the source Observable emits nothing or emits the values of the source Observable if it emits something.

The every operator returns an Observable that emits whether or not every item of the source satisfies the condition specified.

The find and findIndex operators both search for the first value emitted by the source Observable that meets a condition, but find emits the object that meets the condition and findIndex emits the index of the object.

The isEmpty operator returns an Observable that emits true if it emits nothing and false otherwise.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *