JavaScript 일급객체와 고차 함수

JavaScript 일급객체와 고차함수

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

const foo = function() {
   console.log("foobar");
}
// 변수를 사용해 호출
foo();

• 함수를 변수에 할당

 

function sayHello() {
   return "Hello, ";
}
function greeting(helloMessage, name) {
  console.log(helloMessage() + name);
}
// `sayHello`를 `greeting` 함수에 인자로 전달
greeting(sayHello, "JavaScript!");

• 함수를 인자로 전달

 

function sayHello() {
   return function() {
      console.log("Hello!");
   }
}

• 함수를 함수로 반환. 이를 고차함수라 합니다.

 

고차 함수

 : 고차함수는 함수를 인자로 받거나 반환함으로써 작동하는 함수를 말합니다. 이 때 다른 함수의 인자로 전달되는 함수를 콜백 함수라고 합니다. 

function makeFunc() {
  let name = "Mozilla";
  function displayName() {
    console.log(name); // "Mozilla"
  }
  return displayName;
}

var myFunc = makeFunc();

myFunc(); // "Mozilla"

 

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

 : 아래 예시에서 doubleNum은 다른 함수를 인자로 받는 고차 함수입니다. 이 때 함수 doubleNum의 첫 번째 인자 func에 함수가 들어올 경우 함수 func는 함수 doubleNum의 콜백 함수입니다. 아래와 같은 경우, 함수 double은 함수 doubleNum의 콜백 함수입니다.

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

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

let output = doubleNum(double, 4);
console.log(output); // -> 8

 

함수를 리턴하는 경우

 : 함수 adder는 다른 함수를 리턴하는 고차 함수입니다. adder는 인자 한 개를 입력받아서 함수(익명 함수)를 리턴합니다. 리턴되는 익명 함수는 인자 한 개를 받아서 added와 더한 값을 리턴합니다. adder(5)는 함수이므로 함수 호출 연산자 '()'를 사용할 수 있습니다. adder가 리턴하는 함수를 변수에 저장할 수 있습니다. javascript에서 함수는 일급 객체이기 때문입니다.

function adder(added) {
  return function (num) {
    return num + added;
  };
}

let output = adder(5)(3); // -> 8
console.log(output); // -> 8

const add3 = adder(3);
output = add3(2);
console.log(output); // -> 5

 

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

 :  함수 doubleAdder는 고차 함수입니다. 함수 doubleAdder의 인자 func는 함수 doubleAdder의 콜백 함수 입니다. 함수 double은 함수 doubleAdder의 콜백으로 전달되었습니다. doubleAdder(5, double)는 함수이므로 함수 호출 기호 '()'를 사용할 수 있습니다. doubleAdder가 리턴하는 함수를 변수에 저장할 수 있습니다. (일급 객체)

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

function doubleAdder(added, func) {
  const doubled = func(added); // double(5) = 10
  return function (num) { // 3
    return num + doubled; // 3 + 10
  };
}

doubleAdder(5, double)(3); // -> 13

const addTwice3 = doubleAdder(3, double);
addTwice3(2); // --> 8

 

정리

• 일급객체 : 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체
• 고차함수 : 함수를 인자로 받거나 반환함으로써 작동하는 함수
• 콜백함수 : 다른 함수의 인자로 전달되는 함수

 

참고

MDN - 일급 함수

PoiemaWeb - 함수

HEROPY Tech - Closure(함수 클로저)