JavaScript - 배열 reduce() 사용법 및 예제

구문

자바스크립트의 reduce함수는 배열의 각 요소를 순회하며 callback함수의 실행 값을 누적하여 하나의 결과값을 반환 합니다.

arr.reduce(callback[, initialValue])

파라미터

1. callback function
   
   • 다음 4가지의 인수를 가집니다.
     1. accumulator - accumulator는 callback함수의 반환값을 누적합니다.
     2. currentValue - 배열의 현재 요소
     3. index(Optional) - 배열의 현재 요소의 인덱스
     4. array(Optional) - 호출한 배열
   • callback함수의 반환 값은 accumulator에 할당되고 순회중 계속 누적되어 최종적으로 하나의 값을 반환합니다.
2. initialValue(Optional)
   • 최초 callback함수 실행 시 accumulator 인수에 제공되는 값, 초기값을 제공하지 않을경우 배열의 첫 번째 요소를 사용하고, 빈 배열에서 초기값이 없을 경우 에러가 발생합니다.

 

반환 값

배열을 순서대로 불러 각 요소에 대해 callback 함수을 실행한 결과를 누적한 값

 

예제

1. 배열의 모든 값 (1부터 10까지) 더하기

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const sum1 = numbers.reduce((accumulator, currentNumber) => accumulator + currentNumber);

console.log('sum1 =', sum1);

또는

// callback함수 선언 후 이용
function sumReducer(accumulator, currentNumber) {
  return accumulator + currentNumber;
}

const sum2 = numbers.reduce(sumReducer);

console.log('sum2 =', sum2);

 

Result

 

sum1 = 55
sum2 = 55

 

2. 오브젝트 배열에서 원하는 항목의 값만 더하기

// 실제직업과 다릅니다.
const friends = [
  {
    name: '양주진',
    age: 32,
    job: '코인러',
    married: false,
  },
  {
    name: '오영제',
    age: 32,
    job: '랩퍼',
    married: false,
  },
  {
    name: '서준형',
    age: 32,
    job: '2년차 유부남',
    married: true,
  }
];

// 3명의 나이를 더해봅니다.
// 여기서 초기값 설정이 반드시 필요합니다.
const ageSum = friends.reduce((accumulator, currentObject) => {
  return accumulator + currentObject.age;
}, 0);

console.log('친구들 나이 합 ', ageSum);

 

Result

 

96

 

작동 방식

예제2에서 initialValue를 반드시 넣어 줘야 하는 이유는 reduce의 작동 방식과 관련이 있습니다. (중요!)

 

initialValue를 설정했느냐 안했느냐에 따라 콜백의 최초 호출 시의 accumulator와 currentValue가 달라집니다.

 

 

- initialValue를 설정 한 경우

callback	accumulator	currentValue	currentIndex
1번째 호출	initialValue	배열의 첫번째 요소	0

 

- initialValue를 설정하지 않은 경우

callback	accumulator	currentValue	currentIndex
1번째 호출	배열의 첫번째 요소	배열의 두번째 요소	1

 

예를 들어

const number = [1, 2, 3, 4, 5];

function reducer(accumulator, currentValue, currentIndex) {
  const result = accumulator + currentValue;
  console.log('accumulator = ', accumulator, ', currentValue = ', currentValue, ', currentIndex = ', currentIndex, ', result = ', result);
  return result;
}

// initialValue가 없을 경우
number.reduce(reducer);

// 동작
// accumulator = 1, currentValue = 2, currentIndex = 1, result = 3
// accumulator = 3, currentValue = 3, currentIndex = 2, result = 6
// accumulator = 6, currentValue = 4, currentIndex = 3, result = 10
// accumulator = 10, currentValue = 5, currentIndex = 4, result = 15

// initialValue가 있을 경우
number.reduce(reducer, 0);

// 동작
// accumulator = 0, currentValue = 1, currentIndex = 0, result = 1
// accumulator = 1, currentValue = 2, currentIndex = 1, result = 3
// accumulator = 3, currentValue = 3, currentIndex = 2, result = 6
// accumulator = 6, currentValue = 4, currentIndex = 3, result = 10
// accumulator = 10, currentValue = 5, currentIndex = 4, result = 15

 

initialValue가 없으면 배열의 2번째부터 계산이 시작되는데 배열이 비어있으면 당연히 TypeError가 발생합니다.

 

배열의 요소가 하나 뿐이면서 initialValue가 없는 경우, 또는 initialValue는 주어졌으나 배열이 비어 있는 경우엔 계산할 필요가 없기 때문에 그 값을 callback 호출 없이 그대로 반환합니다.

 

위 작동방식을 근거로

예제2번의 경우 initialValue가 없을 경우 첫 번째 콜백에서 TypeError가 발생하게됩니다.

const friends = [
  {
    name: '양주진',
    age: 32,
    job: '코인러',
    married: false,
  },
  {
    name: '오영제',
    age: 32,
    job: '랩퍼',
    married: false,
  },
  {
    name: '서준형',
    age: 32,
    job: '2년차 유부남',
    married: true,
  }
];

// initialValue 설정X
const ageSum = friends.reduce((accumulator, currentObject) => {
  return accumulator + currentObject.age;
});

// 첫번째 콜백 실행
// accumulator = { name: '양주진', age: 32, job: '코인러', married: false }
// currentObject = { name: '오영제', age: 32, job: '랩퍼', married: false }
// currentObject.age = 32
// accumulator + currentObject.age = TypeError