9/20 TIL

< 목차 >

1. 고차 함수
2. 내장 고차 함수 (filter, map, reduce)
3. 회고

   ---

1. 고차 함수

• 고차 함수는 함수를 전달인자로 받을 수 있고, 함수를 리턴할 수 있는 함수이다.
• 함수는, 함수를 담은 변수를 전달인자로 받을 수 있다.
• 함수 내부에서 변수에 함수를 할당 가능, 함수는 변수를 리턴할 수 있다.
• 다른 함수의 전달인자로 전달되는 함수를 콜백 함수라고 한다.
• '함수를 리턴하는 함수'를 고안해 낸 논리학자 하스켈 커리의 이름을 따, 커링함수라고도 한다.
• 고차 함수는 '순수 함수' 깊은 관련이 많다.(이에 관해서는 따로 서술할 계획이다)

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

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

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의 콜백으로 전달되었다.

---

2. 내장 고차 함수 (filter, map, reduce)

2-1) filter

• filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환한다.
• 배열의 각 요소가 함수에 따를때, 값이 true이면 따로 분류한다.
• filter()는 조건에 맞는 데이터만 분류 할 때 사용된다.

예제)

function isBigNumber(value) {
  return value >= 10;
}

 const filtered = [3, 5, 12, 9, 56, 73].filter(isBigNumber);
// filtered는 [12, 56, 73]

---

2-2) map

• map()메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환해준다.
• 배열의 각 요소가 함수에 의해 다른 요소로 지정된다.
• map()은 하나의 데이터를 다른 데이터로 매핑 할 때 사용된다.

예제)

const numbers = [1, 9, 49, 81];
const roots = numbers.map(Math.sqrt);
roots는 [1,2,3]
numbers는 그대로 [1,4,9]

---

2-3) reduce

• reduce(acc,cur,idx) 메서드는 배열의 각 요소에 대해 주어진 리듀서(reducer)함수를 실행하고, 하나의 결과값을 반환해준다.

예제)

const arr = [0, 1, 2, 3, 4];

// 0 + 1 + 2 + 3 + 4
const initialValue = 0;
const arr2 = arr.reduce(
  (acc, cur) => acc + cur,
  initialValue
);

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

---

3. 회고

오늘은 대망의 section 2 고차함수 학습이 시작되는 날이었다. 쉽지않을거라는 것을 알고 있었지만 막상 학습을 시작하니 절망 그 자체였다... 지금까지 코드스테이츠 진행을하면서 주여진 학습표 시간보다 일찍 끝냈으면 끝냈지.. 밀렸던 적은 없었는데 많이 당황했었던 것 같다. 하지만 점심에 리프레쉬를 하고 마음을 다잡고 코플릿 문제를 하나 하나 풀다보니 학습이 되고 문제를 풀 수 있게되니 재밌어지기 시작하였다! 코플릿 문제를 풀면서 이렇게 재밌던 적은 없었던 것 같다. 오늘 페어분도 너무 열정있고 실력있으신 분과 함께 학습을 하니 집중 재미가 배로 되었었다! 고차함수의 첫번째 학습날 당황하고 어려웠던점도 있었으나 극복한 내 자신에게 칭찬을 해주고 싶다 ㅎ... 앞으로 객체지향 및 비동기 등등의 더 어려운 학습들이 기다리고 있겠지만 하나하나 부셔주겠다!