함수 조합
작은 함수들을 하나의 처리 흐름으로 결합합니다.
함수 조합은(는) CoddyKit의 무료 JavaScript Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 JavaScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
함수 합성이란 무엇인가요
함수 합성은 작은 함수들을 하나로 결합합니다. f와 g를 합성하면 g의 출력이 f의 입력이 되는 함수가 만들어집니다.
수학적으로는 compose(f, g)(x) = f(g(x))입니다. 데이터는 오른쪽에서 왼쪽으로 흐릅니다.
두 개의 작은 함수
합성은 단순하고 한 가지 목적만 수행하는 함수에서 시작합니다. 여기서는 결합할 두 가지 변환을 살펴보겠습니다.
const double = x => x * 2;
const increment = x => x + 1;
console.log(double(5));
console.log(increment(5));손으로 합성하기
가장 명시적인 합성은 한 함수의 결과를 다른 함수에 전달해 호출하는 것입니다. 안쪽부터 바깥쪽으로 읽으세요. 먼저 increment가 실행되고, 그다음 double이 실행됩니다.
const double = x => x * 2;
const increment = x => x + 1;
const result = double(increment(5));
console.log(result);두 함수를 위한 compose 함수
이 패턴을 재사용 가능한 compose로 감싸 보겠습니다. f와 g를 받아 g를 먼저 적용하고 그다음 f를 적용하는 새로운 함수를 반환합니다.
const compose = (f, g) => x => f(g(x));
const double = x => x * 2;
const increment = x => x + 1;
const doubleThenAfterIncrement = compose(double, increment);
console.log(doubleThenAfterIncrement(5));순서가 중요합니다
합성은 교환법칙이 성립하지 않습니다. 오른쪽 함수가 먼저 실행되므로 compose(f, g)와 compose(g, f)는 서로 다릅니다.
const compose = (f, g) => x => f(g(x));
const double = x => x * 2;
const increment = x => x + 1;
console.log(compose(double, increment)(5));
console.log(compose(increment, double)(5));오른쪽에서 왼쪽으로 읽기
compose(a, b, c)(x)에서 호출은 a(b(c(x)))로 평가됩니다. 가장 오른쪽 함수가 입력을 가장 먼저 처리합니다. 버그를 피하려면 이 방향을 기억해 두세요.
const compose = (f, g) => x => f(g(x));
const shout = s => s.toUpperCase();
const exclaim = s => s + '!';
const loud = compose(shout, exclaim);
console.log(loud('hello'));문자열 변환 합성하기
합성은 텍스트 파이프라인에 매우 유용합니다. trim, 소문자 변환, 공백 교체를 각각 작은 함수로 만들어 차례로 적용할 수 있습니다.
const compose = (f, g) => x => f(g(x));
const trim = s => s.trim();
const lower = s => s.toLowerCase();
const clean = compose(lower, trim);
console.log(clean(' HELLO World '));숫자와 함께 사용하는 합성
수학 연산을 연결하는 것은 전형적인 예입니다. 각 함수는 그 자체로 간단하게 테스트할 수 있습니다.
const compose = (f, g) => x => f(g(x));
const square = x => x * x;
const negate = x => -x;
const negativeSquare = compose(negate, square);
console.log(negativeSquare(4));compose를 사용하는 이유
합성을 사용하면 각 함수가 자신의 역할에 집중하면서 재사용 가능해지고, 중첩 호출로 인한 복잡함도 줄어듭니다. 코드 곳곳에 f(g(h(x)))를 흩어 놓는 대신, 이름이 있는 파이프라인을 한 번 만들고 재사용할 수 있습니다.
const compose = (f, g) => x => f(g(x));
const toCents = d => Math.round(d * 100);
const addLabel = c => c + ' cents';
const priceLabel = compose(addLabel, toCents);
console.log(priceLabel(2.5));합성과 커링 함께 사용하기
커링된 함수는 각각 한 인수 함수를 반환하므로 합성이 기대하는 형태와 정확히 일치하며 아름답게 합성됩니다.
const compose = (f, g) => x => f(g(x));
const add = a => b => a + b;
const multiply = a => b => a * b;
const addThenDouble = compose(multiply(2), add(3));
console.log(addThenDouble(5));여러 함수를 향해
지금까지 compose는 두 함수를 처리했습니다. 실제 합성은 임의의 개수의 함수를 지원합니다. 다음 레슨에서는 reduce를 사용해 일반적인 compose와 왼쪽에서 오른쪽으로 처리하는 짝인 pipe를 만들어 보겠습니다.
const compose = (f, g) => x => f(g(x));
const a = x => x + 1;
const b = x => x * 2;
const c = x => x - 3;
const combined = compose(a, compose(b, c));
console.log(combined(10));빠른 확인
compose = (f, g) => x => f(g(x))일 때, double이 2를 곱하고 increment가 1을 더한다면 compose(double, increment)(5)는 무엇을 반환할까요?
복습: 함수 합성
함수를 결합하는 방법을 배웠습니다.
compose(f, g)(x)는 오른쪽에서 왼쪽으로 평가되는f(g(x))와 같습니다.- 순서가 중요합니다. 합성에는 교환법칙이 성립하지 않습니다.
- 합성을 사용하면 함수가 작고 이름이 있으며 재사용 가능하게 유지됩니다.
- 커링된 함수는 깔끔하게 합성됩니다. 다음에는 임의의 개수의 함수로 일반화해 보겠습니다.
자주 묻는 질문
“함수 조합” 강의는 무료인가요?
네 — “함수 조합” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 JavaScript Academy 강의 전체를 잠금 해제할 수 있습니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“함수 조합”에서 뭘 배우나요?
작은 함수들을 하나의 처리 흐름으로 결합합니다. 브라우저에서 직접 실행하는 실습 코드로 JavaScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
JavaScript Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 JavaScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.
“함수 조합” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 JavaScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 JavaScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.