내장고차 함수 Array.reduce()에 대해 알아보자

내장고차 함수이면서 배열의 메서드로 사용하는 reduce

이해가 되다 가도 하다보면 헷갈리는 reduce..

찬찬히 한번 보자

reduce의 과정

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

reduce의 특징

• reduce(acc(누적값), cur(현재값or초기값))
• 기존 배열을 수정하지 않는다.
• 배열을 하나의 값으로 만든다.
• 초기값을 정할 수 있다. 초기값이 없다면, 배열의 첫번째 요소가 초기값이 된다.
• 초기값을 정하면 배열의 첫번째 요소가 현재값이 된다.
• 값들을 누적해서 더해준다.
• 문자열이나 숫자를 합치거나 뺄 수 있다. 작은수, 큰수를 비교 할 수도 있다.
• acc에는 함수가 들어갈 수 있다.

reduce는 이렇게 여러 데이터를, 하나의 데이터로 응축(reduce)할 때 사용한다.

 

 

사용 방법

arr.reduce(callback[, initialValue])

• callback : 배열의 각 요소에 대해 실행할 함수. 다음 네 가지 인수를 가짐
  • accumulator : 누산기. 콜백의 반환값을 누적. 콜백의 이전 반환값 또는, 콜백의 첫 번째 호출이면서 initialValue를 제공한 경우에는 initialValue의 값임
  • currentValue : 처리할 현재 요소
  • currentIndex (Optional) : 처리할 현재 요소의 인덱스. initialValue를 제공한 경우 0, 아니면 1부터 시작
  • array (Optional) : reduce()를 호출한 배열
• initialValue (Optional) : callback의 최초 호출에서 첫 번째 인수에 제공하는 값. 초기값을 제공하지 않으면 배열의 첫 번째 요소를 사용. 빈 배열에서 초기값 없이 reduce()를 호출하면 오류 발생

 

실제 코드 1

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;
};
// sum: acc, cartoon: cur
// initialValue 변수로 초기값 설정해주어서 누적값은 초깃값인 0이고, 현재값은 배열의 0번째 인덱스 부터...

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

 

실제 코드 2

function makeAddressBook(addressBook, user) {
  let firstLetter = user.name[0];

  if(firstLetter in addressBook) {
    addressBook[firstLetter].push(user);
  } else {
    addressBook[firstLetter] = [];
    addressBook[firstLetter].push(user);
    // addressBook[T].push(user) => { T: [{name: 'Tim', age: 40}], ..}
  }

  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 }
  ]
}

 

 

참고 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce