[array] reduce() 사용법 및 예제

arr.reduce(callback [,initialValue])

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

 

파라미터

1. callback function

• accumulator - accumulator는 callback 함수의 반환값을 누적
• currentValue - 배열의 현재 요소
• index(Optional) - 배열의 현재 요소의 인덱스
• array(Optional) - 호출한 배열

callback 함수의 반환 값은 accumulator에 할당되고 순회 중 계속 누적되어 최종적으로 하나의 값을 반환한다.

 

2. initialValue(Optional)

최초 callback 함수 실행 시 accumlator 인수에 제공되는 값, 초기값을 제공하지 않을 경우, 배열의 첫번째 요소를 사용하고, 빈 배열에서 초기값이 없을 경우 에러가 발생한다.

 

반환값

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

 

 

예제.

1. 배열의 모든 값 더하기

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

const sum = numbers.reduce((accumulator, currentNumber) => accumulator + currentNumber);
console.log(sum);

또는

// callback 함수 선언 후 이용
function sumReducer(accumulator, currentNumber) {
  return accumulator + currentNumber;
}
const sum = numbers.reduce(sumReducer);
console.log(sum);

둘다 반환 값은 동일하다.

 

 

2. 배열의 내부 객체에서 원하는 항복의 값만 더하기

const friends = [
  {
    name: 'Monica',
    age: 30,
    job: 'chef',
    married: true,
  },
  {
    name: 'Rachel',
    age: 30,
    job: 'fashion MD',
    married: false.
  },
  {
    name: 'phoebee',
    age: 30,
    job: 'masseuse',
    married: true,
  }
];

// 3명의 나이를 더하자
// 초기값 설정은 반드시 필요하다
const ageSum = friends.reduce((accumulator, currentObject) => { return accumulator + currentObject.age; }, 0);
console.log(`친구들 나이의 합은 ${ageSum}`);

 

 

작동 방식

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

const number = [1, 2, 3, 4, 5];
function reducer(accumulator, currentValue, currentIndex) {
  const result = accumulator + currentValue;
  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가 없을 경우, 배열의 두번째부터 계산이 시작되는데 배열이 비어 있으면 TypeError가 발생한다.

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

 

 

위의 작동방식을 근거로

2번의 예제 문제의 경우, initialValue가 없으면 첫번째 콜백에서 TypeError가 발생하게 된다.

const friends = [
  {
    name: 'Monica',
    age: 30,
    job: 'chef',
    married: true,
  },
  {
    name: 'Rachel',
    age: 30,
    job: 'fashion MD',
    married: false.
  },
  {
    name: 'phoebee',
    age: 30,
    job: 'masseuse',
    married: true,
  }
];

// 3명의 나이를 더하자
// 초기값 설정은 반드시 필요하다
const ageSum = friends.reduce((accumulator, currentObject) => { return accumulator + currentObject.age; });
console.log(`친구들 나이의 합은 ${ageSum}`);

//첫번째 콜백 실행
// accumulator = { name: 'Monica', age: 30, job:'chef', married: true }
// currentObject = { name: 'Rachel', age: 30, job: 'fashion MD', married: false}
// currentObject.age = 30
// accumulator + currentObject.age = TypeError