TIL 18일차

시작하며

오늘은 javaScript의 고차함수에 대해서 학습하였다. 코딩테스트를 하면서 알게 되었던 함수들을 정확한 개념을 이해할 수 있어서 도움이 되었다. 이전에는 사용법만 알고 사용했다면 오늘 배운 내용을 통해 작동원리나 다른 활용법을 알 수 있었다.

javaScipt

고차 함수
고차함수란 다른 함수를 인자로 받거나, 함수를 리턴하거나 혹은 두가지를 모두 포함하는 함수를 말한다. 이때 다른 함수의 인자로 전달되는 함수를 콜백 함수(callback function)라고 하며, 함수를 리턴하는 함수는 커리함수라고도 한다.

지난번에 학습했던 클로저와 마찬가지로 직접 고차함수를 만들 수도 있지만 javaScript에 내장된 고차함수가 있으며, 이를 활용하면 복잡한 반복문을 간단한 코드로 작성할 수 있다.


map

const cartoons = [
  {
    id: 1,
    bookType: 'cartoon',
    title: '식객',
    subtitle: '어머니의 쌀',
    createdAt: '2003-09-09',
    genre: '요리',
    artist: '허영만',
    averageScore: 9.66,
  },
  {
    id: 2,
    // .. 이하 생략
  },
  // ... 이하 생략
]; // 만화책의 모음
const findSubtitle = function (cartoon) {
  return cartoon.subtitle;
}; // 만화책 한 권의 제목을 리턴하는 로직(함수)
const subtitles = cartoons.map(findSubtitle); // 각 책의 부제 모음

map을 사용해서 cartoons에 있는 요소를 findSubtitle의 parameter로 할당해서 리턴하는 값을 새로운 배열로 생성할 수 있다. 각 요소를 동일한 함수를 반복하여 한 배열로 출력하기 위해 반복문을 사용할 필요없이 간단하게 코드를 작성할 수 있다.

const subtitles = cartoons.map((el) => el.subtitle); // 각 책의 부제 모음

별도로 함수를 선언할 필요없이 함수를 map 내부에 선언할 수 있으며 return을 생략할 수 있는 화살표 함수를 사용하면 더 간단하게 작성할 수 있다.


filter

const cartoons = [
  {
    id: 1,
    bookType: 'cartoon',
    title: '식객',
    subtitle: '어머니의 쌀',
    createdAt: '2003-09-09',
    genre: '요리',
    artist: '허영만',
    averageScore: 9.66,
  },
  {
    id: 2,
    // .. 이하 생략
  },
  // ... 이하 생략
]; // 단행본의 모음
const isCreatedAt2003 = function (cartoon) {
  const fullYear = new Date(cartoon.createdAt).getFullYear()
  return fullYear === 2003;
}; // 단행본 한 권의 출판판년도가 2003인지 확인하는 함수
const filteredCartoons = cartoons.filter(isCreatedAt2003); // 출판년도가 2003년인 책의 모음

filter는 출력 값이 true인 경우 해당 요소를 새로운 배열에 추가하고 false일 경우 제외하여 true인 경우의 요소만 넣은 배열을 추가할 수 있다. filter가 없다면 반복문과 if를 사용해야 하기 때문에 코드가 길어지게 된다.


reduce

const cartoons = [
  {
    id: 1,
    bookType: 'cartoon',
    title: '식객',
    subtitle: '어머니의 쌀',
    createdAt: '2003-09-09',
    genre: '요리',
    artist: '허영만',
    averageScore: 9.66,
  },
  {
    id: 2,
    // .. 이하 생략
  },
  // ... 이하 생략
]; // 단행본의 모음
const scoreReducer = function (sum, cartoon) {
  return sum + cartoon.averageScore;
}; // 단행본 한 권의 평점을 누적값에 더한다.
let initialValue = 0 // 숫자의 형태로 평점을 누적한다.
const cartoonsAvgScore = cartoons.reduce(scoreReducer, initialValue) / cartoons.length;
// 모든 책의 평점을 누적한 평균을 구한다.

reduce는 요소를 누적하여 함수를 실행할 수 있다. 각 요소의 합계를 구하는데도 사용될 수 있을 뿐만아니라 출력된 값이 그 다음 요소의 인자로 사용되기 때문에 모든 요소를 비교해야하는 최댓값, 최솟값 등 다양한 값을 구하는데 사용이 가능하다.

마치며

고차함수를 배우고 코플릿 문제를 풀어보면서 그동안 반복문, if문 을 사용했을 때와 비교해서 코드 길이가 현저하게 줄어드는 것을 확인할 수 있었다. 정확한 개념과 원리를 알고 나니 내장 고차함수를 사용하는 것이 오류를 줄일 수 있고 직관적으로 코드를 읽을 수 있다는 것을 깨달았다. 다른 고차함수들도 더 공부해서 코딩테스트를 할때 활용하도록 해야겠다.