[TIL] 2학년 시작, 고차함수

부제 : Section 2의 서막을 여는 고차함수 !

2학년 과정 및 계획

• section 2에서는 앞으로 공부해나갈 때 필요한 도구들의 사용법을 배운다.

  • 프로그래밍 컨셉 : 고차함수, 객체지향
  • 개발 편의 툴 : 리엑트, 비동기
  • 개발 환경과 흐름 : 웹서버, 네트워크

• 본격적으로 커리큘럼상으로도 알고리즘 문제를 풀게 된다. 알고리즘을 해결하기 위해 의사코드를 작성해보고 알고리즘에 익숙해지는 것이 목표.

어제 제출한 회고 블로그에도 적었지만 앞으로 해나가 할 목표들을 상기해보자면 아래와 같다.

🤟🏻 Try

• 11시에는 누워서 한 시간의 자유시간을 준 다음 12시에는 취짐.
• 운동을 3일에서 최대 주말 하루 포함 4일까지!
• 9시 수업 시작 전 간단하게 전날 정리 해놓은 벨로그나 노션 페이지 보면서 복습.
• ‘파고들기’시리즈 : 일주일에 한 번 어떤 개념을 깊게 공부하고 정리.

일급 객체

일급 객체란 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킨다. (출처:위키)

자바스크립트에서 함수는 일급 객체인데, 일급 객체이기 위한 세 가지 조건을 만족하고 있다.
1. 변수에 할당할 수 있고 (함수 표현식 사용)
2. 다른 함수의 전달인자로 사용될 수 있고
3. 다른 함수의 결과로 리턴 될 수 있다.

함수를 변수에 할당할 수 있기 때문에 함수를 배열의 요소나 객체의 속성값으로 저장할 수 있음.

고차함수

고차함수 : 함수를 전달인자로 받을 수 있고, 함수를 리턴할 수 있는 함수.

콜백함수 : 다른 함수의 전달인자로 전달되는 함수.

커링함수: 함수를 리턴하는 함수.

(고차함수가 커링함수를 포함하는 개념.)

함수는 단순히 값을 받아서 처리하지만, 고차함수는 함수를 전달받아 처리하기 때문에 사고의 추상화를 이룰 수 있다.
추상화는 복잡한 어떤 것을 압축해 핵심만 추출한 상태로 만드는 것이며 생산성의 향상(문제 해결을 더 쉬워지게 한다!)을 불러온다.

🤔 처음 고차함수와 관련 개념들을 배웠을 때 바로 클로저가 생각났는데, 이리저리 찾아보니 클로저는 '외부함수의 변수에 접근 가능한 내부함수'이므로, 커링함수의 내부에 만들어지는 함수가 클로저가 될 수 있는 것 같다. 커링함수를 사용하는 이유가 여러 인자 중 일부를 고정시켜 사용할 수 있다는 점인데, 클로저의 활용을 배우던 당시 클로저의 효용성과도 맞닿아 있었다.

내장 고차함수

자바스크립트 내부에 기본적으로 내장된 고차함수들이 있는데,
대표적으로는 배열 매서드들 중 일부가 대표적인 고차함수이다.
수업자료에서는 filter, map, reduce를 중점적으로 공부했고,
그 외에 혼자 찾아본 몇가지 내장함수들을 더 덧붙여서 적어보겠다.

• filter : 모든 배열 요소 중 특정 조건을 만족하는 요소를 걸러내는 매서드.
  배열의 각 요소가 특정 논리(함수)에 따르면 사실일 때 따로 분류한다.(
  기존 배열 수정하지 않음.
  

//짝수인 요소만 걸러서 새 배열 만들기 

const isEven = function (num) {
  return num % 2 === 0;
};//조건

let arr = [1,2,3,4]

let output = arr.filter(isEven);//isEven 함수를 filter매서드 전달인자로 전달.
console.log(output)//[2,4]

• map : 모든 요소들에게 동일한 행동(직접 함수로 작성하여 인자로 전달)을 준 값들을 반환.
  배열의 각 요소가 특정 논리(함수)에 의해 다른 요소로 지정(map)된다.
  기존 배열 수정하지 않음.

const double = function (val) {
  return val * 2;
};

let numarr = [1,2,3]
const output = numarrr.map(double);
console.log(output)// [2,4,6]

• reduce : 배열의 각 요소를 특정 방법(함수)에 따라 원하는 하나의 형태로 응축한다. 초기값은 누적의 기반이 되고, 초기값을 정하지 않으면 배열의 맨 처음 요소가 초기값이 됨. (reduce에서는 초기값을 설정하느냐 아니냐에 따라 값이 달라지므로 주의해야한다.)

function Names(result, obj){
  result = result + obj.name + ", ";
  return result;
}
//result가 누적값, obj가 현재값 

let data = [
  {name : 'nami', type: 'mermaid'},
  {name : 'lulu', type: 'yodel'},
  {name : 'KogMaw', type : 'undefined'}
  ]

data.reduce(Names,'');//'nami', 'lulu', 'KogMaw',

위와 같이 누적된 문자열들을 반환할 수도 있고,
아래의 예시와 같이 숫자 요소들을 누적해서 더한 값을 반환할 수도 있다.

const addAccCur = function (acc, cur) {
  return acc + cur;
};
const initialValue = 1;

let arr = [1, 2, 3, 4, 5, 6, 7];
let output = arr.reduce(addAccCur, initialValue);
console.log(output); // 29반환 

그외 고차 내장함수

• forEach : 주어진 함수를 배열 요소 각각에 대해 실행.

• find : 주어진 판별 함수를 만족하는 첫번째 요소의 '값'을 반환. (없으면 undefined)

• sort : 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환.
  파라미터로 정렬 순서를 정의하는 함수가 들어가게 되고, 해당 규칙에 따라 정렬된 배열을 리턴함. 파라미터를 입력하지 않으면 유니코드 순서에 따라 정렬됨.

• some : 배열 안의 어떤 요소라도 주어진 판별 함수를 통과하는지 테스트 함.
  (주어진 판별 함수를 통과하는 요소가 하나라도 있으면 true 반환. 빈 배열인 경우에는 false 반환.)

• every : 배열 안의 모든 요소가 주어진 판별 함수를 통과하는지 테스트 함.

오답노트

• 이번 유닛에서는 유독 return이 발을 잡는 느낌. return을 제대로 써주지 않으면 답이 나오지 않는 문제들이 많았음! (당연한 거지만...)

• arr.flat은 1차원 배열로 쉽게 바꿔주지만 느림. (시간 복잡도가 높음)

• shift()도 속도가 느린데, 맨 앞 요소를 빼게 되면 인덱스를 다시 정렬해줘야 하기 때문.