일급 객체(First-class citizen)와 고차함수(Higher-order function)

일급 객체(First-class citizen)

자바스크립트에는 특별한 대우를 받는 일급 객체가 있다. 대표적인 일급 객체 중 하나가 함수이다.

자바스크립트에서 함수는 아래와 같이 특별하게 취급된다.

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

함수를 변수에 할당할 수 있기 때문에, 함수를 배열의 요소나 객체의 속성값으로 저장할 수 있다. 이는 함수를 데이터(string, number, boolean, array, object)를 다루듯이 다룰 수 있다는 걸 의미한다.

 

1. 변수에 변수를 할당하는 경우

/* 아래는 변수 square에 함수를 할당하는 함수 표현식이다.
 * 자바스크립트에서 함수는 일급 객체이기 때문에 변수를 저장할 수 있다.
 * 
 * 함수 표현식은 할당 전에 사용할 수 없다.
 * square(3); // --> ReferenceError: Can't find variable : square
 */
 
 const square = function (num) {
 	return num * num;
 }
 
 // square에는 함수가 저장되어 있으므로 (일급 객체), 함수 호출 연산자 '()'를 사용할 수 있다.
 output = square(3);
 console.log(output); // -> 9

이러한 함수 표현식은 변수를 할당한 다음 사용할 수 있다.

 

함수표현식(function expression)은 함수선언식(function declaration)과 다르게 호이스팅(Hoisting)이 적용되지 않는다.

• 호이스팅은 선언된 위치에 관계없이 어디서든 함수를 사용할 수 있도록 한다.
• 코드가 실행되는 과정에서 함수 선언부를 코드의 최상단으로 끌어올리는 것처럼 보이게 한다.

함수 선언식의 호이스팅에 지나치게 의존하면, 코드의 유지 보수가 쉽지 않다. 코드 리뷰나 디버깅을 할 때, 코드를 위아래로 왔다 갔다 하게 될 수도 있다.

함수 선언식은 어느 위치에나 함수를 선언할 수 있고, 함수의 실행 위치도 중요하지 않다.

하지만, 함수 표현식은 함수의 할당과 실행의 위치에 따라 결과가 달라지기 때문에, 코드의 위치를 어느정도 예측할 수 있다.

호이스팅을 제외하면, 함수 선언식과 함수 표현식은 크게 차이가 없다.

하지만, 함수 표현식의 경우는 함수가 변수에 저장될 수 있다는 사실을 보다 분명하게 보여준다.

 

그리고 함수는 변수에 저장된 데이터를 인자로 받거나, 리턴 값으로 사용할 수 있다.

함수도 변수에 저장될 수 있기 때문에 함수를 인자로 받거나, 리턴 값으로 사용할 수 있다.

 

호이스팅(hoisting)이란?

호이스팅은 사전적 의미로 끌어 올리기 라는 의미를 가지고 있는 단어이며, 실제로 하는 일도 사전적 의미와 동일하다. 모든 선언(var, function)들을 어느 위치에 호출하던지 간에 자바스크립트는 그 선언들을 해당 스코프의 맨 위로 끌어올린다.

호이스팅은 스코프 내부 어디서든 변수 선언은 최상위에 선언된 것 처럼 행동하는 것입니다.

 

고차함수 (higher-order function)

그래서 위에 말했듯이 함수 자체가 일급객체이기 때문에 고차함수를 만드는게 가능해진다. 

고차 함수(higer order function)는 함수를 인자(argument)로 받을 수 있고, 함수의 형태로 리턴할 수 있는 함수이다.

 

함수는 변수에 저장할 수 있고 함수를 담은 변수를 인자로 전달받을 수 있다. 마찬가지로, 함수 내부에서 변수에 함수를 할당할 수 있다.

그리고 함수는 이 변수를 리턴할 수 있다. 여기서 변수에 할당하지 않고 함수를 바로 이용할 수 있다.

어떤 고차 함수에 함수를 인자로 전달하고, 고차 함수는 함수 자체를 리턴한다. 변수가 빠졌을 뿐, 동일하게 작동한다.

 

이때 다른 함수(caller)의 인자(argument)로 전달되는 함수를 콜백 함수(callback function)라고 한다. 

콜백 함수의 이름은, 어떤 작업이 완료되었을 때 호출하는 경우가 많아서, 작업을 문의받은 후에 작업 완료 후 전화하는 답신 전화를 뜻하는 콜백이라는 이름이 붙여졌다.

 

콜백 함수를 전달받은 고차 함수는, 함수 내부에서 이 콜백 함수를 호출(invoke) 할 수 있다.

caller는 조건에 따라 콜백 함수의 실행 여부를 결정할 수 있다. 아예 호출하지 않을 수도 있고, 여러 번 실행할 수도 있다.

 

'함수를 리턴하는 함수'는 모양새가 특이한 만큼, 부르는 용어가 따로 있다. 이 방법을 고안해낸 논리학자 하스켈 커리(Haskell Curry)의 이름을 따, 커리 함수라고 한다. 따로 커리 함수라는 용어를 사용하는 경우에는, 고차 함수란 용어를 '함수를 인자로 받는 함수'에만 한정해 사용하기도 한다. 그러나 정확하게 구분하면, 고차 함수가 커리 함수를 포함한다. 

 

1. 다른 함수를 인자로 받는 경우

function tripple(num) {
  return num * 3;
}

function trippleNum(func, num) {
  return func(num);
}

/*
 * 함수 trippleNum은 다른 함수를 인자로 받는 고차 함수이다.
 * 함수 trippleNum의 첫 번째 인자 func에 함수가 들어올 경우
 * 함수 func은 함수 trippleNum의 콜백 함수이다.
 * 아래와 같은 경우, 함수 tripple은 함수 trippleNum의 콜백 함수이다.
 */
let output = trippleNum(tripple, 5);
console.log(output); // -> 15;

2. 함수를 리턴하는 경우

function multiplier(multiply){
  return function (num) {
    return num * multiply;
  }
}

/*
 * 함수 multiply는 다른 함수를 리턴하는 고차 함수이다.
 * multiplier는 인자를 한 개 입력받아서 함수(익명 함수)를 리턴한다.
 * 리턴되는 익명 함수는 인자 한 개를 받아서 multiply와 곱한 값을 리턴한다.
 */
 
 // multiplier(8)은 함수이므로 함수 호출 연산자 '()'를 사용할 수 있다.
 let output = multiplier(8)(5); // -> 40
 console.log(output); // -> 40
 
 // multiplier가 리턴하는 함수를 변수(output)에 저장할 수 있다.
 // javascript에서 함수는 일급 객체이기 때문이다.
 const multiply1 = multiplier(7);
 output = multiply1(3);
 console.log(output); // -> 21

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

function tripple(num) {
  return num * 3;
}

function trippleAdder(added, func) {
  const trippled = func(added);
  return function (num) {
    return num + trippled;
  }
}

/*
 * 함수 doubleAdder는 고차 함수이다.
 * 함수 doubleAdder의 인자 func는 함수 trippleAdder의 콜백 함수이다.
 * 함수 tripple은 함수 trippleAdder의 콜백으로 전달되었다.
 */
 
 
// trippleAdder(3, tripple)은 함수이므로 함수 호출 기호 '()'를 사용할 수 있다.
trippleAdder(3, tripple)(6); // -> 15

// trippleAdder가 리턴하는 함수를 변수에 저장할 수 있다. (일급 객체)
const multiplyThree4 = trippleAdder(4, tripple);
multiplyThree4(2); // -> 14

https://bestalign.github.io/dev/first-class-object/

JavaScript의 함수는 1급 객체(first class object)이다