🛠️ 처음부터 만드는 Pipe — 함수를 좌에서 우로 연결하기
# 함수형 프로그래밍의 핵심: Pipe
Compose와 비슷하지만, 방향이 반대입니다. Pipe는 좌에서 우로 함수를 연결하기 때문에 읽기가 더 자연스럽습니다.
```javascript
// Compose: 우에서 좌로 (f(g(h(x))))
const result = compose(double, addOne, multiply)(5);
// 읽기 어려움: 아래에서부터 위로 읽어야 함
// Pipe: 좌에서 우로 (더 자연스러움)
const result = pipe(multiply, addOne, double)(5);
// 순서대로 읽을 수 있음
```
```javascript
function pipe(...fns) {
return (initialValue) =>
fns.reduce((acc, fn) => fn(acc), initialValue);
}
// 사용 예
const multiply = (x) => x * 2;
const addOne = (x) => x + 1;
const double = (x) => x * 2;
const transform = pipe(multiply, addOne, double);
console.log(transform(5)); // ((5 * 2) + 1) * 2 = 22
```
```javascript
const getInitials = (str) => str.split(' ').map(w => w[0]).join('').toUpperCase();
const trim = (str) => str.trim();
const toUpperCase = (str) => str.toUpperCase();
const formatName = pipe(trim, toUpperCase, getInitials);
console.log(formatName(' john doe ')); // 'JD'
```
```typescript
function pipe(
...fns: Array<(arg: any) => any>
): (initialValue: T) => any {
return (initialValue: T) =>
fns.reduce((acc, fn) => fn(acc), initialValue);
}
```
언제 쓸까? 데이터 변환 파이프라인, 미들웨어 체이닝, 함수 조합이 필요할 때. Compose보다 읽기 쉽다는 게 가장 큰 장점입니다.
참고: [함수형 프로그래밍 - MDN](https://developer.mozilla.org/en-US/docs/Glossary/Functional_programming)
Compose와 비슷하지만, 방향이 반대입니다. Pipe는 좌에서 우로 함수를 연결하기 때문에 읽기가 더 자연스럽습니다.
```javascript
// Compose: 우에서 좌로 (f(g(h(x))))
const result = compose(double, addOne, multiply)(5);
// 읽기 어려움: 아래에서부터 위로 읽어야 함
// Pipe: 좌에서 우로 (더 자연스러움)
const result = pipe(multiply, addOne, double)(5);
// 순서대로 읽을 수 있음
```
Pipe 구현
```javascript
function pipe(...fns) {
return (initialValue) =>
fns.reduce((acc, fn) => fn(acc), initialValue);
}
// 사용 예
const multiply = (x) => x * 2;
const addOne = (x) => x + 1;
const double = (x) => x * 2;
const transform = pipe(multiply, addOne, double);
console.log(transform(5)); // ((5 * 2) + 1) * 2 = 22
```
실전: API 데이터 변환
```javascript
const getInitials = (str) => str.split(' ').map(w => w[0]).join('').toUpperCase();
const trim = (str) => str.trim();
const toUpperCase = (str) => str.toUpperCase();
const formatName = pipe(trim, toUpperCase, getInitials);
console.log(formatName(' john doe ')); // 'JD'
```
TypeScript 타입 안전
```typescript
function pipe
...fns: Array<(arg: any) => any>
): (initialValue: T) => any {
return (initialValue: T) =>
fns.reduce((acc, fn) => fn(acc), initialValue);
}
```
언제 쓸까? 데이터 변환 파이프라인, 미들웨어 체이닝, 함수 조합이 필요할 때. Compose보다 읽기 쉽다는 게 가장 큰 장점입니다.
참고: [함수형 프로그래밍 - MDN](https://developer.mozilla.org/en-US/docs/Glossary/Functional_programming)
👁 0 views
Comments (0)
💬
No comments yet.
Be the first to comment!