pipe operator를 통해 오퍼레이터 처리

https://choi95.tistory.com/89

RxJS debounceTime operator를 통해 Event request 줄이기

---

이전 포스팅에서 Operator는 현재 Observable 인스턴스 기반으로 항상 새로운 Observable 인스턴스를 반환할 수 있다는 사실을 알았다. 매번 새로운 인스턴스를 반환한다는 말은 다음과 같이 도트 체이닝을 구성할 수 있다는 의미이다.

 observable
    .map(event => event.target.value)
    .debounceTime(delayTime)
    .distinctUntilChanged()
    .subscribe({
    	next: function(value) {
		console.log(value);
    }
    })

하지만 도트 체이닝을 구성하기 위해서는 Observable 객체가 모든 오퍼레이터를 지니고 있어야 한다.

• Observable.prototype에 사용하는 모든 오퍼레이터를 추가: 불필요한 오퍼레이터를 가지고 있어야 해서 파일 사이즈 증가

이를 대신에 pipe 오퍼레이터를 사용하면 트리세이킹(tree shaking)을 자유롭게 할 수 있다.

트리세이킹은 사용하지 않는 모듈을 번들링할 때 제거하는 기능을 일컫는다.

또한 pipe 오퍼레이터는 함수 형태로만 오퍼레이터가 만들어지기 때문에 Observable과의 결합도를 결부시켜 오퍼레이터를

용이하게 작성할 수 있다.

 observable
 	.pipe(
    map(event => event.target.value),
    debounceTime(delayTime),
    distinctUntilChanged(),
    subscribe({
    	next: function(value) {
		console.log(value);
    }
    }))

 

Pipe 함수

PipeLine in SoftWare

In software engineering, a pipeline consists of a chain of processing elements (processes, threads, coroutines, functions, etc.), arranged so that the output of each element is the input of the next; the name is by analogy to a physical pipeline.

소프트웨어 엔지니어링에서의 파이프 라인은 일련의 처리 요소로 구성되며 각 요소의 출력이 다음 요소의 입력이 되도록 배열된다.

---

Pure function(순수 함수)

• 동일한 인자가 전달되면 그 함수의 실행 결과는 항상 동일한 결과를 반환
• 어떠한 상태나 데이터에 의존하지 않음
• side-effect를 갖지 않음

예를 들어 다음과 같은 두 함수가 있다고 가정해 보자.

const addFive = a => a + 5;
const addFour = a => a + 4;

const ten = addFive(5);
const fourTeen = addFour(ten);

//const fourTeen = addFour(addFive(5))

현재는 함수의 호출이 간단하여 별 문제가 없지만 이렇게 함수의 반환값이 다른 함수의 인자 값으로 전달되는 경우, 상황에 따라서 다른 값을

반환하면 그 다음 함수의 입장에서는 상황에 따라 바뀔 수 있는 불안정한 값이 인자 값으로 들어오는 셈이므로, 결국 반환값 역시 불안정 할

수 밖에 없다.

 

즉, Pipe function은 이러한 순수 함수들을 합성하여 하나의 결과 값을 반환해주는 역할을 한다.

const pipe = (...functions) => (parameter) => functions.reduce((parameter, nextFn) => nextFn(arg), args),

Rest 파라미터를 통해 전달 받은 함수들을 Array 형태로 적재하고 해당 Array에 reduce 메서드를 사용함으로써 하나의 값을 반환한다.

중첩 함수인 이유는 Rest param은 반드시 매개 변수 마지막 순서에 위치해야 하고 이 때문에 함수를 넘기는 순서가 바꼈으므로 값의 전달

위치 역시 바꿔야 된다.

이를 대신에 클로저를 사용하여 다음과 같이 파이프 함수를 호출할 수 있다.

pipe(func1, func2)(parameter)