1. 함수 구조
const fn = x => y => x + y;
const fn = function(x) {
return function(y) {
return x + y;
};
};
위는 커링(Currying) 기법을 사용한 함수 표현식이다. 커링은 여러 개의 인수를 받는 함수를 하나의 인수를 받는 함수들의 연속으로 변환하는 기법이다.
2. 동작 원리
- fn 함수는 첫 번째 인수 x를 받아서, 또 다른 함수를 반환한다.
- 반환된 함수는 두 번째 인수 y를 받아서 x + y를 계산하고 결과를 반환한다.
3. 사용 예시
const add5 = fn(5); // x에 5를 넣음
console.log(add5(3)); // y에 3을 넣음 -> 5 + 3 = 8
console.log(fn(2)(4)); // x에 2, y에 4 -> 2 + 4 = 6
- fn(5)를 호출하면 y => 5 + y와 같은 함수가 반환된다.
- 이후 반환된 함수에 3을 넣으면 5 + 3 = 8이 된다.
4. 활용 예시: 커링의 장점
const add10 = fn(10);
console.log(add10(7)); // 17
console.log(add10(20)); // 30
add10 함수는 항상 10을 더하는 역할을 해. 따라서 반복적인 작업을 단순화할 수 있다.
참고 : https://ko.javascript.info/currying-partials
커링
ko.javascript.info
function curry(f) {
return function(a) { // 첫 번째 래퍼 함수
return function(b) { // 두 번째 래퍼 함수
return f(a, b); // 원래 함수 f를 a와 b로 호출
};
};
}
f의 두 개의 인수를 커링하는 헬퍼 함수 curry(f)를 생성한다. 다른 말로 하면, f(a, b)처럼 두 개의 인수를 요구하는 함수를 f(a)(b) 형식으로 변환하는 curry(f)라는 함수를 만드는 것이다.
function sum(a, b) {
return a + b;
}
let curriedSum = curry(sum);
curriedSum은 이제 커링된 sum 함수이다.
alert(curriedSum(1)(2)); // 3
🔍 이 호출을 자세히 풀어보면
1. curriedSum(1)을 호출하면
function(b) {
return f(1, b);
}
이 새로운 함수가 반환된다. 여기서 a = 1이다.
2. curriedSum(1)(2)는 이제
f(1, 2);
즉, sum(1, 2)와 같다.
3. sum(1, 2)는 1 + 2 = 3을 반환 한다.
'JavaScript' 카테고리의 다른 글
[namo CROSSEDITOR] Script인증을 사용할 경우에는 UploadFileExecutePath API를 설정해 주세요. (1) | 2025.04.29 |
---|---|
[JavaScript] 전역 객체 프로퍼티 (0) | 2025.02.15 |
[JavaScript] 13. 스코프란? (0) | 2025.02.15 |
[JavaScript] Invalid left-hand side expression in prefix operation, Number( ) 함수에 연산자 적용 에러 (0) | 2025.02.06 |
[JavaScript] 자바스크립트에서 && 연산자의 동작 방식 (0) | 2025.01.30 |
1. 함수 구조
const fn = x => y => x + y;
const fn = function(x) {
return function(y) {
return x + y;
};
};
위는 커링(Currying) 기법을 사용한 함수 표현식이다. 커링은 여러 개의 인수를 받는 함수를 하나의 인수를 받는 함수들의 연속으로 변환하는 기법이다.
2. 동작 원리
- fn 함수는 첫 번째 인수 x를 받아서, 또 다른 함수를 반환한다.
- 반환된 함수는 두 번째 인수 y를 받아서 x + y를 계산하고 결과를 반환한다.
3. 사용 예시
const add5 = fn(5); // x에 5를 넣음
console.log(add5(3)); // y에 3을 넣음 -> 5 + 3 = 8
console.log(fn(2)(4)); // x에 2, y에 4 -> 2 + 4 = 6
- fn(5)를 호출하면 y => 5 + y와 같은 함수가 반환된다.
- 이후 반환된 함수에 3을 넣으면 5 + 3 = 8이 된다.
4. 활용 예시: 커링의 장점
const add10 = fn(10);
console.log(add10(7)); // 17
console.log(add10(20)); // 30
add10 함수는 항상 10을 더하는 역할을 해. 따라서 반복적인 작업을 단순화할 수 있다.
참고 : https://ko.javascript.info/currying-partials
커링
ko.javascript.info
function curry(f) {
return function(a) { // 첫 번째 래퍼 함수
return function(b) { // 두 번째 래퍼 함수
return f(a, b); // 원래 함수 f를 a와 b로 호출
};
};
}
f의 두 개의 인수를 커링하는 헬퍼 함수 curry(f)를 생성한다. 다른 말로 하면, f(a, b)처럼 두 개의 인수를 요구하는 함수를 f(a)(b) 형식으로 변환하는 curry(f)라는 함수를 만드는 것이다.
function sum(a, b) {
return a + b;
}
let curriedSum = curry(sum);
curriedSum은 이제 커링된 sum 함수이다.
alert(curriedSum(1)(2)); // 3
🔍 이 호출을 자세히 풀어보면
1. curriedSum(1)을 호출하면
function(b) {
return f(1, b);
}
이 새로운 함수가 반환된다. 여기서 a = 1이다.
2. curriedSum(1)(2)는 이제
f(1, 2);
즉, sum(1, 2)와 같다.
3. sum(1, 2)는 1 + 2 = 3을 반환 한다.
'JavaScript' 카테고리의 다른 글
[namo CROSSEDITOR] Script인증을 사용할 경우에는 UploadFileExecutePath API를 설정해 주세요. (1) | 2025.04.29 |
---|---|
[JavaScript] 전역 객체 프로퍼티 (0) | 2025.02.15 |
[JavaScript] 13. 스코프란? (0) | 2025.02.15 |
[JavaScript] Invalid left-hand side expression in prefix operation, Number( ) 함수에 연산자 적용 에러 (0) | 2025.02.06 |
[JavaScript] 자바스크립트에서 && 연산자의 동작 방식 (0) | 2025.01.30 |