[JS] 내장 고차함수 이해하기 (Feat. map, filter, reduce)

자바스크립트(JS)에는 기본적으로 내장된 고차 함수(Built-in higher order functions)가 여러가지 있다.

그중에서 배열 메소드들 중 일부가 대표적인 고차 함수에 해당한다.

 

1. map

• 배열의 각 요소가
• 특정 논리(함수)에 의해
• 다른 요소로 지정(map) 된다.

map은 아래와 같이 하나의 데이터를 다른 데이터로 맵핑(mapping)할 때 사용된다.

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); // 각 책의 부제 모음

 

2. filter

• 배열의 각 요소가
• 특정 논리(함수)에 따르면, 사실(boolean 값)일 때
• 따로 분류(filter) 한다.

filter은 아래와 같이 조건에 맞는 데이터만 분류(filtering) 할 때 사용한다.

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년인 책의 모음

 

3. reduce

• 배열의 각 요소를
• 특정 방법(함수)에 따라
• 원하는 하나의 형태로
• 응축(reduction) 한다.

reduce는 아래와 같이 여러 데이터를 하나의 데이터로 응축(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 initilaValue = 0; // 숫자의 형태로 평점에 누적한다.
const cartoonsAvgScore = cartoons.reduce(scoreReducer, initialValue) / cartoons.length;
// 모든 책의 평점을 누적한 평균을 구한다.

 

reduce는 활용 방법이 다양한 데 배열을 객체의 형태로 만들 때도 유용하다.

• 배열의 각 요소: 유저 정보
• 응축하는 방법(함수): 유저 한 명의 이름 중 첫 글자를 주소록 객체 속성의 키(key)로, 유저의 정보를 주소록 객체 속성의 값(value)으로 추가한다.
• 원하는 형태: 주소록 객체에 누적한다.
• 응축된 결과: 모든 유저의 정보가 알파벳으로 구분된 주소록

function makeAddressBook(addressBook, user) {
  let firstLetter = user.name[0];
  
  if(firstLetter in addressBook) {
    addressBook[firstLetter].push(user);
  } else {
   addressBook[firstLetter] = [];
   addressBook[firstLetter].push(user);
  }
  
  return addressBook;
}

let users = [
  { name: 'Tim', age: 40 },
  { name: 'Satya', age: 30 },
  { name: 'Sundar', age: 50 }
];

users.reduce(makeAddressBook, {});

// 최종 리턴 값
{
  T: [
  	{ name: 'Tim', age: 40 }
  ],
  S: [
    { name: 'Satya', age: 30 },
    { name: 'Sundar', age: 50 }
  ]
}