[JavaScript] 고차 함수 (higher order function)

고차 함수

함수를 인자로 전달받거나 함수를 결과로 반환하는 함수

인자로 받은 함수를 필요한 시점에 호출하거나 클로저를 생성하여 반환하며. 자바스크립트의 함수는 일급 객체이므로 값처럼 인자로 전달할 수 있으며 반환할 수도 있다

❓

클로저

반환된 내부함수가 자신이 선언됐을 때의 환경(Lexical environment)인 스코프를 기억하여 자신이 선언됐을 때의 환경(스코프) 밖에서 호출되어도 그 환경(스코프)에 접근할 수 있는 함수 (자신이 생성될 때의 환경 (Lexical environment)을 기억하는 함수)

❓

일급 객체

생성, 대입, 연산, 인자 또는 반환값으로서의 전달 등 프로그래밍 언어의 기본적 조작을 제한없이 사용할 수 있는 대상을 의미

1. 무명의 리터럴로 표현이 가능하다.
2. 변수나 자료 구조(객체, 배열 등)에 저장할 수 있다.
3. 함수의 매개변수에 전달할 수 있다.
4. 반환값으로 사용할 수 있다.

배열 내장 고차 함수 보기

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

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

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

/*
 * 함수 doubleNum은 다른 함수를 인자로 받는 고차 함수다.
 * 함수 doubleNum의 첫 번째 인자 func에 함수가 들어올 경우
 * 함수 func는 함수 doubleNum의 콜백 함수다.
 * 아래와 같은 경우, 함수 double은 함수 doubleNum의 콜백 함수다.
 */
let output = doubleNum(double, 4);
console.log(output); // 8

2. 함수를 리턴하는 경우

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

/*
 * 함수 adder는 다른 함수를 리턴하는 고차 함수다.
 * adder는 인자 한 개를 입력받아서 함수(익명 함수)를 리턴한다.
 * 리턴되는 익명 함수는 인자 한 개를 받아서 added와 더한 값을 리턴한다.
 */

// adder(5)는 함수이므로 함수 호출 연산자 '()'를 사용할 수 있다.
let output = adder(5)(3); // 8
console.log(output); // 8

// adder가 리턴하는 함수를 변수에 저장할 수 있다.
// javascript에서 함수는 일급 객체이기 때문이다.
const add3 = adder(3);
output = add3(2);
console.log(output); // 5

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

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

function doubleAdder(added, func) {
  const doubled = func(added);
  return function (num) {
    return num + doubled;
  };
}

/*
 * 함수 doubleAdder는 고차 함수다.
 * 함수 doubleAdder의 인자 func는 함수 doubleAdder의 콜백 함수다.
 * 함수 double은 함수 doubleAdder의 콜백으로 전달되었다.
 */

// doubleAdder(5, double)는 함수이므로 함수 호출 기호 '()'를 사용할 수 있다.
doubleAdder(5, double)(3); // 13

// doubleAdder가 리턴하는 함수를 변수에 저장할 수 있다. (일급 객체)
const addTwice3 = doubleAdder(3, double);
addTwice3(2); // 8

Reference

https://poiemaweb.com/js-array-higher-order-function