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

January 28, 2023 · 3 min read

Jae Jun, Jo

Software Engineer

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

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

고차 함수란?

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

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

// 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 에 넘기게 됩니다. 즉 해당 컴포넌트가 렌더링 되는 시점에 이미 실행되어 버리고 나온 리턴 값을 넣기 때문에 의도하지 않은 결과가 나타날 것입니다.

결론

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

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

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

고차 함수란?​

결론​

고차 함수란?

결론