고차함수

⭐ 앞으로 배울 react를 위해 확실히 배워야하는 고차함수

📌 일급 객체란?

• 다른 객체들에 적용 가능한 연산을 모두 지원하는 객체
• 함수, 객체, 배열, 정수, 문자열 등은 일급 객체가 될 수 있다.

1. 변수에 할당 가능

• 변수에 저장하고 나중에 참조할 수 있다.

2. 인자로 전달 가능

• 다른 함수 내에서 해당 객체를 사용할 수 있다.

3. 반환값으로 사용 가능

• 함수 내에서 생성한 일급 객체를 반환하여 다른 곳에서 활용할 수 있다.

4. 데이터 구조에 저장 가능

• 배열, 객체, 리스트 등에 저장할 수 있다.

5. 익명 함수로 생성 가능

---

📌 고차함수란?

• 다른 함수를 전달인자로 받거나 함수를 return하는 함수다.
• 일급 객체에 해당한다. 따라서 일급객체의 특징을 지닌다.
• 고차 함수를 사용하면 코드의 재사용성을 높이고, 프로그램의 유연성을 높일 수 있다.

고차함수를 쓰는 이유

👉 복잡한 어떤 것을 압축해서 핵심만 추출한 상태로 만들기 위해서이다.(추상화)

---

고차함수의 경우는 크게 두가지로 나눌 수 있다.

1. 함수를 전달인자로 받는 고차 함수

❗ 콜백함수 : 다른 함수의 인자로 전달되어, 이후에 호출되는 함수

function func(n, callback) {
  for (let i = 0; i < n; i++) {
    callback(i);
  }
}

function printNumber(num) {
  console.log(num);
}

func(5, printNumber);

func 함수는 callback이라는 함수를 전달인자로 받는 고차 함수이다.

작동방식

1. func(5, printNumber)을 실행할 경우 해당 함수가 실행된다.
2. 함수가 실행되면 n에는 5가 할당되고 callback에는 printNumber함수가 할당된다.
   즉 실행되면 아래와 같은 코드가 된다.

function func(5, printNumber) {
  for (let i = 0; i < 5; i++) {
    printNumber(i){
  	  console.log(i);
	};
  }
}

2. 함수를 반환하는 고차 함수

function func(num1) {
  return function (num2) {
    return num1 * num2;
  };
}

const func2 = func(2);
func2(5); // 10

func 함수는 num1라는 매개변수를 받고, 이를 활용하여 새로운 함수를 반환한다.
반환된 함수는 전달된 숫자와 num1을 곱한 값을 반환한다.
func(2)는 전달된 숫자를 2로 곱하는 함수를 반환하므로 해당 코드는 고차함수이다.

작동방식

1. func2(5)을 실행할 경우 func(num1)함수가 실행된다.
2. func2변수는 매개변수로 2를 가지고func()함수를 포함하고 있으므로 func()함수가 실행되면서 num1에 매개변수로서 2가 할당된다.
3. 내부함수의 매개변수로 num2에 5가 할당된다.
   즉 실행되면 아래와 같은 코드가 된다.

function func(2) {
  return function (5) {
    return 2 * 5;
  };
}

---

내장 고차함수

내장 고차함수는 여러 종류가 있으며 자주쓰이는 내장 고차함수로 3가지를 볼 수 있다.

1. filter()

const arr = [1, 2, 3, 4, 5];
const result = arr.filter(function(num){
  return num % 2 === 0; // 짝수만 필터링
}); // [2, 4]

2. map()

const arr = [1, 2, 3, 4, 5];
const result = arr.map(function(num){
  return num * num // 각 요소를 제곱하여 새로운 배열 생성
}); // [1, 4, 9, 16, 25]

3. reduce()

reduce() 함수는 첫 번째 인자로 리듀서 함수를 받는다. 리듀서 함수는 누산기와 현재값을 인자로 받고, 이전 누산값과 현재 요소를 기반으로 새로운 누산값을 반환한다. 두 번째 인자인 0은 초기 누산기 값이다.
즉 .reduce(리듀서 함수(누산값, 현재값){}, 누산기 초기값) 형태로 누산값은 reduce()함수 내에서 최종적으로 return된 값이며 현재값은 지정한 배열에서 순서대로 할당되어 마지막 배열 요소까지 할당되어 실행이 끝나면 최종 누산값을 return한다.

const arr = [1, 2, 3, 4, 5];
const sum = arr.reduce(function(sum, val){
  return sum + val; // 배열의 합을 계산
}, 0); // 15

---