[JavaScript] 고차함수, 내장 고차 함수

1. 고차함수

JavaScript에서 대표적인 일급 객체로는 함수가 있다. 이 함수는 특별한 취급을 받는다.

• 변수에 할당(assignment)할 수 있다.
• 다른 함수의 전달인자(argument)로 전달될 수 있다.
• 다른 함수의 결과로 리턴 가능 하다.

고차함수란?

함수의 특성이용해 함수를 전달인자로 받고, 함수를 리턴하는 함수 이다.
이때 고차 함수로 사용되는 함수의 전달인자로 들어오는 함수를 콜백 함수라고 한다.

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

function a(num){
    return num*4
  }
  
  function b(func, num){
    return func(num)
  }
// 함수 b는 다른 함수를(func) 받는 고차 함수이다.
// 함수 b의 첫번째 인자(func)에 함수가 들어올 경우 그 들어온 함수는 콜백 함수이다.
// a함수는 b의 첫번째 인자의 함수로 들어 왔음으로 a는 b의 콜백 함수이다.
  
  let output = b(a, 4)
  console.log(output) // 16

2) 함수를 리턴하는 경우

function add(added){
    return function(num){
        return num + added
    }
}

// 함수 add는 다른 함수를 리턴하는 고차함수다.
// 리턴되는 함수는 added와 num을 입력받아 두 값을 더한 값을 리턴 한다.

// add(10)은 함수 이므로 함수 호출 연산자 '()'를 사용 가능 하다.
let ouput = add(10)(20)
console.log(ouput) // 30

// 함수는 일급객체기 때문에 add가 리턴하는 함수를 변수에 저장 가능
const add10 = add(10)
ouput = add10(30)
console.log(ouput) // 40

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

2. 내장 고차함수

2-1 map

배열의 각 요소에 콜백 함수를 적용시킨 요소를 가진 새로운 배열을 리턴한다.

let arr = [1, 2, 3, 4, 5]

function multiply2(num){
  return num * 2
}

console.log(arr.map(multiply2)) // [2, 4, 6, 8, 10]

console.log(arr.map((multiply2, idx) => `${idx} : ${multiply2*2}`)) 
// [ '0 : 2', '1 : 4', '2 : 6', '3 : 8', '4 : 10' ]

// 콜백함수에 두번째인자를 줄 경우 인덱스를 가져온다.

2-2 filter

배열의 각 요소에 콜백 함수를 적용시켰을 때, ture 를 리턴하는 요소들만 모은 새로운 배열을 리턴

let arr = [1, 2, 3, 4, 5]

console.log(arr.filter(el => el % 2 === 0) // [2, 4]

console.log(arr.filter(el => el % 2 === 1)) // [1, 3, 5]

2-3 reduce

배열의 각 요소를 콜백 함수에 맞게 하나로 응축시킨 값을 리턴

let arr = [1, 2, 3, 4, 5]

console.log(arr.reduce((acc, cur) => {
    return acc + cur
})) // 15

• acc : 응축된 값
• cur : 배열 요소

acc	cur	retun 값
1	2	1 + 2
3	3	3 + 3
6	4	6 + 4
10	5	10 + 5
15

• 초기값을 설정하지 않으면 배열의 첫 요소가 acc로 들어간다.
• cur은 두번째 요소부터 시작
  
  
  
  

let arr = [1, 2, 3, 4, 5]

console.log(arr.reduce((acc, cur) => {
    return acc + cur
},10)) // 25

• 초기값 10을 입력

acc	cur	retun 값
10	1	10 + 1
11	2	11 + 2
13	3	13 + 3
16	4	16 + 4
20	5	20 + 5
15

console.log(arr.reduce((acc, cur) => {
    if (cur % 2 === 0){
        return acc + cur
    } else {
        return acc
    }
},0)) // 6

• 초기값 0을 입력

acc	cur	retun 값
0	1	0
0	2	0 + 2
2	3	2
2	4	2 + 4
6	5	6
0