고차함수

고차 함수(higher order function)는 함수를 인자(argument)로 받을 수 있고, 함수의 형태로 리턴할 수 있는 함수이다.
고차 함수 예시로는
1. 다른 함수를 인자로 받는 경우

function double(num) {
  return num * 2;
}
// doubleNum 함수는 고차 함수이다. (다른 함수를 인자로 받음)
// doubleNum 함수의 인자 func에 함수가 들어올 경우
// func은 doubleNum의 콜백 함수이다.
function doubleNum(func, num) {
  return func(num);
}
// 아래의 경우 double은 doubleNum의 콜백 함수이다.
doubleNum(double, 5);

2. 함수를 리턴하는 경우

// subtractor 함수는 고차 함수이다. (다른 함수를 리턴한다.)
function subtractor(subtract) {
  return function (num) {
    return num - subtract;
  }
}
// subtractor(5)는 함수이므로 호출 연산자 '()'를 사용 할 수 있다.
subtractor(5)(8) // --> 3
// subtractor 함수가 리턴하는 함수를 변수에 저장할 수 있다.
// 이는 자바스크립트에서 함수는 일급 객체이기 때문이다.
const subtract5 = subtractor(5);
subtract5(8) // -> 3

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

function double(num) {
  return num * 2;
}
// doubleSubtractor 함수는 고차 함수이다.
function doubleSubtractor(subtract, func) {
  const doubled = func(subtract);
  return function (num) {
    return num - doubled;
  }
}
// double 함수는 doubleSubtractor 함수의 콜백으로 전달되었다.
doubleSubtractor(5, double)(18); // --> 8

자바스크립트 공부 중 중복된 코드를 제거하는 작업 중 정리가 필요해 정리.
함수를 리턴하는 경우에서 고차함수를 써야한다.

// 고차함수
  const onClickNumber = (number) => () => {
       if (operator) {
         nuwTwo += number;
       } else {
         numOne += number;
       }
       $result.value += number;
    };

위의 코드로는 onClickNumber()로 실행을하면 return 값이 함수가 나온다. 위의 코드는 변수에 함수에 함수를 담은 것이다.

// 변수에 함수를 담음
   const onClickNumber = () => {
       if (operator) {
         nuwTwo += 1;
       } else {
         numOne += 1;
       }
     };

위의 코드로는 onClickNumber()로 실행을하면 return 값이 undefined가 나온다. 그래서 react에서 onClick={onClickNumber()}는 에러가 나오고 또한 바닐라 자바스크립트에서 addEventListener에서도 에러가 난다. 왜냐 함수가 와야 하는데 함수가 오지 않았기 때문에 위의 코드는 함수를 변수에 담은것이다. 함수의 인자가 필요한 코드를 구현할 때는 고차 함수를 구현하자.