# RxJS - Operators

> Hi Guys and welcome back, today I introduce the concepts of Operators. Operators are functions. Isn't...

- **Author**: Luca Del Puppo (@puppo92) — AI Native Engineer at Nearform
- **Published**: Sep 10, 2021
- **Canonical URL**: https://delpuppo.net/blog/rxjs-getting-started/rxjs-operators/
- **Series**: RxJS - Getting Started (Part 3 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-operators
- **Dev.to Mirror**: https://dev.to/playfulprogramming/rxjs-operators-20mi
- **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/) **(Current Article)**
- 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/)
- 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/)

---

Hi Guys and welcome back, today I introduce the concepts of **Operators**.
Operators are functions. Isn't it easy? Operators are functions of two types in RxJS: _Creation_ or _Pipeable_.

## Creation
Creation operators are simple functions and their scope is to create new observables.

```ts
import { of } from "rxjs";

of(1, 2, 3, 4).subscribe(x => console.log("[of] result", x));
```

```console
[of] result 1
[of] result 2
[of] result 3
[of] result 4
```
The most commons creation operators are: ajax, empty, from, fromEvent, interval, of, throwError, timer, combineLatest, concat, forkJoin, merge and zip.

In the next article I'll deepen these types of operators, today I just make an overview of the operator's types.

## Pipeable
Pipeable operators are functions that take an Observable as input and return another observable. These functions are pure, so the input observable does not change but the function returns a new one. The main scopes of these operators are: transform, filter, and work with the input observable.
An example of pipeable operators:
```ts
import { Observable } from "rxjs";
import { map, tap } from "rxjs/operators";

new Observable<number>(observer => {
  observer.next(1);
  observer.next(2);
  observer.next(3);
  observer.next(4);

  observer.complete();
})
  .pipe(
    map(val => val * 2),
    tap(res => {
      console.log("[pipeable tap]", res);
    })
  )
  .subscribe();
```
```
[pipeable tap] 2
[pipeable tap] 4
[pipeable tap] 6
[pipeable tap] 8
```
The pipeable operators are divided by scopes and the scopes are: Transformation, Filtering, Join, Multicasting, Error Handling, Utility, Conditional and Boolean and Mathematical and Aggregate.

As you can understand you can combine Creation operators with Pipeable operators to manage your business logic like here

```ts
import { timer } from "rxjs";
import { take } from "rxjs/operators";

timer(0, 1000)
  .pipe(take(10))
  .subscribe(x => console.log("[timer] result", x));
```
```
[timer] result 0
[timer] result 1
[timer] result 2
[timer] result 3
[timer] result 4
[timer] result 5
[timer] result 6
[timer] result 7
[timer] result 8
[timer] result 9
```

With this last article, I have introduced all the pillars to the base of the RxJS library and the Reactive Programming. In the next article, we'll start to explore the operator's world.

That's all guys,
See you soon!

_[in the GitHub repository](https://github.com/Puppo/rxjs-getting-started/tree/03-operators) you can find the code of this article._