코드스테이츠 (S2U1 [JavaScript] 고차함수)

일급 객체 

js에서 함수가 대표적인 일급 객체중 하나이다. 

함수 특징 

변수에 할당(assignment) 할 수 있다.

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

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

다른 함수의 전달인자(argument)로 전달될 수 있다.

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

 

고차함수 

함수를 전달인자(argument)로 받을 수 있고, 함수를 리턴할 수 있는 함수  함수 특징과 같은 모습이다.

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

// 다른 함수의 전달인자(argument)로 전달될 수 있다.
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

// 다른 함수의 결과로서 리턴될 수 있다.
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 

테스트를 통과한 요소로 이루어진 새로운 배열. 어떤 요소도 테스트를 통과하지 못했으면 빈 배열을 반환합니다.

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

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6); // 화살표 함수 

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"] words 배열안에 요소들중 
// 길이가 6이상인 것만 걸러서 새로운 배열로 반환한듯

map

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

const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

reduce 

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

const array1 = [1, 2, 3, 4];

// 0 + 1 + 2 + 3 + 4
const initialValue = 0;
const sumWithInitial = array1.reduce(
  (previousValue, currentValue) => previousValue + currentValue,
  initialValue
);

console.log(sumWithInitial);
// expected output: 10

arr.reduce(callback(accumulator, currentValue, index, array), initialValue) // 기본 형식

배열 요소의 순회는 initialValue에 설정 유무에 따라 순회를 시작하는 index 0부터 시작할수도 있고 index 1부터

시작할수도 있습니다. 주로 배열 요소의 합계를 계산하는데 사용 되며, 배열 또는 객체로 반환할 수도 있습니다.

arr
- 순회하고자 하는 배열
 
accumulator
- 누적되는 값
- callback 함수의 반환값을 누적
- initialValue를 설정한 경우 callback의 최초 호출시 initialValue로 값으로 초기화
- initialValue가 없을 경우 arr의 0번째 인덱스 값으로 초기화
 
currentValue
- 현재 배열의 요소
 
index(생략 가능)
- 현재 배열 요소의 index
 
array(생략 가능)
- reduce 함수를 호출한 배열
 
initialValue(생략 가능)
- callback의 최초 호출에서 첫 번째 인수에 제공하는 값. 초기값을 제공하지 않으면 배열의 첫 번째 요소를 사용합니다.

빈 배열에서 초기값 없이 reduce()를 호출하면 오류가 발생합니다.

 

filter,map,reduce 메소드들은 많은 예제들을 풀어보면서 익숙해 져야 할듯 싶다.