고차 함수

Minsu Lee·2023년 5월 11일

JavaScript 함수형 프로그래밍

✨SEB FE

함수형 프로그래밍에 기반을 둔 일급객체, 고차함수에 대한 내용을 다뤄봅니다!

💡 The world belongs to the energetic.

📌 일급 객체 (Frist-Class Citize)

특별한 대우를 받는 객체라고 할 수 있다.

아래 조건을 만족하는 객체를 일급 객체라고 한다.

변수나 자료구조(객체, 배열)에 할당(assignment)할 수 있다.
함수의 전달인자(argument)로 전달될 수 있다.
함수의 결과로써 리턴될 수 있다.
무명의 리터럴로 생성할 수 있다. (런타임에서 생성이 가능하다)

JavaScript의 함수는 위의 조건을 모두 만족하므로 일급 객체이다.

가장 중요한 특징은 함수를 일반 객체와 같이 함수의 매개변수에 전달할 수 있으며, 함수의 반환값으로도 사용할 수 있다는 것이다.

함수와 일반 객체와의 차이점을 살짝 집고 넘어가자~

함수	일반 객체
호출이 가능하다	호출이 불가능하다
고유의 프로퍼티를 소유한다	고유의 프로퍼티가 없다.

📌 고차 함수 (Higher-Order Function HOF)

고차 함수(higher order function)는 함수를 전달인자(argument)로 받을 수 있고, 함수를 리턴할 수 있는 함수이다.

JavaScript의 함수는 일급 객체이므로 변수에 저장할 수 있다. 그리고 함수는, 함수를 담은 변수를 전달인자로 받을 수 있다. 마찬가지로, 함수 내부에서 변수에 함수를 할당할 수 있고 함수는 이 변수를 리턴할 수 있다(여기서 변수에 할당하지 않고 함수를 바로 이용할 수 있다).

고차 함수에 함수를 전달인자로 전달하고, 고차 함수는 함수 자체를 리턴한다.

🔍 콜백 함수(Callback Function)

고차 함수에서 다른 함수(caller)의 전달인자(argument)로 전달되는 함수를 콜백 함수(callback function)라고 한다.

콜백 함수를 전달받은 고차 함수(caller)는, 함수 내부에서 이 콜백 함수를 호출(invoke)할 수 있고, 조건에 따라 콜백 함수의 실행 여부를 결정할 수도 있다. 아예 호출하지 않을 수도 있고, 여러 번 실행할 수도 있다. 특정 작업의 완료 후에 호출하는 경우는 이후에 충분히 접할 수 있다.

🔍 커링 함수(Currying Function)

고차 함수에서 함수의 재사용성을 높이기 위해 함수 자체를 반환(return)하는 함수를 커링 함수(currying function)이라고 한다. 함수를 하나만 사용할 때는 필요한 모든 파라미터를 한 번에 넣어야 한다.

따로 커링 함수라는 용어를 사용하는 경우에는, 고차 함수라는 용어를 '함수를 전달인자로 받는 함수'에만 한정해 사용하기도 한다. 그러나 정확하게 구분하자면, 고차 함수가 커링 함수를 포함한 개념으로 생각하면 된다.

🔍 고차 함수의 예

1. 다른 함수를 인자로 받는 경우 🌱

//매개변수를 2배하여 리턴한다.
function double(num) {
  return num * 2;
}

//전달받은 매개변수 num을 전달인자로 받는 함수 func를 리턴한다.
function doubleNum(func, num) {
  return func(num);
}

//output은 doubleNum함수에 인자로 double함수와 4를 넣은 결과를 리턴 받는다.
const output = doubleNum(double, 4);
console.log(output); // -> 8

2. 함수를 리턴하는 경우 🌱

//전달받은 매개변수를 리턴 함수의 매개변수와 더해서 리턴하는 고차 함수
function adder(added) {
  return function (num) {
    return num + added;
  };
}

// adder(5)는 함수이다.
// 함수 호출 연산자 '()'를 사용할 수 있따
let output = adder(6)(3); // -> 9
console.log(output); // -> 9

// // javascript에서 함수는 일급 객체이기 때문에 adder가 리턴하는 함수를 변수에 할당 가능
const add3 = adder(3); //-> 3을 더하는 기능을 가진 함수를 변수에 할당
output = add3(5); //3을 더하는 함수에 매개변수로 5를 전달
console.log(output); // -> 8

3. 함수를 인자로 받고, 함수를 리턴하는 경우 🌱

//매개변수를 2배하여 리턴한다. (함수 doubleAdder의 콜백함수)
function double(num) {
  return num * 2;
}


 // 함수 doubleAdder의 인자 func는 함수 doubleAdder의 콜백 함수이다.
 //함수 double은 함수 doubleAdder의 콜백으로 전달되었다.
function doubleAdder(added, func) {
  const doubled = func(added); //매개변수로 전달받은 함수에 매개변수로 받은 수를 인자로 전달 하여 실행한 결과.
  return function (num) {// 매개변수로 받는 수와 앞에서 실행된 결과를 더하는 함수를 리턴
    return num + doubled;
  };
}


// doubleAdder(5, double)는 함수이므로 함수 호출 기호 '()'를 사용할 수 있다.
doubleAdder(5, double)(3); // -> 10 + 3

// doubleAdder가 리턴하는 함수를 변수에 저장할 수 있다. (일급 객체)
const addTwice3 = doubleAdder(3, double); //3을 두 배한 수와 매개변수를 더할 함수를 할당받음
addTwice3(2); // --> 8