pipe와 compose 만들기
왼쪽에서 오른쪽으로, 또는 오른쪽에서 왼쪽으로 함수를 조합합니다.
pipe와 compose 만들기은(는) CoddyKit의 무료 JavaScript Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 JavaScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
두 함수에서 여러 함수로
두 인수를 받는 compose는 제한적입니다. 실제 파이프라인은 여러 단계를 연결합니다. 이 레슨에서는 reduce와 reduceRight를 사용해 범용 compose와 pipe를 만들어 보겠습니다.
pipe: 왼쪽에서 오른쪽으로
pipe는 실행 순서대로 읽습니다. 첫 번째 함수가 먼저 실행됩니다. pipe(a, b, c)(x)는 c(b(a(x)))와 같습니다. 대부분의 사람은 이를 compose보다 더 자연스럽게 느낍니다.
const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);
const inc = n => n + 1;
const double = n => n * 2;
console.log(pipe(inc, double)(5));reduce가 pipe를 작동시키는 방식
reduce는 입력값으로 누적을 시작하고 각 함수를 차례로 적용하면서 각 결과를 다음 함수에 전달합니다. 초기값 x가 연쇄의 시작점이 됩니다.
const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);
const steps = pipe(
n => n + 1,
n => n * 3,
n => n - 2
);
console.log(steps(4));reduceRight를 사용하는 compose
compose는 순서를 뒤집은 pipe입니다. reduceRight를 사용하면 함수 목록을 끝에서부터 순회하므로 가장 오른쪽 함수가 먼저 실행되어 f(g(x))와 일치합니다.
const compose = (...fns) => x => fns.reduceRight((acc, fn) => fn(acc), x);
const inc = n => n + 1;
const double = n => n * 2;
console.log(compose(inc, double)(5));pipe와 compose는 서로 거울과 같습니다
같은 함수 목록이라도 pipe와 compose에서는 방향이 뒤집히기 때문에 결과가 달라집니다. 단계를 어떤 방식으로 읽고 싶은지에 따라 선택하세요.
const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);
const compose = (...fns) => x => fns.reduceRight((acc, fn) => fn(acc), x);
const inc = n => n + 1;
const square = n => n * n;
console.log(pipe(inc, square)(3));
console.log(compose(inc, square)(3));뒤집힌 pipe로서의 compose
함수 목록을 뒤집으면 pipe를 사용해 compose를 정의할 수 있습니다. 이는 두 함수가 얼마나 밀접하게 관련되어 있는지 보여 줍니다.
const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);
const compose = (...fns) => pipe(...fns.reverse());
const inc = n => n + 1;
const double = n => n * 2;
console.log(compose(inc, double)(5));실제 텍스트 파이프라인
pipe를 사용해 작은 문자열 함수들로 슬러그 생성기를 만들어 보겠습니다. 각 단계는 한 가지 작업만 수행하므로 단독으로 쉽게 테스트할 수 있습니다.
const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);
const slugify = pipe(
s => s.trim(),
s => s.toLowerCase(),
s => s.replace(/\s+/g, '-')
);
console.log(slugify(' Hello World Example '));배열 연산 합성하기
파이프라인은 배열을 포함한 모든 데이터 형식에서 작동합니다. 필터링과 매핑을 하나의 이름 있는 변환으로 결합해 보세요.
const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);
const process = pipe(
arr => arr.filter(n => n % 2 === 0),
arr => arr.map(n => n * 10)
);
console.log(process([1, 2, 3, 4, 5, 6]));항등 함수의 예외 상황
함수 없이 pipe()를 호출하면 입력이 변경되지 않은 채 반환됩니다. reduce가 시드값을 그대로 반환하기 때문입니다. 이러한 항등 동작 덕분에 단계가 0개인 경우에도 도우미를 안전하게 호출할 수 있습니다.
const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);
const identity = pipe();
console.log(identity(42));
console.log(identity('unchanged'));커링과 결합하기
커링되고 일부 적용된 함수는 파이프라인에 바로 연결할 수 있습니다. 각 함수가 깔끔한 한 인수 단계가 됩니다.
const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);
const add = a => b => a + b;
const times = a => b => a * b;
const calc = pipe(add(3), times(2), add(-1));
console.log(calc(5));pipe와 compose 중 선택하기
실행 순서에 따라 단계를 위에서 아래로 읽고 싶다면 pipe를 사용하세요. 수학적 표기인 f(g(x))에 맞추고 싶다면 compose를 사용하세요. 둘 다 한 줄로 작성하는 reduce 래퍼이며 함수형 라이브러리 전반에서 널리 사용됩니다.
const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);
const normalize = pipe(
s => s.trim(),
s => s.replace(/[^a-z0-9]+/gi, ' '),
s => s.toUpperCase()
);
console.log(normalize(' a-b_c!d '));빠른 확인
어떤 배열 메서드가 compose를 오른쪽에서 왼쪽으로 실행하게 할까요?
복습: pipe와 compose
일반적인 합성 도우미를 만들었습니다.
- pipe는
reduce를 사용해 왼쪽에서 오른쪽으로 실행합니다. - compose는
reduceRight를 사용해 오른쪽에서 왼쪽으로 실행합니다. - 함수 목록을 뒤집으면
compose를pipe로 정의할 수 있습니다. - 빈 파이프라인은 항등 함수처럼 동작하며, 커링된 단계도 깔끔하게 연결됩니다.
자주 묻는 질문
“pipe와 compose 만들기” 강의는 무료인가요?
네 — “pipe와 compose 만들기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 JavaScript Academy 강의 전체를 잠금 해제할 수 있습니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“pipe와 compose 만들기”에서 뭘 배우나요?
왼쪽에서 오른쪽으로, 또는 오른쪽에서 왼쪽으로 함수를 조합합니다. 브라우저에서 직접 실행하는 실습 코드로 JavaScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
JavaScript Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 JavaScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.
“pipe와 compose 만들기” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 JavaScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 JavaScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.