[TIL] #17. 고차함수

2022.5.24. (화)

1. 오늘의 소감

• 고차함수는 예전에 공부하려다 손 놓은 적이 있었다. 그래서 수업 전날 걱정되어 관련 유튜브 강의를 듣고 기본 작동 방식을 외우고 잤다. 확실히 코드에서 자주 쓰이는 고차함수 구조를 눈에 익히고 수업에 들어가니 이해가 잘 된다! 코플릿 문제도 생각보다 훨씬 술술 풀리고! 지문은 복잡해보였지만, 어떤 함수를 써야할 지 딱 보이는 느낌이랄까. 풀이 방법을 눈으로 파악하고 슥슥 코딩을 짜내려가는 게 정말 재밌었다. 이제 map, reduce 코드를 봐도 두렵지 않다! 막막하던 부분을 빠르게 응용할 수 있게 되는 경험이 짜릿했다~!
• 오늘 배운 고차함수 filter, map, reduce, (그리고 forEach) 는 코딩테스트 문제의 단골 소재라고 한다. 오늘 익힌 걸 자주 복습하면서 숙달시켜야겠다.
• ※ 배열 내장 고차 함수 이해에 완전 도움되었던 강의들
  코딩앙마 - 배열 메소드1코딩앙마 - 배열 메소드2(sort, reduce)
• 코딩알려주는누나 - 코드의 질이 달라지는 배열함수 7종세트!
• 오늘 수업에서 배운 ‘추상화'라는 개념이 매우 인상깊었다. 추상화는 복잡한 어떤 것을 압축해서 핵심만 추출한 상태로 만드는 것이다. 추상화는 세상 어디에나 있다! 스위치를 누르면 불이 들어오는 전등이라던지, 카드 단말기에 신용카드를 긁는다던지, 우리는 그 작동 원리를 1도 모르지만 이렇게 하면 이런 결과가 나온다는 것을 알고있다. 이처럼 ‘그 안에 숨겨진 복잡한 로직을 파악하지 않고도 쉽게 사용할 수 있는 것들’은 모두 추상화에 해당한다고 볼 수 있다.

2. 학습한 키워드

• 일급 객체, 고차 함수, 커링 함수, 콜백 함수, 내장 고차 함수, filter, map, reduce

3. 키워드를 바탕으로 학습 내용 설명해보기

• 일급 객체(First Class Object) 는 1) 변수에 할당 가능하고, 2) 함수의 전달인자로 전달할 수 있고 3) 함수의 결과로서 리턴될 수 있는 객체를 말한다. 자바스크립트의 대표적인 일급 객체는 ‘함수'다.
• 고차 함수란 1) 다른 함수를 전달인자로 받을 수 있거나 2) 함수를 리턴하는 함수이거나 3) 1과 2 둘다 해당하는 함수이다.
• 커링 함수는 ‘함수를 리턴하는 함수'를 뜻하는데, 커링함수를 고참 함수와 같이 쓸 때는 고차 함수가 ‘다른 함수를 전달인자로 받는 함수'만을 의미하기도 한다. 하지만 정확하게 말하자면 고차 함수 안에 커링 함수가 포함된다고 할 수 있다. 또한 커링 함수 라는 이름을 사실 별로 쓰이지 않는다. 그냥 ‘함수를 리턴하는 함수'와 ‘함수를 전달인자로 받는 함수' 모두 고차 함수로 표현하는 게 더 좋다.
• 콜백 함수란, 다른 함수의 전달인자로 전달되는 함수를 말한다.
• 콜백 함수를 전달받은 고차함수를 caller 라고 지칭한다. 이 고차함수는 콜백함수를 자기 함수 내에서 호출할 수도 있고, 호출하지 않을 수도 있다.
• 배열의 내장 고차 함수로는 대표적으로 filter, map, reduce 가 있다. 이 세가지는 정말 많이 활용되니 숙지 하고 있다.
• 배열 내장 고차 함수들은 이 3가지가 가장 중요하다.
  1. 콜백 함수에 배열의 요소를 전달인자로 하나씩 넣어준다.
  2. 고차 함수 종류에 따라 콜백 함수에게 요구하는 return 값이 다르다.
  (예를 들어, filter 콜백함수는 boolean 값 return 해줘야하고, map은 새 배열에 넣을 값을 return 해줘야한다. reduce는 다음 누적값(acc)에 넣어줄 값을 return 해야한다.)
  1. 고차 함수의 결과물을 생각하면, 각 상황에서 어떤 걸 써야할지 알수 있다.
  예를 들어,결과물이 원본 배열과 길이가 같으나, 요소 값이 다른 배열이다 → map
