# RxJS - Utility Operators

> Welcome back Guys, Today I'll show you some utility operators. Let's start :) tap Used to...

- **Author**: Luca Del Puppo (@puppo92) — AI Native Engineer at Nearform
- **Published**: Sep 24, 2021
- **Canonical URL**: https://delpuppo.net/blog/rxjs-getting-started/rxjs-utility-operators/
- **Series**: RxJS - Getting Started (Part 9 of 15) — https://delpuppo.net/blog/series/rxjs-getting-started/
- **Series LLMs.txt**: https://delpuppo.net/blog/series/rxjs-getting-started/llms.txt
- **Category**: RxJS
- **Tags**: javascript, typescript, rxjs
- **Hashnode Mirror**: https://blog.delpuppo.net/rxjs-utility-operators
- **Dev.to Mirror**: https://dev.to/playfulprogramming/rxjs-utility-operators-904
- **Blog Index LLMs.txt**: https://delpuppo.net/blog/llms.txt

## Series Context: RxJS - Getting Started

- Part 1: [RxJS - Observable](https://delpuppo.net/blog/rxjs-getting-started/rxjs-observable/)
- Part 2: [RxJS - Observer and Subscription](https://delpuppo.net/blog/rxjs-getting-started/rxjs-observer-and-subscription/)
- Part 3: [RxJS - Operators](https://delpuppo.net/blog/rxjs-getting-started/rxjs-operators/)
- Part 4: [RxJS - Marble Diagrams](https://delpuppo.net/blog/rxjs-getting-started/rxjs-marble-diagrams/)
- Part 5: [RxJS - Creation Operators](https://delpuppo.net/blog/rxjs-getting-started/rxjs-creation-operators/)
- Part 6: [RxJS - Filtering Operators](https://delpuppo.net/blog/rxjs-getting-started/rxjs-filtering-operators/)
- Part 7: [RxJS - Transformation Operators](https://delpuppo.net/blog/rxjs-getting-started/rxjs-transformation-operators/)
- Part 8: [RxJS - Join Operators](https://delpuppo.net/blog/rxjs-getting-started/rxjs-join-operators/)
- Part 9: [RxJS - Utility Operators](https://delpuppo.net/blog/rxjs-getting-started/rxjs-utility-operators/) **(Current Article)**
- Part 10: [RxJS - Conditional & Mathematical Operators](https://delpuppo.net/blog/rxjs-getting-started/rxjs-conditional-mathematical-operators/)
- Part 11: [RxJS - Error Handling Operators](https://delpuppo.net/blog/rxjs-getting-started/rxjs-error-handling-operators/)
- Part 12: [RxJS - Multicast Operator](https://delpuppo.net/blog/rxjs-getting-started/rxjs-multicast-operator/)
- Part 13: [RxJS - Custom Operators](https://delpuppo.net/blog/rxjs-getting-started/rxjs-custom-operators/)
- Part 14: [RxJS - Subjects](https://delpuppo.net/blog/rxjs-getting-started/rxjs-subjects/)
- Part 15: [RxJS - Marble Testing](https://delpuppo.net/blog/rxjs-getting-started/rxjs-marble-testing/)

---

Welcome back Guys,
Today I'll show you some utility operators.
Let's start :)
 
* **[tap](https://rxjs.dev/api/operators/tap)**

> Used to perform side-effects for notifications from the source observable

```ts
import { of } from 'rxjs'
import { tap } from 'rxjs/operators'


of('a', 'b', 'c')
  .pipe(
      tap({
          next: x => console.log(`tap: ${x}`),
          complete: () => console.log('tap: complete'),
          error: err => console.log(`tap: error: ${err}`)
      })
  )
  .subscribe()
```
```console
tap: a
tap: b
tap: c
tap: complete
```
This operator helps us to get some info about the observable during its execution. This operator is equal to the subscriber and it uses three methods to get info: next, complete, and error.
What could happen in these three methods? Exactly what you want :) You can run a side-effect or log the values. Usually I prefer logging info in this operator and not run side effects because at times side effects are difficult to test.

* **[delay](https://rxjs.dev/api/operators/delay)**

> Delays the emission of items from the source Observable by a given timeout or until a given Date.

```ts
import { of } from 'rxjs'
import { delay, tap } from 'rxjs/operators'


of('a', 'b', 'c')
  .pipe(
      tap(x => console.log(`${new Date().toLocaleTimeString()} tap before delay: ${x}`)),
      delay(1000),
      tap(x => console.log(`${new Date().toLocaleTimeString()} tap after delay: ${x}`)),
  )
  .subscribe()
```
```console
17:08:26 tap before delay: a
17:08:26 tap before delay: b
17:08:26 tap before delay: c
17:08:27 tap after delay: a
17:08:27 tap after delay: b
17:08:27 tap after delay: c
```
![delay Marble Diagram](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3a3bbb7mnlaunt47ke9o.jpg)
This operator is used to wait some specific time before emitting the value.

* **[timestamp](https://rxjs.dev/api/operators/timestamp)**

> Attaches a timestamp to each item emitted by an observable indicating when it was emitted

```ts
import { of } from 'rxjs'
import { timestamp } from 'rxjs/operators'

of('a', 'b', 'c')
  .pipe(
      timestamp()
  )
  .subscribe(console.log)
```
```console
{ value: 'a', timestamp: 1629385746523 }
{ value: 'b', timestamp: 1629385746528 }
{ value: 'c', timestamp: 1629385746528 }
```
This operator is used to attach a timestamp to each emitted item. The timestamp indicates the time when the value was emitted.
This operator can be helpful during debugging or if we need to have info about the time emission of the value.

* **[timeout](https://rxjs.dev/api/operators/timeout)**

> Errors if Observable does not emit a value in given time span.

```ts
import { Observable, throwError } from 'rxjs';
import { timeout } from 'rxjs/operators';

const source$ = new Observable<number>(subscriber => {
    let id: NodeJS.Timeout | undefined
    (function next(count = 0) {
        if (count > 10) {
            subscriber.complete();
            return;
        }
        id = setTimeout(() => {
            subscriber.next(count)
            next(count + 1)
        }, Math.random() > 0.9 ? 2000 : 1000);
    })()

    return () => {
        if (id) {
            clearTimeout(id);
        }
    }

})

source$
  .pipe(
      timeout({ each: 1500, with: info => throwError(() => new Error(`Timeout ${1500}ms: info: ${JSON.stringify(info)}`)) }),
  )
  .subscribe({
      next: console.log,
      error: error => {
          console.error(`Something Wrong!`)
          console.error(error.message)
      }
  })
```
```console
0
1
2
3
4
5
6
7
8
Something Wrong!
Timeout 1500ms: info: {"meta":null,"lastValue":null,"seen":9}
```
This operator checks the time of the execution of the observable, if the value is not emitted within the timeout time the operator throws an error.

* **[toArray](https://rxjs.dev/api/operators/toArray)**

> Collects all source emissions and emits them as an array when the source completes.

```ts
import { of } from 'rxjs'
import { toArray } from 'rxjs/operators'


of('a', 'b', 'c', 'd', 'e', 'f', 'g', 'h')
  .pipe(
      toArray()
  )
  .subscribe(console.log)
```
```console
[
  'a', 'b', 'c',
  'd', 'e', 'f',
  'g', 'h'
]
```
![toArray Marble Diagram](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/btr18a4jnjfusx3dke3a.jpg)
This operator converts a sequence of values in one array, where all the array's items are the emitted values in sequence.

Ok Guys, from the Utilities Operators is all.
[in the GitHub repository](https://github.com/Puppo/rxjs-getting-started/tree/09-utility-operators) you can find all the code of this article.

See you soon,
Bye Bye!