TIL: 2022-09-20 🤯

⚙️ 오늘 배운 주제

고차함수

 

🐹 오늘의 기분

이름부터 범상치 않은 고차함수를 배웠다. 오전에 혼자 코플릿을 푸는데 처음 세션에서 시간이 부족해서 어라..? 하면서 후다닥 풀어제꼈다. 페어분 봽기 전에 남은 문제를 더 살펴볼 걸 그랬다. 문제를 아예 처음 보니 뇌정지가 와서 한참 헤맸었다. 게다가 일부 개념은 와닿지 않은 상태로 푸니 오류도 수없이 마주했었다. (reduce가 내 발목을 잡았다)

오늘 학습 요약 

- 학습할 때: "어..?"

- 라이브세션: "아...?"

복습하면서 점차 "아...!"로 바뀌길 기대해봐야지

 

🗝 키워드

일급객체, 고차함수, 커링함수, 콜백함수, filter, map, reduce, 추상화, 값 수준에서의 추상화, 사고 수준에서의 추상화

 

🗣 스스로에게 설명

일급 객체 first-class citizen

함수는 일급객체에 해당한다.

일급 객체는 변수에 할당이 가능하고, 다른 함수의 전달인자로 쓰일 수 있으며, 다른 함수의 결과로서 리턴될 수 있다.

일급 객체는 문자열, 숫자와 같이 다른 데이터처럼 사용할 수 있다.

 

고차함수 High order Function

아래 두 조건 중 하나 이상을 만족하면 고차함수이다.

1. 함수를 전달인자로 받는다.
2. 함수를 리턴한다.

1번 조건을 만족할 때 전달인자로 전달되는 함수를 콜백함수(callback function)라고 한다. 

클로저도 함수가 일급 객체이기 때문에 가능한 것이다.

---

JavaScript에는 여러 고차함수가 내장되어 있다.

오늘은 filter, map, reduce를 학습했다. 이 외에도 배열에는 some, every 등 여러 고차함수가 존재한다. 

Array.prototype <- 이렇게 쓰는 이유는 객체지향을 배우면 알 수 있다고 하셨다. 내일 바로 객체지향인데 궁금

Array.prototype.filter()

→ 콜백함수에 작성된 조건에 부합하는 요소만 분류하여 배열로 리턴한다. 

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

let arr = [1, 5, 7, 10, 17, 29];
arr.filter(isBiggerThan10); // [10, 17, 29]

필터링한다고 해서 원본 배열 arr의 값이 바뀌는 것은 아니다. (immutable)

 

Array.prototype.map()

→ 배열의 모든 요소에 콜백함수를 적용한 새 배열을 리턴한다.

function square(value) {
  return value * value;
}

let arr = [1, 2, 3, 4, 5];
arr.map(square); // [1, 4, 9, 16, 25]

이 또한 마찬가지로 원본 배열을 훼손하지 않는다. 

따라서 고차함수를 적용한 배열을 활용하고 싶다면 결과를 변수에 새롭게 할당해주어야 한다.

 

Array.prototype.reduce()

→ 배열의 각 요소를 콜백함수에 따라 하나의 형태로 압축한다. (하나의 결과값을 리턴한다)

reduce 메소드는 아래와 같이 쓰인다.

arr.reduce(콜백함수, 초기값(optional))

reduce 메소드에 들어가는 콜백함수에는 기본적으로 두 인자가 요구된다.

function(응축값, 현재값)

// 배열의 모든 요소를 더하기
const adder = function (acc, cur) {
  return acc + cur;
}

let arr = [5, 7, 10, 14, 19];
arr.reduce(adder, 0) // 55

---

함수를 통해 반복되는 복잡한 로직을 저장해두고 필요할 때 끌어다 쓸 수 있다.

이는 일종의 추상화에 해당한다.

함수에서는 값 수준에서의 추상화만 일어난다. 

함수의 추상화를 한 단계 더 높인 것이 고차함수이고, 여기서는 사고 수준의 추상화가 일어난다.

추상화의 수준이 높아질수록 생산성은 높아진다. (아래 링크 참고)

 

추상화 - 용어 사전 | MDN

 

❓ 막히는 or 막혔던 부분

reduce는 반복문을 처음 배울 때의 감정을 느끼게 해주었다.

그래도 라이브 세션 들으니까 뭔가 정리가 되는 기분이었음

배열일 때는 괜찮았는데 문제에서 객체만 나오면 잠깐 사고가 정지됐었다. 

 

🔍 공부가 더 필요한 부분

reduce 메소드

객체가 나오는 코플릿 문제 다시 풀어보기

 

🛠 질문 만들기

• 한 배열에서 짝수에 해당하는 요소만 걸러내고 싶을 때 배열의 내장 고차함수 중 어떤 메소드를 써야하는가?
• 고차함수를 활용하면 어떤 수준의 추상화가 가능하며, 추상화를 했을 때의 장점은 무엇인가?