함수형 프로그래밍 - 고차 함수

함수형 프로그래밍 시리즈를 작성해보려고 합니다.

오늘은 고차 함수에 대해서 알아보겠습니다.

고차 함수란?

고차 함수란 함수의 입력이나 출력이 함수인 함수를 의미합니다.

우선 입력으로 들어가는 함수 중 대표적으로 이벤트 리스너, 콜백 함수 등이 있습니다.

// event listner
function onClick() {
  // click action
}

<div onClick={onClick} />;

// callback
function add(a: number, b: number, callback: (result: number) => void) {
  callback(a + b);
}
add(1, 2, console.log);

이렇게 함수를 입력으로 받으면 고차 함수입니다.

다음으로 출력으로 함수를 내보내는 함수 예제를 보겠습니다.

function deleteItem(index: number) {
  return () => {
    api.deleteItem(index);
  };
}

function asyncWrap(callback: AsyncFunction) {
  return (...args: any) => {
    callback(...args).catch((err) => console.error(err));
  };
}

함수를 실행 시점에 만드는 것을 지연 평가라고 부릅니다. 이는 실제로 수행될 때 호출되게 만들기 위한 함수들이라고 보면 되겠습니다.

예를 들어, deleteItem 을 이용하면 아래와 같이 만들 수 있습니다.

<button onClick={deleteItem(1)} >버튼 1</button>
<button onClick={deleteItem(2)} >버튼 2</button>

이는 실행시점에 아래와 같이 바인딩 됩니다.

<button onClick={() => { api.deleteItem(1); }} >버튼 1</button>
<button onClick={() => { api.deleteItem(2); }} >버튼 2</button>

그렇다면 이런 의문이 들 수 있습니다. 실행하는 함수를 바로 넣어도 되지 않을까?

<button onClick={api.deleteItem(1)} >버튼 1</button>
<button onClick={api.deleteItem(2)} >버튼 2</button>

이렇게 넣는 것은 api.deleteItem 을 호출한 값을 onClick 에 넘기게 됩니다. 즉 해당 컴포넌트가 렌더링 되는 시점에 이미 실행되어 버리고 나온 리턴 값을 넣기 때문에 의도하지 않은 결과가 나타날 것입니다.

결론

함수를 입력으로 받고 출력으로 내보내는 과정은 함수형 프로그래밍의 핵심입니다.

이는 어디든 갈 수 있다라는 의미의 일급으로 취급할 때 가능합니다.

질문 사항이나 틀린 사항 있을 시 피드백 주시면 감사하겠습니다.

고차 함수란?​

결론​

고차 함수란?

결론