반응형
고차 함수(higher order function)는 함수를 인자(argument)로 받을 수 있고, 함수의 형태로 리턴할 수 있는 함수이다.
- 함수는 변수에 저장할 수 있다.
- 함수를 담은 인자로 전달받을 수 있다.
- 함수 내부에서 변수에 함수를 할당할 수 있다.
- 함수는 이 변수를 리턴할 수 있다.
이때 다른 함수(caller)의 인자(arument)로 전달되는 함수를 콜백 함수(callback function)라고 한다.
1. 다른 함수를 인자로 받는 경우
function triple(num) {
return num * 3;
}
function tripleNum(func, num) {
return func(num);
}
// 함수 tripleNum은 다른 함수를 인자로 받는 고차 함수이다.
// 함수 func는 함수 doubleNum의 콜백 함수이다.
let result = tripleNum(triple, 2)
console.log(result); // -> 6
2. 함수를 리턴하는 경우
function adder(added) {
return function (num) {
return num + added;
}
}
// 함수 adder은 다른 함수를 리턴하는 고차 함수이다.
// adder은 인자 한 개를 입력 받아서 익명 함수를 리턴한다.
// 리턴되는 익명 함수는 인자 한 개를 받아서 added와 더한 값을 리턴한다.
// adder(4) 자체가 함수이므로 함수 호출 연산자 '()'를 사용할 수 있다.
let result = adder(4)(6)
console.log(result) // -> 10
// adder이 리턴하는 함수를 변수에 저장할 수 있다.
// JS에서 함수는 일급 객체이기 때문이다.
const add5 = added(5)
result = add5(4)
console.log(result); // -> 9
3. 함수를 인자로 받고, 함수를 리턴하는 경우
function triple(num) {
return num * 3;
}
function tripleAdder(added, func) {
const tripled = func(added);
return function (num) {
return num + tripled;
};
}
// 함수 tripleAdder은 고차 함수이다.
// 함수 tripleAdder의 인자 func는 함수 tripleAdder의 콜백 함수이다.
// tripleAdder(3, triple)은 함수이므로 함수 호출 기호 '()'를 사용할 수 있다.
tripleAdder(3, triple)(1) // -> 10
// tripleAdder이 리턴하는 함수를 변수에 저장할 수 있다. (일급 객체)
const result = tripleAdder(3, triple);
result(1) // -> 10
반응형
'💻 개발자 > 🔨 HTML, CSS, JS' 카테고리의 다른 글
[JS] 객체지향 JavaScript (feat. class & instance) (0) | 2021.05.11 |
---|---|
[JS] 내장 고차함수 이해하기 (Feat. map, filter, reduce) (0) | 2021.05.07 |
[JS] 객체(Object) 기초 (0) | 2021.04.22 |
[JS] 배열(Array) 기초 (0) | 2021.04.22 |
[JS] let, var, const 키워드 비교 (0) | 2021.04.22 |