고차함수, 콜백함수

First-class citizen(일급 객체)

- 컴퓨터 프로그래밍 언어 디자인에서 일반적으로 다른 객체들에 적용 가능한 연산을 모두 지원하는 객체

 

일급 객체의 세 가지 특징

- 변수나 데이터에 할당할 수 있다.

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

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

 

이는 함수를 데이터(string, number, boolean, array, object)를 다루듯이 다룰 수 있다는 의미

변수에 저장할 수 있기 때문에 배열의 요소나 객체의 속성 값으로 저장하는 것도 가능하다.

 

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

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

// square에는 함수가 저장되어 있으므로(일급 객체), 함수 호출 연산자 '()'를 사용할 수 있음

output = square(8);
cosole.log(output); // ---------> 64

 

고차함수(Higher order Function)

함수를 인자로 받거나 함수를 리턴하는 함수

이때 다른 함수(caller)의 인자(argumen)로 전달되는 함수를 콜백함수(callback function)

 

콜백함수를 전달받은 함수는 이 콜백함수를 호출(invoke)할 수 있다.

다른 함수(caller)는 조건에 따라 콜백 함수의 실행 여부를 결정할 수도 있고, 심지어 여러 번 실행할 수도 있다.

 

'함수를 리턴하는 함수'만을 일컫는 용어로 하스켈 커리(Haskell Curry)의 이름을 따서 커리함수라고 한다. 고차함수란 용어를 '함수를 인자로 받는 함수'에만 한정지어서 사용하기도 한다. 하지만 엄밀한 의미에서 고차함수는 커리함수를 포함한다.

 

콜백함수(callback function)

다른 함수의 실행이 끝난 뒤에 실행되는 함수

 

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

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

function doubleNum(func, num) {
  let doubledArr = [];
  return func(num);
}

// 함수 doubleNum은 다른 함수를 인자로 받는 고차 함수
// 함수 doubleNum의 첫 번째 인자 func에 함수가 들어올 경우
// 함수 func는 함수 doubleNum의 콜백 함수

// 아래와 같은 경우, 함수 double은 함수 doubleNum의 콜백 함수

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

 

함수를 리턴하는 경우

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

 

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

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 메소드의 인자로 전달되어야 함

- Filter 메소드는 걸러내기 위한 조건을 명시한 함수를 인자로 취하기 때문에 고차 함수

배열 중 짝수만을 걸러내기

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

let arr = [1, 2, 3, 4, 5, 6, 7, 8];
// let output = arr.filter(짝수);
// '짝수'를 판별하는 함수가 조건으로서 filter 메소드의 인자로 전달

let output = arr.filter(isEven);
console.log(output); // ->> [2, 4, 6, 8]

 

filter()

주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환

let words = ['hotdog', 'pizza', 'chicken', 'sushi', 'chitterlings', 'porkbelly'];
let result = words.filter(word => word.length > 7);

console.log(result);
// Array ["chitterlings", "porkbelly"]

 

map()

배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환

let array = [22, 33, 55, 99];

// pass a function to map
let result = array.map(x => x * 3);

console.log(result);
// Array [66, 99, 165, 297]

 

reduce()

배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환

리듀서 함수는 네 개의 인자를 가진다.

1) accumulator(누산기) 2) cur(현재 값) 3) idx(현재 인덱스) 4) src(원본 배열)

반환 값은 누산기에 할당되고, 누산기는 순회 중 유지되므로 결국 최종 결과는 하나의 값이 된다.

let array = [4, 12, 24, 32];
let reducer = (acc, cur) => acc + cur;

// 4 + 12 + 24 + 32
console.log(array.reduce(reducer));
// expected output: 72

// 5 + 4 + 12 + 24 + 32
console.log(array.reduce(reducer, 15));
// expected output: 87