고차 함수(Higher-Order Function)
🌻 참으로 신기하고 생소한 개념이다
고차 함수 기초
Achievement Goals
- 일급 객체(
first-class citizen)의 세 가지 특징을 설명할 수 있다. - 고차 함수(
higher-order function)에 대해 설명할 수 있다. - 추상화(
abstraction)에 대해 설명할 수 있다. - 추상화의 관점에서 고차 함수가 갖는 이점에 대해 설명할 수 있다.
- 배열 메소드를 자연스럽게 사용할 수 있다.
- 고차 함수를 활용하여 프로그램을 작성할 수 있다.
First-Class Citizen
- 자바스크립트의 세계에서 특별한 대우를 받는 것들을 일급 객체(
first-class citizen)라고 한다. 그 중 하나가 함수(function)다. 즉 자바스크립트에서 함수는 아래와 같이 특별하게 취급된다.- 변수에 할당(
assignment)할 수 있다. - 다른 함수의 인자(
argument)로 전달될 수 있다. - 다른 함수의 결과로서 리턴될 수 있다.
- 변수에 할당(
- 이는 함수를 데이터(
string,number,boolean,array,object)를 다루듯이 다룰 수 있다는 것을 의미한다. 변수에 저장할 수 있기 때문에 배열의 요소나 객체의 속성값으로 저장하는 것도 가능하다.
함수 표현식(
function expression)은 함수 선언식(function declaration)과 다르게 호이스팅(hoisting)이 적용되지 않는다.
▶︎ 변수에 함수를 할당하는 경우
// 아래는 변수 square에 함수를 할당하는 함수 표현식이다.
// 자바스크립트에서 함수는 일급 객체이기 때문에 변수에 저장할 수 있다.
// 함수 표현식은 할당 전에 사용할 수 없다.
// square(7); // ReferenceError: Can't find variable: square
const square = function (num) {
return num * num;
};
// square에는 함수가 저장되어 있으므로 (일급 객체), 함수 호출 연산자 '()'를 사용할 수 있다.
output = square(7);
console.log(output); // 49-
함수 선언식의 호이스팅에 지나치게 의존하는 것은 코드의 유지 보수 측면에서 좋지 않다. 반면, 함수 표현식은 함수의 할당과 실행의 위치가 중요하기 때문에 코드의 위치가 어느 정도 예측이 가능하다.
-
호이스팅을 제외하면 함수 선언식과 함수 표현식의 차이는 크게 없어 보이고, 실제로도 그렇다. 다만 함수 표현식의 경우, 함수가 변수에 저장될 수 있다는 사실을 좀 더 분명하게 드러낼 수 있다.
고차 함수란?
-
고차 함수는 함수를 인자(argument)로 받거나 함수를 리턴하는 함수를 말한다. 이 때 다른 함수(
caller)의 인자(argument)로 전달되는 함수를 콜백 함수(callback function)라고 한다. -
콜백 함수를 전달받은 함수는 이 콜백 함수를 호출(
invoke)할 수 있다. -
caller는 조건에 따라 콜백 함수의 실행 여부를 결정할 수도 있고, 심지어 여러 번 실행할 수도 있다.
▶︎ 다른 함수를 인자로 받는 경우
function double(num) {
return num * 2;
}
function doubleNum(func, num) {
let doubledArr = [];
return func(num);
}
// 함수 doubleNum은 다른 함수를 인자로 받는 고차 함수이다.
// 함수 doubleNum의 첫 번째 인자 func에 함수가 들어올 경우
// 함수 func는 함수 doubleNum의 콜백 함수이다.
// 아래와 같은 경우, 함수 double은 함수 doubleNum의 콜백 함수이다.
let output = doubleNum(double, 4);
console.log(output); // 8▶︎ 함수를 리턴하는 경우
function adder(added) {
return function (num) {
return num + added;
};
}
// 함수 adder는 다른 함수를 리턴하는 고차 함수이다.
// adder는 인자 한 개를 입력받아서 함수(익명 함수)를 리턴한다.
// 리턴되는 익명 함수는 인자 한 개를 받아서 added와 더한 값을 리턴한다.
// adder(5)는 함수이므로 함수 호출 연산자 '()'를 사용할 수 있다.
let output = adder(5)(3); // 8
console.log(output); // 8
// adder가 리턴하는 함수를 변수에 저장할 수 있다.
// javascript에서 함수는 일급 객체이기 때문이다.
const add3 = adder(3);
output = add3(2);
console.log(output); // 5▶︎ 함수를 인자로 받고, 함수를 리턴하는 경우
function double(num) {
return num * 2;
}
function doubleAdder(added, func) {
const doubled = func(added);
return function (num) {
return num + doubled;
};
}
// 함수 doubleAdder는 고차 함수이다.
// 함수 doubleAdder의 인자 func는 함수 doubleAdder의 콜백 함수이다.
// 함수 double은 함수 doubleAdder의 콜백으로 전달되었다.
// doubleAdder(5, double)는 함수이므로 함수 호출 기호 '()'를 사용할 수 있다.
doubleAdder(5, double)(3); // 13
// doubleAdder가 리턴하는 함수를 변수에 저장할 수 있다. (일급 객체)
const addTwice3 = doubleAdder(3, double);
addTwice3(2); // 8