[RxJS] Operator - pipe, zip

pipe

pipe를 사용하여 여러 operator들을 조합하여 사용할 수 있습니다. 이 때 파이프는 함수 여러개를 함수 하나인 것처럼 변환하는 함수입니다. 그래서 pipe() 함수는 인자로 조합할 함수를 받아서 이 함수들을 조합한 새로운 함수를 생성하고, 옵저버블에서 데이터가 전달될 때 순서대로 실행합니다.

조합된 함수를 실행하려면 subscribe()를 실행해서 구독해야 합니다.

pipe(operations: ...): Observable

예제

import { of, pipe } from 'rxjs';
import { filter, map } from 'rxjs/operators';

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

// 옵저버블을 처리하는 함수를 정의합니다.
const squareOddVals = pipe(
  filter((n: number) => n % 2 !== 0),
  map(n => n * n)
);

// filter()와 map()을 실행하는 옵저버블을 생성합니다.
const squareOdd = squareOddVals(nums);

// 구독을 시작합니다.
squareOdd.subscribe(x => console.log(x));

zip

다수의 Observable을 결합하여 각 입력 Observable의 값에서 순서대로 값이 계산되는 Observable을 만듭니다.

zip(...args: unknown[]): Observable<unknown>

예제

import { zip, of } from 'rxjs';
import { map } from 'rxjs/operators';

let age$ = of(27, 25, 29);
let name$ = of('Foo', 'Bar', 'Beer');
let isDev$ = of(true, true, false);

zip(age$, name$, isDev$).pipe(
  map(([age, name, isDev]) => ({ age, name, isDev }))
)
.subscribe(x => console.log(x));

// Outputs
// { age: 27, name: 'Foo', isDev: true }
// { age: 25, name: 'Bar', isDev: true }
// { age: 29, name: 'Beer', isDev: false }