[JavaScript] 고차 함수

Yuhallo·2023년 1월 12일

목록 보기

7/9

🧡 고차 함수

💚 일급 객체

자바스크립트에서 특별하게 취급하는 일급객체(first-class citizen)로 대표적으로 함수가 있습니다. 함수는 변수에 할당할 수 있고, 다른 함수의 전달인자가 될 수도 있고, 함수의 결과로 리턴할 수도 있습니다. 따라서 함수를 배열의 요소나 객체의 속성값으로 저장할 수 있고, 데이터처럼 다룰 수 있습니다.

변수에 함수를 할당하는 경우 : 함수 표현식으로 사용하는 경우를 말합니다.

💚 고차함수

함수를 전달인자로 받을 수 있고, 함수를 리턴할 수 있는 함수입니다.

고차함수의 이해

다른 함수의 전달인자로 전달되는 함수를 콜백함수라고 합니다. 콜백함수를 전달받은 고차 함수는 함수 내부에서 이 콜백 함수를 호출할 수 있고, 조건에 따라 실행여부를 결정할 수도 있습니다. 아에 호출하지 않을 수도 있고, 여러번 실행할 수도 있습니다. 특정 작업 완료 후에 호출하는 경우에도 충분히 접할 수 있습니다.
함수를 리턴하는 함수를 '커링 함수'라고 부릅니다. 함수를 전달인자로 받는 함수에 한정해서 사용하기도 합니다.

(배열의) 내장 고차 함수

filter 메서드

모든 배열의 요소 중 특정 조건에 따라 분류(filtering)하여 새 배열을 리턴하는 메서드로, 조건을 명시한 함수를 전달인자로 받는 고차함수입니다.
조건을 명시한 함수 형태의 전달인자를 콜백 함수라 합니다. 콜백함수는 전달받은 배열의 요소를 받아 함수를 실행하고, 내부 조건에 따라 true || false를 리턴 합니다. 여기서 true인 값만 새 배열로 리턴합니다.
새 배열을 리턴하므로 기존 배열을 수정하지 않습니다.

🎀 filter 메서드가 동작하는 방식

Array.prototype.filter = function(func) {
 const arr = this;
 const numArr = [];
 for (let i in arr) {
   newArr.push(this[i]);
   }
 }
 return newArr;
}

map 메서드

🎀 map 메서드 구현

function mapCallback(func, arr) {
  let newArr = [];
  for(let el of arr) {
    newArr.push(func(el));
  };
  return newArr;
}

배열의 각 요소에 동일한 행동(콜백함수)를 적용시킨 요소를 가진 새로운 배열을 리턴한다. 특정 행동을 함수의 형태로 전달인자로 전달하는 고차함수입니다.
새로운 배열을 리턴하므로 기본 배열을 수정하지 않고, 하나의 데이터를 다른 데이터로 매핑(mapping)하는 메서드입니다.
값을 추출할때도 사용할 수 있습니다.
콜백함수에 두번째 인자를 주면 해당 요소의 인덱스를 가져옵니다.

reduce 메서드

🎀 요소의 총 합을 구하는 reduce 메서드 구현
function computeSumOfAllElements(arr) {
  return arr.reduce((sum,el) => sum + el, 0)
}


* 배열의 각 요소를 특정 장법(콜백 함수)에 맞게 하나로 응축(reduction)시킨 **값을 리턴**합니다.

* 초기값을 정합니다. 정하지 않으면 배열의 가장 첫번째 요소가 초기값이 됩니다. 초기값은 누적값의 기반이 됩니다. 

* 문자열이나 숫자등을 더하거나 뺄수도 있고 제일 작은것과 큰것을 비교할 수도 있으며 배열 이외의 다른 형태로도 만들 수 있습니다. 이러한 코드를 수도코드라고 합니다.

> 🎀 프로퍼티가 변수일 때는 무조건 bracket notation으로 써야합니다. dot notation을 사용하지 않습니다.
```js
// 객체의 키값 중 홀수만을 골라내 배열로 리턴
obj[property].filter((el) => el % 2 === 1)//

💚 고차함수의 중요성

복잡한 것을 압축해 핵심만 추출해 만드는 것이 추상화 입니다. 컴퓨터 공학의 근간을 이루는 개념 중 하나입니다.

자바스크립트를 비롯한 많은 프로그래밍 언어는 추상화의 결과입니다. 컴퓨터는 0과 1만 이해합니다. 하지만 우리가 쓰는 컴퓨터는 우리가 이해할 수 있는 문자로 내용을 표시합니다. 즉, 컴퓨터 내부 구조에 대한 고민이 추상화로 해결된 것입니다.
추상화하면 생산성이 향상됩니다. 추상화의 관점에서 함수는 사고(생각) 또는 논리의 묶음입니다. 즉, 반복해서 같은 계산을 해야하는 로직을 함수로 만드는 것은 추상화에 해당합니다.
이러한 함수로 추상화하는 것에서 한단계 더 높인 것이 고차합수입니다.