일급함수 & 콜백함수, 고차함수

일급객체

• 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킨다. 보통 함수에 인자로 넘기기, 수정하기, 변수에 대입하기와 같은 연산을 지원할 때 일급 객체라고 한다.

일반적으로 적용 가능한 연산이라고 하면 다음과 같은 것들이 있다.

변수에 할당될 수 있다.

다른 함수의 인자로 전달될 수 있다.

함수에서 반환될 수 있다.

 

일급함수

• 함수를 일급 객체로 취급하는 것을 말한다. 즉, 함수들이 다른 변수처럼 다루어질 때 일급 함수를 가진다고 한다.

 

1. 변수에 값으로서 함수를 할당할 수 있다.

const foo = () => {
  console.log("bar");
};

foo();

• 예제를 보면 변수 foo에 함수를 할당한 다음 함수를 호출할 때 해당 변수를 사용하는 것을 볼 수 있다.

 

2. 다른 함수의 인자로 함수를 전달할 수 있다.

function prefixName(value) {
  return `prefix_${value}`;
}

function getName(callback, name) {
  console.log(callback(name));
}

getName(prefixName, "heeji");

• 해당 예제에서는 getName의 첫번째 인자로 prefixName 함수를 넘기고 있다.

 

3. 다른 함수에 의해 함수가 반환될 수 있다.

function foo() {
  return () => {
    console.log("bar");
  };
}

const bar = foo();
bar();

• foo에서 함수를 리턴받아 변수 bar에 저장하고 bar()로 함수를 호출할 수 있다.

 

일급함수를 가졌을 때 할 수 있는 것이 크게 고차함수, 콜백함수가 있다.

 

고차함수

• 함수를 반환하거나 다른 함수들을 인자로서 사용하는 함수

우리가 자주쓰는 배열의 map 메서드도 고차함수이다.

const converted = list.map((li) => `${li.name}`);

 

고차함수의 장점

 

추상화

• 공통 로직을 추상화하여 코드 중복을 줄일 수 있다.
• map을 예시로 보면 배열을 순회하면서 전달받은 콜백을 수행하고 값을 리턴하는 행위가 어떻게 수행되는지 자세히 알 필요가 없다. 또 매번 map함수를 구현할 필요가 없어 코드 중복을 줄일 수 있다.

 

재사용성

• 공통 로직을 고차 함수로 분리하게되면 필요한곳에서 해당 로직을 재사용 할 수 있다.

const somethingFrequent = (value) => {
  return () => {
    const newValue = value + 1;
    // 뭔가 복잡한데 자주 사용할 로직
    return newValue;
  };
};

const something1 = somethingFrequent(1);
const something2 = somethingFrequent(2);

const result1 = something1();

 

콜백함수

• 다른 함수의 인자로 전달하는 함수를 콜백함수라고 한다. 함수의 인자로 전달되어 특정한 시점에 호출된다.

function prefixName(value) {
  return `prefix_${value}`;
}

function getName(callback, name) {
  console.log(callback(name));
}

getName(prefixName, "heeji");

• 앞에서 봤던 예제가 콜백함수 예시가 된다. prefixName이라는 콜백 함수는 getName의 인자로 넘겨지고 getName 함수가 해당 콜백함수의 제어권을 넘겨받아 특정한 시점에 콜백 함수를 호출한다.

 

참고자료

• mdn 일급 함수
• mdn 콜백 함수
• https://wiki.yowu.dev/ko/Knowledge-base/Functional_JavaScript/Learning/005-building-reusable-code-with-higher-order-functions-in-javascript