reduce 메서드

김정준·2022년 6월 5일
0

JS

목록 보기
9/13

1) reduce 메서드

   reduce메서드는 자신을 호출한 배열을 모든 요소를 순회하며 인수로 전달받은 콜백 함수를 반복 호출한다. 그리고 콜백 함수의 반환값을 다음 순회 시에 콜백 함수의 첫 번째 인수로 전달하면서 콜백 함수를 호출하여 하나의 결과값을 만들어 반환한다. 이때 원본 배열은 변경되지 않는다.
  reduce 메서드는 첫번째 인수로 콜백 함수, 두 번째 인수로 초기값을 전달받는다.
  reduce 메서드의 콜백함수에는 4개의 인수, 초기값 또는 콜백 함수의 이전 반환값, reduce 메서드를 호출한 배열의 요소값인덱스, reduce 메서드를 호출한 배열 자체즉, this가 전달된다.

// 1부터 4까지 누적을 구한다.
const sum = [1, 2, 3, 4].reduce((accumulator, currentValue, index, array) => accumulator + currentValue,0) // 0은 두번째 인수로 초기값

console.log(sum); // 10

ex1) 평균 구하기

const values = [1, 2, 3, 4, 5, 6];

const average = values.reduce((acc, cur, i, { length }) => {
  //마지막 순회가 아니면 누적값을 반환하고 마지막 순회면 누적값으로 평균을 구해 반환
  return i === length - 1 ? (acc + cur) / length : acc + cur;
},0);

console.log(average); // 3.5

ex2) 요소의 중복횟수 구하기

const fruits = ['banana', 'apple', 'orange', 'orange', 'apple'];

const count = fruits.reduce((acc,cur) => {
 
  // 첫 번째 순회 시 acc는 초기값인 {}이고 cur은 첫번째 요소인 'banana'다
  // 초기값으로 전달받은 빈 객체에 요소값인 cur을 프로퍼티 키로, 요소의 개수를 
  // 프로퍼티 값으로 할당한다.
  // 만약 프로퍼티 값이 undefined(처음 등장하는 요소)이면 프로퍼티 값을 1로 초기화한다.
  
  acc[cur] = (acc[cur] || 0) + 1; // undefined || 0 은 0
                                  // 1 || 0 은 1
  											
  return acc;
},{});

// 콜백 함수는 총 5번 호출되고 다음과 같이 결과값을 반환한다.
/*
{banana : 1} => {banana : 1, apple : 1} => {banana : 1, apple : 1, orange : 1} => {banana : 1, apple : 1, orange : 2} => {banana : 1, apple : 2, orange : 2}
*/

console.log(count); // {banana : 1 , apple : 2, orange : 2}

0개의 댓글