🛠️ 처음부터 만드는 Pipe — 왼쪽에서 오른쪽으로 함수를 합성하기
# Pipe vs Compose
Compose는 오른쪽에서 왼쪽으로 함수를 실행해요. Pipe는 반대입니다. 왼쪽에서 오른쪽으로 순서대로 실행하죠.
```javascript
const pipe = (...fns) => (initialValue) =>
fns.reduce((acc, fn) => fn(acc), initialValue);
// 사용 예
const add = (x) => x + 1;
const multiply = (x) => x * 2;
const toString = (x) => String(x);
const transform = pipe(add, multiply, toString);
console.log(transform(5)); // "12" (5+1=6, 6*2=12)
```
Compose는 수학적이지만, 코드를 읽을 때 오른쪽부터 왼쪽으로 읽어야 해요. Pipe는 위에서 아래로, 왼쪽에서 오른쪽으로 자연스럽게 읽힙니다.
```javascript
// Compose 방식 (오른쪽 → 왼쪽)
const composed = compose(toString, multiply, add);
// Pipe 방식 (왼쪽 → 오른쪽) ← 더 직관적!
const piped = pipe(add, multiply, toString);
```
```javascript
const users = [{id: 1, age: 25}, {id: 2, age: 17}];
const filterAdults = (arr) => arr.filter(u => u.age >= 18);
const extractIds = (arr) => arr.map(u => u.id);
const join = (arr) => arr.join(', ');
const getAdultIds = pipe(filterAdults, extractIds, join);
console.log(getAdultIds(users)); // "1"
```
Pipe는 함수형 프로그래밍의 핵심. 작은 함수들을 조립해서 복잡한 로직을 만들어요.
Compose는 오른쪽에서 왼쪽으로 함수를 실행해요. Pipe는 반대입니다. 왼쪽에서 오른쪽으로 순서대로 실행하죠.
```javascript
const pipe = (...fns) => (initialValue) =>
fns.reduce((acc, fn) => fn(acc), initialValue);
// 사용 예
const add = (x) => x + 1;
const multiply = (x) => x * 2;
const toString = (x) => String(x);
const transform = pipe(add, multiply, toString);
console.log(transform(5)); // "12" (5+1=6, 6*2=12)
```
왜 필요한가?
Compose는 수학적이지만, 코드를 읽을 때 오른쪽부터 왼쪽으로 읽어야 해요. Pipe는 위에서 아래로, 왼쪽에서 오른쪽으로 자연스럽게 읽힙니다.
```javascript
// Compose 방식 (오른쪽 → 왼쪽)
const composed = compose(toString, multiply, add);
// Pipe 방식 (왼쪽 → 오른쪽) ← 더 직관적!
const piped = pipe(add, multiply, toString);
```
실전: 데이터 변환 파이프라인
```javascript
const users = [{id: 1, age: 25}, {id: 2, age: 17}];
const filterAdults = (arr) => arr.filter(u => u.age >= 18);
const extractIds = (arr) => arr.map(u => u.id);
const join = (arr) => arr.join(', ');
const getAdultIds = pipe(filterAdults, extractIds, join);
console.log(getAdultIds(users)); // "1"
```
Pipe는 함수형 프로그래밍의 핵심. 작은 함수들을 조립해서 복잡한 로직을 만들어요.
👁 0 views
Comments (0)
💬
No comments yet.
Be the first to comment!