[Javascript] 고차 함수의 중요성과 추상화

코드스테이즈 41기 교육 내용을 정리하고 있습니다.
틀린 부분이 있으면 댓글로 알려주시면 감사하겠습니다.

 

🐇추상화

---

복잡한 어떤것을 압축해서 핵심만 추출한 상태로 만드는 것

배열의 평균 값을 얻을수 있는 getAverage함수가 있다고 가정하자.
이 함수를 만들면 우리가 어떤 배열의 평균을 알고 싶다면 언제든 getAverage함수를 사용하여 값을 얻을수 있다.
이는 함수를 통해 복잡한 로직은 단순하게 만든 추상화이다.

함수 = 값을 전달받아 값을 리턴한다 = 값에 대한 복잡한 로직은 감춰있다 = 값 수준에서의 추상화

고차함수는 이 추상화의 수준을 사고의 추상화 수준으로 올린다.

고차함수 = 함수를 전달받거나 함수를 리턴한다 = 사고에 대한 복잡한 로직은 감추고 있다 = 사고 수준에서의 추상화

추상화의 수준이 높아지는 만큼 생산성도 비약적으로 상승 할수 있다.

🦅사고 수준의 추상화의 예시

---

const data = [
  {
    gender: 'male',
    age: 24,
  },
  {
    gender: 'male',
    age: 25,
  },
  {
    gender: 'female',
    age: 27,
  },
  {
    gender: 'female',
    age: 22,
  },
  {
    gender: 'male',
    age: 29,
  },
];

다음과 같은 성별과 나이가 나타나는 객체를 요소로 받는 리스트가 있다.

다음 데이터에서 남자의 평균 나이만 알수 있는 함수를 작성해보자

function maleAverageAge(data){
    const maleAgeData = data.filter( el => el.gender === 'male').map( el => el.age );
    return maleAgeData.reduce( (acc,cur) => acc+cur ) / maleAgeData.length;
}

고차 함수를 통해 사고 수준에서의 추상화를 달성할 수 있다. 각각의 작업은 다른 목적을 위해 재사용될 수 있다.

🦦잡담

---

추상화라는 개념은 이전에 다른 언어들에서도 자주 등장했는데 의미를 정확하게 이해 했던적이 없었던것 같다.
추상화가 엄청 어려운 말이라 생각했는데 이번에 배우면서 생각보다 별거 아니라는 느낌이다.
코드스테이츠 문서에 나와 있는 것처럼 자동차 시동버튼, 자료를 정리하는 엑셀, 교통카드 이런 것들도 추상화의 결과이다.
복잡한 무언가를 압축핸다는 개념만 알면 될거같다 !