JS - 고차함수

일급 객체

 

Javascript 에 특별 대우 받는 일급 객체가 있음.

대표적인 일급 객체 중 하나가 함수!!!

자바스크립트에 함수는 

- 변수에 할당할수 있음

- 다른 함수의 전달인자로 전달될수 있음

- 다른 함수의 결과로써 리턴될 수 있음

---

고차함수의 이해

고차함수는 함수를 전달인자로 받을수 있고 함수를 리턴할 수 있는 함수임.

함수는 변수에 저장할수 있꼬 그 함수를 담은 변수를 전달인자로 받을수 있음

 

다른 함수(caller)의 전달인자(argument)로 전달되는 함수를 콜백 함수라고 함

어떤 작업이 완료되었을 때 호출하는 경우가 많아서, 답신 전화를 뜻하는 콜백 함수라고 함

 

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. 함수를 리턴하는 경우 

안에서는 밖을 접근 가능 밖에서는 안으로 접근 불가능 한데 그런 구조를 가능하게 하는것이 adder (5) (3) 이런 경우!

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

adder()();
/*
 * 함수 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

 

---

내장 고차 함수

 

filter 함수

배열의 filter 메서드는, 모든 배열의 요소 중에서 특정 조건을 만족하는 요소를 걸러내는 메서드

const isEven = function (num) {
    return num % 2 === 0;
  };

let arr = [1,2,3,4,5];
let output = arr.filter(isEven);

console.log(output);

 

 

reduce 함수

let arr = [1,3,5,7,9,11,13,15];
  const arrSum = arr.reduce(function (num1, num2){
        return num1 + num2
  }, 0);

  console.log(arrSum);

 

  let arr = [1,3,5,7,9,11,13,15];

  let callbackFn = function(num1,num2){
    if(num2 % 2 === 0){
        return num1 + num2;
    }else return num1 * num2;
  };

  const arrSum = arr.reduce(callbackFn, 1);

  console.log(arrSum);