JS - 고차함수(map, filter, reduce)

고차함수 - map

map은 배열의 각 요소가 특정 논리(함수)에 의해 다른 요소로 지정(map) 되는 함수를 말한다.

let arr = [1, 2, 3];
let result = arr.map( function(ele) {
  return ele * 2
});

result; // [2, 4, 6]

map 활용 예시

만화책 원피스 27권의 정보가 배열에 담겨있다. 각 책의 부제(subtilte)만 담은 배열을 만들어 보자

배열의 각 요소 - 각 만화책 1~27권의 정보

특정 논리(함수) - 책 한권의 부제 찾기

다른 요소의 지정 - 각 만화책 1~27권의 부제

const cartoons = [
  { id : 1,
   	bookType : 'cartoon',
   	tilte : '원피스',
    subtitle : '대해적시대의 시작',
    createdAt : '2002-03-03',
    artist : '오다'
  },
  { id : 2,
    // ..이하 생략
  },
  // ...이하 생략
]; // 만화책 모음
const findSubtitle = function (cartoon) {
  return cartoon.subtitle;
}; // 만화책 한 권의 제목을 리턴하는 로직(함수)
const subtitle = cartoons.map(findSubtitle); // 각 책의 부제모음

고차함수 - filter

filter는 배열의 각 요소가 특정 논리(함수)에 따라 사실일 때, 따로 분류(filter)하는 함수를 말한다.

let arr = [1, 2, 3];
let result = arr.filter( function(ele) {
  return ele % 2 !== 0
});

result; // [1, 3]

filter 활용 예시

만화책 원피스 27권의 정보가 배열에 담겨있다. 출판년도가 2005년인 단행본만 담은 배열을 만들어보자

배열의 각 요소 - 각 원피스 1~27권의 정보

특정 논리(함수) - 책 출판년도 2005년

따로 분류 - 출판년도가 2005년인 책의 정보

const cartoons = [
  { id : 1,
   	bookType : 'cartoon',
   	tilte : '원피스',
    subtitle : '대해적시대의 시작',
    createdAt : '2002-03-03',
    artist : '오다'
  },
  { id : 2,
    // ..이하 생략
  },
  // ...이하 생략
]; // 만화책 모음
const iscreatedAt2005 = function (cartoon) {
  const fullYear = new Date(cartoon.createdAt).getFullYear()
  return fullYear === 2005;
}; // 단행본 한 권의 출판년도가 2005년인지 확인하는 로직
const filteredCartoons = cartoons.filter(iscratedAt2005);
// 출판년도가 2005년인 책의 모음

고차함수 - reduce

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

let arr = [1, 2, 3];

let result = arr.reduce(
  function(acc, cur, idx) {
    return acc + cur;
});

result; // 6

reduce 활용 예시(1)

만화책 원피스 27권의 정보가 배열에 담겨있다. 각 단행본의 평점의 평균을 리턴해보자

배열의 각 요소 - 각 원피스 1~27권의 정보

응축하는 방법(함수) - 각 단행본의 평점을 누적값에 더한다

원하는 형태 - 숫자로 누적한다

응축 결과 - 각 단행본 평점의 합을 단행본의 길이로 나눈 평점의 평균

const cartoons = [
  { id : 1,
   	bookType : 'cartoon',
   	tilte : '원피스',
    subtitle : '대해적시대의 시작',
    createdAt : '2002-03-03',
    artist : '오다'
    averageScore : 9.5,
  },
  { id : 2,
    // ..이하 생략
  },
  // ...이하 생략
]; // 단행본의 모음
const scoreReducer = function (sum, cartoon) {
	return sum + cartoon.averageScore;
}; // 단행본 한 권의 평점을 누적값에 더한다.

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

reduce 활용 예시(2)

배열을 문자열로 반환해보자

배열의 각 요소 - 유저 정보

응축하는 방법(함수) - 하나의 유저의 이름과 쉼표를 이어 붙인다(concat)

원하는 형태 - 문자열로 누적한다

응축 결과 - 쉼표로 구분되는 모든 유저의 이름

function joinName(resultStr, user) {
	resultStr = resultStr + user.name + ', ';
	return resultStr;
}

let users = [
  { name = 'Kim', age : 30},
  { name = 'Dim', age : 40},
  { name = 'Yeong', age : 50}
];

users.reduce(joinName, '');
// 콜백함수 joinName은 users배열 안에 있는 요소의 이름을 하나로 응축한다.