• 결과물이 원본 배열의 전체 요소를 축적해 만든 ‘값’이다. (결과물이 배열이나 객체도 가능하나 기본적으로는 값 도출용으로 사용) → reduce
• 결과물이 원본 배열과 같으나 일부 요소만 걸러진 배열이다 → filter
• filter는 이름 그대로 배열을 필터링하기위한 메서드다.
  • arr.filter(콜백함수) 를 사용하면 원하지 않는 값을 걸러낸 새로운 배열을 만들 수 있다.
  • filter는 콜백함수의 전달인자로 배열의 요소 하나하나를 넣어준다.
  • (그 외 index 같은 것도 넘겨줄 수 있지만, 자주 쓰이는 건 아니니 생략)
  • 조건식이 true 일 때 el 을 새 배열에 넣어준다.
  • 따라서 filter의 콜백함수의 리턴값은 true, false 이도록 만든다.
  • 필터링된 새로운 배열 반환. 원본 배열 변경시키지 않음 immutable
  • 반환되는 배열은 원본 배열보다 길이가 같거나 짧다. (원본에서 필터링 된 거니까!)
• map은 이름 그대로 원본 배열을 매핑한 새로운 배열을 만들기 위한 메서드다.
  • map을 사용하면 원본배열의 요소 값을 2배한 새로운 배열을 만드는 등의 활용이 가능하다.
  • map은 콜백함수의 전달인자로 배열의 요소 하나하나를 넣어준다.
  • (그 외 index 같은 것도 넘겨줄 수 있지만, 자주 쓰이는 건 아니니 생략)
  • 새로 넣어줄 값을 return 하면 그 값을 새 배열에 넣어준다.
  • 따라서 map의 콜백함수의 리턴값은 새 배열에 넣어줄 요소이도록 만든다.
  • 매핑된 새로운 배열 반환. 원본 배열 변경시키지 않음 immutable
  • 반환되는 배열은 원본 배열과 길이가 같다. (원본에서 1:1 매핑된거니까!)
  • ex) [ 1, 2, 3 ] ⇒ 앞에 idx_ 붙여라 ⇒ [ idx_1, idx_2, idx_3 ]
  • 만약 콜백함수의 return 문을 안 써주면? 그럼 자동으로 return 값은 undefined 가 되니까 → undefined 만 원본 배열 길이만큼 들어간 새로운 배열을 반환…
  • ex) [ 1, 2, 3 ] ⇒ return 값 없음 ⇒ [ undefined, undefined, undefined ]
• reduce는 배열에 있는 데이터를 하나로 응축할 수 있는 메서드다.
  • 예를 들어 배열의 모든 요소를 더해줘야된다던가, 모든 요소 중 가장 큰값, 작은 값 찾는 데에도 유용하다.
  • acc = accumulate, 축적하다 = 누적 값초기값 ⇒ 옵셔널이지만 중요! 가능하면 써주는 게 좋다.
  • cur = current, 현재의 = 현재 값
  • reduce는 콜백함수의 전달인자로 배열의 누적값(acc) 와 현재 값(cur)을 넣어준다.
  • (그 외 index 같은 것도 넘겨줄 수 있지만, 자주 쓰이는 건 아니니 생략)
  • 다음 반복에서 acc에 들어가야되는 값을 return 하면 그 값이 acc 변수에 할당되어 다음 반복에 쓰인다.
  • 따라서 reduce의 콜백함수의 리턴값은 **누적값(acc)**이도록 만든다.
  • 응축된 새로운 데이터 반환. 원본 배열 변경시키지 않음immutable
  • 결과물이 배열이 아니다. (물론 배열이나 객체도 반환할 수 있으나, 그건 더 응용했을 때 얘기고, 기본적으로는 값 도출용으로 사용)
  • ex) [ 1, 2, 3 ] ⇒ 누적해서 더해라 ⇒ 6
• filter, map, reduce 모두 원본 배열을 변경하지 않는다. 즉, immutable 하다.
• 배열 내장 고차 함수들은 화살표함수와 상성이 좋다. 콜백함수에 화살표 (익명)함수 써주면 코드가 훨씬 깔끔해진다.

function sumArr(arr){
	return arr.reduce((acc, cur) => acc + cur)
}

let arr = [1,2,3,4,5]
sumArr(arr);  // -> 15

4. 어려웠던 키워드

• 학습 내용에는 잘 안 다뤄졌지만 추가로 공부해야할 것들 : forEach, find, findIndex, sort, some, every