포인트 프리 스타일
인수에 이름을 지정하지 않고 함수를 조합합니다.
포인트 프리 스타일은(는) CoddyKit의 무료 JavaScript Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 JavaScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
인자 비명시 스타일이란
인자 비명시(또는 암묵적) 스타일은 인자를 언급하지 않고 다른 함수들을 결합하여 함수를 정의합니다. 인자는 암묵적으로 전달되는 요소입니다.
function double(n) { return n * 2; }
const nums = [1, 2, 3];
// pointed: argument named explicitly
console.log(nums.map((n) => double(n))); // [2, 4, 6]
// point-free: no named argument
console.log(nums.map(double)); // [2, 4, 6]함수를 직접 전달하기
콜백이 인자를 다른 함수에 그대로 전달하기만 한다면, 콜백으로 감싸는 대신 해당 함수를 이름으로 직접 전달할 수 있습니다.
const len = (s) => s.length;
const words = ["a", "bb", "ccc"];
console.log(words.map((w) => w.length)); // pointed: [1, 2, 3]
console.log(words.map(len)); // point-free: [1, 2, 3]함수 합성
인자 비명시 코드는 composition에 의존합니다. 한 함수의 출력을 다음 함수에 전달하여 새 함수를 만드는 방식입니다.
const compose = (f, g) => (x) => f(g(x));
const inc = (n) => n + 1;
const double = (n) => n * 2;
const incThenDouble = compose(double, inc);
console.log(incThenDouble(3)); // (3+1)*2 = 8pipe 도우미
pipe는 왼쪽에서 오른쪽으로 읽히므로 많은 사람이 compose보다 더 명확하다고 느낍니다. 함수를 순서대로 적용합니다.
const pipe = (...fns) => (x) => fns.reduce((acc, f) => f(acc), x);
const inc = (n) => n + 1;
const double = (n) => n * 2;
const f = pipe(inc, double);
console.log(f(3)); // 8처리 흐름 만들기
pipe를 사용하면 데이터를 직접 이름 붙이지 않고도 여러 단계의 변환을 이름 있는 함수로 표현할 수 있습니다.
const pipe = (...fns) => (x) => fns.reduce((a, f) => f(a), x);
const trim = (s) => s.trim();
const lower = (s) => s.toLowerCase();
const clean = pipe(trim, lower);
console.log(clean(" HELLO ")); // "hello"커링으로 인자 비명시 스타일 구현하기
커링은 여러 인수를 받는 함수를 인수 하나씩 받는 함수의 연쇄로 바꿉니다. 이렇게 하면 바로 합성할 수 있는 단항 함수가 만들어집니다.
const multiply = (a) => (b) => a * b;
const triple = multiply(3);
console.log([1, 2, 3].map(triple)); // [3, 6, 9]부분 적용
일부 인자를 미리 고정하면 직접 전달할 수 있는 특화된 함수가 만들어지며, 이는 인자 비명시 코드를 작성하는 또 다른 방법입니다.
const add = (a, b) => a + b;
const add10 = add.bind(null, 10);
console.log([1, 2, 3].map(add10)); // [11, 12, 13]조건 함수 합성하기
불리언 도우미 함수를 서로 조합하여 인라인 화살표 함수로 인한 복잡함 없이 깔끔한 인자 비명시 필터를 만들 수 있습니다.
const isEven = (n) => n % 2 === 0;
const negate = (fn) => (x) => !fn(x);
const isOdd = negate(isEven);
console.log([1, 2, 3, 4].filter(isOdd)); // [1, 3]가독성의 절충
인자 비명시 스타일은 우아할 수 있지만 지나치면 이해하기 어려워집니다. 의도를 명확히 할 때(map(double)) 사용하고, 인자 이름을 지정하는 것이 이해에 도움이 될 때는 인자를 명시하는 방식을 유지하세요.
const names = ["ada", "bob"];
console.log(names.map((n) => n.toUpperCase())); // ["ADA","BOB"]메서드 참조 시 주의점
메서드를 이름으로 전달하면 메서드의 this가 사라질 수 있습니다. 함수가 객체의 문맥에 의존한다면 함수를 감싸거나 bind하세요.
const calc = {
factor: 2,
scale(n) { return n * this.factor; }
};
console.log([1, 2].map(calc.scale.bind(calc))); // [2, 4]실제 변환 합성하기
작고 이름이 있는 함수들을 하나의 처리 흐름으로 합치면 선언형이고 테스트 가능한 인자 비명시 데이터 흐름을 만들 수 있습니다.
const pipe = (...fns) => (x) => fns.reduce((a, f) => f(a), x);
const toNums = (arr) => arr.map(Number);
const onlyPos = (arr) => arr.filter((n) => n > 0);
const sum = (arr) => arr.reduce((a, n) => a + n, 0);
const process = pipe(toNums, onlyPos, sum);
console.log(process(["3", "-1", "4"])); // 7빠른 확인
인자 비명시 스타일
복습
인자 비명시 스타일은 인자 이름을 지정하지 않고 다른 함수들을 합성하여 함수를 만듭니다. 함수 참조를 전달하고(map(double)), compose/pipe로 합성하며, 커링이나 부분 적용을 사용하여 단항 함수를 만드세요. 메서드 참조에서 this가 사라지는지 주의하고, 더 명확하게 읽히면 인자를 명시하는 방식을 유지하세요.
AI 튜터와 함께 JavaScript을(를) 배우세요 — 무료
브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.
- 코스
- 59
- 레슨
- 200
자주 묻는 질문
“포인트 프리 스타일” 강의는 무료인가요?
네 — “포인트 프리 스타일” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 JavaScript Academy 강의 전체를 잠금 해제할 수 있습니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“포인트 프리 스타일”에서 뭘 배우나요?
인수에 이름을 지정하지 않고 함수를 조합합니다. 브라우저에서 직접 실행하는 실습 코드로 JavaScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
JavaScript Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 JavaScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.
“포인트 프리 스타일” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 JavaScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 JavaScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- 순수 함수와 부수 효과
- 선언적 데이터 변환
- 변형 피하기
- 포인트 프리 스타일