[JS] 고차함수 정복하기 1편: 개념

Jeongwon Seo·2021년 8월 14일
0

JS/Node

목록 보기
4/16
post-custom-banner

1. 일급 객체로 취급받는 함수

자바스크립트에서 함수는 특별한 취급을 받는다. 함수는 변수에 할당 가능하며, 다른 함수의 인자로도 들어갈 수 있으며, 다른 함수의 리턴값으로 함수를 출력할 수도 있다!

  • 일급객체 함수의 예시

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

/*
 * 아래는 변수 square에 함수를 할당하는 함수 표현식입니다.
 * 자바스크립트에서 함수는 일급 객체이기 때문에 변수에 저장할 수 있습니다.
 *
 * 함수 표현식은 할당 전에 사용할 수 없습니다.
 * cubeRoot(27); // --> ReferenceError: Can't find variable: square
 */

const CubeRoot = function (num) {
  return Math.pow(num,1/3);
};

// square에는 함수가 저장되어 있으므로 (일급 객체), 함수 호출 연산자 '()'를 사용할 수 있습니다.
output = square(27);
console.log(output); // --> 3

2. 다른 함수의 인자로 들어가는 경우

function square(num) {
  return num * num;
}

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

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

3. 함수를 리턴하는 경우

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

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

// multiflier(5)는 함수이므로 함수 호출 연산자 '()'를 사용할 수 있습니다.
let output = multiplier(3)(7); // -> 21
console.log(output); // -> 21

// adder가 리턴하는 함수를 변수에 저장할 수 있습니다.
// javascript에서 함수는 일급 객체이기 때문입니다.
const multiply3 = multiplier(3);
output = multiply3(2);
console.log(output); // -> 6

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

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
profile
피트는 구덩이라는 뜻이다 구덩이를 파다보면 좋은 것이 나오겠지 (아싸 벡스룬)
post-custom-banner

0개의 댓글