ES6+ | reduce 배열 메서드

Reduce

배열 메서드 중 하나로 함수형 프로그래밍의 기초 중 하나

• 배열의 각 요소에 콜백 함수를 실행하고, 해당 반환값을 누적값에 합친 뒤 최종 누적값을 반환
• 잘 활용하면 거의 모든 코드를 한 줄의 코드로 바꿀 수 있는 강력한 메서드
• 두 개 이상의 배열 메서드가 필요할 때 reduce 메서드만 사용해서 해결가능한 경우가 많음
• 복잡한 문제를 깔끔하게 해결할 수 있는 디자인 패턴의 기초가 됨

---

구조

ARRAY.reduce((total, value, index, array) => {
    // javascript code
}, initialValue)

• total: 매 리턴 값을 합친 누적값
• value: 배열의 각 요소 값
• index: 배열 인덱스
• array: 전체 배열을 뜻하는 값
• initialValue: 누적을 시작할 초깃값

---

예제_배열 요소 합 구하기

const numbers = [10, 20, 30, 40];

const sum = numbers.reduce((total, number) => (total += number), 0);

console.log(sum); // 100

---

예제_배열 요소 평균 구하기

const numbers = [10, 20, 30, 40];

const average = numbers.reduce((total, value, index, array) => {
  total += value;
  if (index === array.length - 1) {
    return total / array.length;
  } else {
    return total;
  }
});

console.log(average); // 25

---

예제_배열 필터링 하기

배열 요소의 값이 0보다 큰 요소만 모은 새로운 배열 반환

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

const result = numbers.reduce((total, value) => {
  if (value > 0) total.push(value);
  return total;
}, []);

console.log(result); // [1, 2, 3, 4, 5, 6]

---

예제_파일 타입 중복 횟수 구하기

"use strict";

const fileTypes = ["html", "pdf", "html", "gif", "gif", "gif"];

const result = fileTypes.reduce((total, type) => {
  // 속성의 값이 undefined인 경우 0에 1을 더함
  total[type] = (total[type] || 0) + 1;
  return total;
}, {});

console.log(result); // { html: 2, pdf: 1, gif: 3 }

---

reduce는 다른 배열 메서드들에 비해 난도가 높은 편이라고 생각해서 따로 정리했습니다.

익히기 어려운 만큼 익혀두면 가성비를 보장하는 유용한 메서드라고 할 수 있습니다.