내장 고차 함수(filter, map, reduce)알아보기

자바스크립트에는 기본적으로 내장 된 고차함수가 여러가지 있다.
이 내장 고차 함수들을 사용하는 이유는 코드의 추상화를 통해 생산성을 비약적으로 높이는데에 있다.
그럼 대표적으로 가장 많이 쓰이는 3가지 내장 고차 함수 filter, map, reduce에 대해서 살펴보자.

filter - 분류하기(filtering)

arr.filter( ( element, index, array )=>{ } )

filter는 배열의 각 요소가 특정 조건에 따라 true인 요소들만 따로 분류한다.

const data = [
  {
    id: 1,
    bookType: 'cartoon',
    title: '식객',
    subtitle: '어머니의 쌀',
    createdAt: '2003-09-09',
    genre: '요리',
    artist: '허영만',
    averageScore: 9.66,
  },
  {
    id: 2,
    // .. 이하 생략
  },
  // ... 이하 생략
]; 

// 단행본 한 권의 출판 연도가 2003인지 확인하는 함수
const isCreatedAt2003 = function (cartoon) {
  const fullYear = new Date(cartoon.createdAt).getFullYear()	
  return fullYear === 2003;
}; 

// 출판 연도가 2003년인 책의 모음
const filteredCartoons = data.filter(isCreatedAt2003); 

cartoons.filter의 파라미터로 inCreatedAt2003이라는 함수가 들어오면,
inCreatedAt2003의 파라미터인 cartoon은 data의 요소들이 된다.

map - 매핑하기(mapping)

arr.map( ( element, index, array )=>{ } )

// 만화책 모음
const data = [
  {
    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 = data.map(findSubtitle); // ['어머니의 쌀', ...]

findSubtitle 함수는 data의 subtitle만 리턴하는 함수이기 때문에,
이 함수가 map으로 실행되어 data의 subtitle만 들어있는 subtitles이라는 새로운 배열을 생성하게 된다.

reduce - 응축하기(reduce)

arr.reduce( ( acc, cur, index )=>{ } )

여기서 acc는 누적 값, cur는 현재 값를 말한다.

// 단행본 모음
const data = [
  {
    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;
}; 

// 초기값에 0을 주고, 숫자의 형태로 평점을 누적한다.
let initialValue = 0 
// 모든 책의 평점을 누적한 평균을 구한다.
const cartoonsAvgScore = data.reduce(scoreReducer, initialValue) / cartoons.length;

reduce( 콜백 함수 또는 함수 등등 , 초기 값 ) <--- 마지막에 쉼표 후 값을 입력해주면 초기 값을 지정해 줄 수 있다. 여기에는 숫자 뿐만 아니라 다양한 속성의 요소가 올 수 있다.

reduce의 초기 값을 어떻게 설정 해주냐에 따라 결과 값의 속성을 완전히 바꿀 수 있다.

const numbers = ["24", "35", "46"];

const total = numbers.reduce((acc, cur) => {
  return acc + parseInt(cur);
}, 0);

console.log(total); // 105

이렇게 초기 값을 0으로 설정한다면 numbers의 요소들이 문자열 형태인 숫자들이라도
자동으로 숫자형으로 계산이 되어 올바른 값을 반환한다.

만약 초기 값 0을 지운다면 어떻게 될까?

const numbers = ["24", "35", "46"];

const total = numbers.reduce((acc, cur) => {
  return acc + parseInt(cur);
});

console.log(total); // ""243546"

초기 값을 지정하지 않는다면 배열의 첫번째 요소가 자동으로 초기 값이 되기 때문에,
문자형으로 계산되어 "243546" 이 되는 것을 확인 할 수 있다.