자바스크립트의 고차 함수(Higher Order Function)란? 고차 함수의 장점?

이동준·2023년 7월 23일

고차함수 기술면접 일급객체 자바스크립트

자바스크립트

목록 보기

9/28

일급 객체 (first-class Object)

자바스크립트에서 일급 객체(first-class Object)란?
다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킨다.

자바스크립트에서 일급 객체는 다음과 같은 특성을 가지고 있다.

변수에 할당(assignment) 할 수 있다.
다른 함수의 인자(argument)로 전달 될 수 있다.
다른 함수의 결과로서 리턴 될 수 있다.

자바스크립트에서는 숫자, 문자, 함수까지도 일급 객체이다. 숫자와 함수를 비교해보면,

let one = 1
let two = () => 2

숫자를 변수에 저장하듯, 함수도 변수에 저장 할 수 있다.

let arr = [1, ()=> 2]

숫자를 배열에 저장하듯이 함수도 배열에 저장 할 수 있다.

const fun(n, f) => n + f();
fun(1, () => 2);

숫자를 함수에 전달하듯이 함수를 함수에 전달 할 수 있다.

;() => 1
;() => () => 1

함수가 숫자를 반환 할 수 있듯이 함수가 함수를 반환한다.

일급 객체의 특징 중 함수에 함수를 전달하고, 함수가 함수를 반환하는 특징은 고차 함수를 만들 수 있는 방법을 제공한다.
고차 함수는 함수를 받아서 함수를 반환하는 것을 말하는데, 다른 함수를 이용해서 완전히 새로운 함수를 조립하는 방법으로 프로그램을 만들 수 있다.

고차 함수(Higher Order Function)란?

고차 함수는 함수를 인자(argument)로 받을 수 있고, 함수의 형태로 리턴 할 수 있는 함수다.
함수는 변수에 저장 할 수 있으며, 함수를 담은 변수를 인자로 전달 받을 수 있다. 또한 함수 내부에서 변수 자체에 함수를 할당 할 수도 있다.

1. 함수를 인자로 받을 때

function double(n) {
  return n * 2;
}

function num(func, n) {
  return func(n)
}

let result = num(double, 2);
console.log(result);  // 4

num() 은 double() 과 숫자를 인자로 받아 4를 출력한다.
double() 은 num() 의 콜백 함수이다.

콜백 함수란?

다른 함수의 인자(argument)로 전달되는 함수를 콜백 함수라고 한다.
어떠한 작어비 완료 되었을 때 호출하는 경우가 많아, 답신 전화를 뜻하는 '콜백'이라는 이름이 붙혀졌다. 콜백함수는 아예 호출하지 않을 수도 있고, 여러번 실행 할 수도 있고, 특정 작업이 완료된 후에 호출하는 경우도 있다.

2. 함수를 리턴하는 경우

function add (addNum){
  return function (num) {
    return num + addNum;
  };
}

let result = add(4)(5);
console.log(result);  // 9

add() 는 다른 함수를 리턴하는 고차 함수로 인자 한개를 받아서 함수(익명의 함수)를 리턴하고, 리턴되는 함수는 인자 한개를 받아서 addNum 과 더한 값을 리턴하게 된다.

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

function double(num) {
  return num * 2;
}

function doubleAdd(add, func) {
  const doubled = func(add);
  
  return function (num){
    return num + doubled;
  };
}

doubleAdd(5, double)(3);  // 13
const addTwiceTo7 = doubleAdd(7, double);
addTwiceTo7(2);  // 16

doubleAdd() 는 고차 함수이다.
doubleAdd() 의 인자 func() 는 함수 doubleAdd() 의 콜백 함수이고,
double() 은 함수 doubleAdd() 의 콜백으로 전달되었다.
또한 doubleAdd() 가 리턴하는 함수를 변수에 저장 할 수 있다. (일급 객체)

고차 함수를 사용하는 이유

추상화란?

복잡한 어떤 것들을 압축해서 핵심만 추출한 상태로 만드는 것으로, 추상화의 관점에서 고차함수가 갖는 이점이 있다.

1. 생산성의 향상

CPU는 0과 1만 이해하지만, 코드가 해석되고 복잡한 것들은 자바스크립트가 대신 해주기에 우리는 자바스크립트 문법을 올바르게 이해하고 사용하는 것만으로 다양한 프로그램을 비교적 쉽게 작성 할 수 있는데, 이처럼 문제해결이 더 쉬워지는 것이 추상화의 이점이다.

2. 함수라는 추상화

반복되는 로직은 별도의 함수로 작성하는 것이 추상화의 좋은 사례로, 추상화의 관점에서 함수를 보게 되면 함수는 사고, 또는 논리의 묶음이기 때문이다.

3. 추상화를 한단계 높인 고차 함수

함수는 값을 전달 받아 값을 리턴하고, 값에 대한 로직은 감춰져 있으며 값의 수준에서 추상화는 단순히 값을 받아 처리하는 수준이다.
하지만, 고차 함수를 사용했을 때 이 수준을 사고의 추상화 수준으로 끌어 올릴 수 있는데, 고차 함수는 함수를 전달 받거나 함수를 리턴하고 함수에 대한 로직은 감추어져 있기 때문에 추상화의 수준이 높아지는 만큼 생산성도 높아지게 된다.