RxJS library - pipe

RxJS = Reactive Extensions for JavaScript

RxJS is a library for composing asynchronous and event-based programs by using observable sequences.

RxJS는 reactive programming에 쓰이는 라이브러리이며,
observables을 사용하여 '비동기', 콜백 코드를 쉽게 만들 수 있도록 한다.

---

Operator은 function이라고 보면 되는데,
observables에 사용하여 좀 더 정교한 작업을 할 수 있게 도와준다.

RxJS가 제공하는 operator은 API를 참고하면된다 (https://rxjs.dev/api)

수 많은 operator들 중에 자주 사용하는 것들은 이렇게 있다 :

AREA	OPERATORS
Creation	from,fromEvent, of
Combination	combineLatest, concat, merge, startWith , withLatestFrom, zip
Filtering	debounceTime, distinctUntilChanged, filter, take, takeUntil
Transformation	bufferTime, concatMap, map, mergeMap, scan, switchMap
Utility	tap
Multicasting	share

---

operator = function이기 때문에
체이닝을 하여 여러 operator들을 사용할 수 있다.

op4()(op3()(op2()(op1()(obs))))

하지만,
여러개의 operator들을 이런식으로 사용하면 읽기 힘들다.

우리는 'pipe()'를 사용하여 읽기 쉽도록 사용할 수 있다.

public pipeFunction() {
    const pipeResult = of(1, 2, 3, 4, 5)
      .pipe(
        filter(n => n % 2 !== 0),
        map(n => n * n)
      );

Pipe()는 RxJS Observable에서 사용할 수 있는 함수인데,
위와 같은 장점 때문에 operator를 하나만 사용하는 경우에도
'obs.pipe(op())'형태로 pipe를 사용하는 것을 권장한다.

 // subscribe
    pipeResult.subscribe(x => console.log(x)); // 1, 9, 25

pipeFunction()에서 pipe를 통해 (1)filter, (2)map을 한 observable를
subscribe하여 하나씩 콘솔에 찍어보았다.

---

Pipe()를 사용하여 새로운 operator를 커스텀하여 사용할 수도 있다.

 public customPipe() {
    const nums = of(1, 2, 3, 4, 5);

    // create custom function
    const cutsom = pipe(
      filter((num: number) => num % 2 !== 0),
      map(num => num * num)
    );

    // use custom function
    const result = cutsom(nums);
    // subscribe and print
    result.subscribe(x => console.log(x)); // 1, 9, 25
  }

const custom
pipe()를 사용하여
2개의 operator(filter, map)들을 적용하는 1개의 operator를 만들었다.

custom(nums)
이렇게 커스텀한 operator에 observable를 넣었다.

subscribe
새로 만들어진 observable은
기존 observable -> filter() + map() => 새로운 observable 리턴되어진 것이다.

---

추가적으로,

observableInstance.pipe(operator())을 통해 새로운 observable을 만들어냈을때
기존의 observable은 변경되지 않은 상태로 유지되고
operator들이 적용된 새로운 observable이 리턴된다.

즉,

output observable (리턴된 새로운 observable)을 subscribe하는 것은
input observable (기존의 observable) 또한 subscribe하는 것이다.

---

참고 : 

https://angular.io/guide/rx-library

https://rxjs-dev.firebaseapp.com/guide/operators

https://rxjs-dev.firebaseapp.com/guide/operators