자바스크립트 reduce()메서드

Array.prototype.reduce()

- reduce() 메서드는 배열의 각 요소에 대해 주어진 함수를 실행하고 하나의 결과값(Number)를 반환한다.

기본구문

.reduce(function(accumulator, currentValue, currentIndex, array) {
  return accumulator + currentValue;
});

• callback: 배열의 각 요소에대해 실행할 함수
• accmulator: 콜백의 반환값을 누적한다
• currentValue: 현재 처리할 요소
• currentIndex: 현재 처리할 요소의 인덱스 기본값:0 (생략가능)
• array: reduce()를 호출한 배열 (생략가능)
• intialValue: 첫번째 인수에 제공하는 값 초기값이 없다면 배열의 첫번째 요소를 자동으로 사용. (생략가능)

예제1

let sum = [1, 3, 5, 7].reduce(function (누적값, 현재더할요소) {
  return 누적값 + 현재더할요소;
}, 초기값(Number));

console.log(sum);

let sum = [1, 3, 5, 7].reduce(function (누적값, 현재더할요소) {
  return 누적값 + 현재더할요소;
}, 0);

console.log(sum); //16

intialvalue(초기값)을 20으로 설정하였을때는 20부터 배열을 차례대로 돌며 누적값을 계산한다.

let sum = [1, 3, 5, 7].reduce(function (누적값, 현재더할요소) {
  return 누적값 + 현재더할요소;
}, 20);

console.log(sum);

화살표 함수로도 작성 가능하다

let sum = [1, 3, 5, 7].reduce((누적값, 현재더할요소) => 누적값 + 현재더할요소);

console.log(sum); //16

intialvalue 20으로 설정

let sum = [1, 3, 5, 7].reduce(
  (누적값, 현재더할요소) => 누적값 + 현재더할요소,
  20
);

console.log(sum); //36

배열에서 필요한 값만 더하기

const children = [
  {
    name: "유리",
    age: 5,
    job: "유치원생",
  },
  {
    name: "짱구",
    age: 5,
    job: "짱구",
  },
  {
    name: "짱아",
    age: 3,
    job: "미취학 아동",
  },
  {
    name: "봉미선",
    age: 32,
    job: "주부",
  },
];

const ageSum = children.reduce(
  (누적나이, 현재나이) => 누적나이 + 현재나이.age,
  0
);

console.log(`나이 합  ${ageSum}`);  //나이 합  45

오브젝트의 배열 chlidren에서 age의 값만 더하여 출력하였다.

요약

• reduce()메서드는 주어진 배열에서 누적값을 하나의 값(number)로 출력해주는 메서드이다
• map()과 같이 활용하면 배열,객체의 필요한 값만 반환해 낼 수있다.