🛠️ 처음부터 만드는 Pipe — 함수를 좌에서 우로 연결하기
# Pipe 함수 만들기
Compose는 함수를 우에서 좌로 연결하지만, Pipe는 좌에서 우로 연결합니다. 읽기 쉬운 순서대로 데이터가 흘러가죠.
```javascript
// Pipe: 좌 → 우 방향 (읽기 직관적)
const result = pipe(
5,
x => x * 2, // 10
x => x + 3, // 13
x => x / 2 // 6.5
);
```
```javascript
// 기본 구현
const pipe = (initialValue, ...fns) => {
return fns.reduce((acc, fn) => fn(acc), initialValue);
};
// 더 유연한 구현 (함수만 받는 버전)
const pipe = (...fns) => {
return (initialValue) => {
return fns.reduce((acc, fn) => fn(acc), initialValue);
};
};
```
```javascript
// API 응답 처리
const processUser = pipe(
fetchUser,
user => ({ ...user, fullName: `${user.first} ${user.last}` }),
user => user.fullName.toUpperCase()
);
const result = await processUser(userId);
// 함수형 데이터 변환
const getAdultNames = pipe(
users => users.filter(u => u.age >= 18),
users => users.map(u => u.name),
names => names.sort()
);
```
| Compose | Pipe |
|---------|------|
| 우 → 좌 | 좌 → 우 |
| 수학 함수처럼 읽힘 | 데이터 흐름처럼 읽힘 |
| 중첩 호출 | 선형 흐름 |
Compose는 이론적, Pipe는 실무적입니다.
Compose는 함수를 우에서 좌로 연결하지만, Pipe는 좌에서 우로 연결합니다. 읽기 쉬운 순서대로 데이터가 흘러가죠.
기본 개념
```javascript
// Pipe: 좌 → 우 방향 (읽기 직관적)
const result = pipe(
5,
x => x * 2, // 10
x => x + 3, // 13
x => x / 2 // 6.5
);
```
구현
```javascript
// 기본 구현
const pipe = (initialValue, ...fns) => {
return fns.reduce((acc, fn) => fn(acc), initialValue);
};
// 더 유연한 구현 (함수만 받는 버전)
const pipe = (...fns) => {
return (initialValue) => {
return fns.reduce((acc, fn) => fn(acc), initialValue);
};
};
```
실제 사용
```javascript
// API 응답 처리
const processUser = pipe(
fetchUser,
user => ({ ...user, fullName: `${user.first} ${user.last}` }),
user => user.fullName.toUpperCase()
);
const result = await processUser(userId);
// 함수형 데이터 변환
const getAdultNames = pipe(
users => users.filter(u => u.age >= 18),
users => users.map(u => u.name),
names => names.sort()
);
```
Compose vs Pipe
| Compose | Pipe |
|---------|------|
| 우 → 좌 | 좌 → 우 |
| 수학 함수처럼 읽힘 | 데이터 흐름처럼 읽힘 |
| 중첩 호출 | 선형 흐름 |
Compose는 이론적, Pipe는 실무적입니다.
👁 0 views
Comments (0)
💬
No comments yet.
Be the first to comment!