티스토리 뷰

WEB/자바스크립트

[JS] Array.reduce

춘햄 2024. 2. 9. 12:19

 JavaScript의 reduce 함수는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환한다. 이 함수는 배열을 순회하면서 각 요소에 대해 실행되는데, 이 때 누적된 결과값과 현재 요소를 함수의 인자로 받아 처리한다.

 

reduce 함수는 배열의 요소를 하나씩 처리하면서 최종적으로 단일 값(예를 들어, 합계, 평균, 객체 등)을 생성하는 데 사용된다.

 

바로 한번 알아보자.


우선, reduce 함수의 기본 구조는 다음과 같다.

array.reduce(function(accumulator, currentValue, currentIndex, array) {
  // 로직 실행
}, initialValue);

 

여기서 accumulator는 누적값을 의미하며, currentValue는 현재 처리하고 있는 배열의 요소, currentIndex는 현재 요소의 인덱스, array는 원본 배열을 의미한다.

 

initialValueaccumulator의 초기값을 설정하는 데 사용되며, 이 값은 선택적으로 설정할 수 있다.

- 예제 1: 합계 구하기

배열 내 모든 수의 합계를 구하는 예제이다.

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue;
}, 0); // 초기값을 0으로 설정
console.log(sum); // 출력: 15

- 예제 2: 객체 내 속성값의 합계 구하기

객체가 담긴 배열에서 특정 속성의 값을 모두 합하는 예제이다.

const items = [
  { name: '사과', quantity: 2 },
  { name: '바나나', quantity: 3 },
  { name: '오렌지', quantity: 1 }
];

const totalQuantity = items.reduce(function(accumulator, item) {
  return accumulator + item.quantity;
}, 0); // 초기값을 0으로 설정
console.log(totalQuantity); // 출력: 6

 

이 예제에서는 items 배열의 각 객체에서 quantity 속성값을 추출하여 이를 누적하고 있다.

 

초기값을 0으로 설정하여 누적 과정을 시작하며, 최종적으로 모든 quantity의 합인 6을 반환한다.


reduce 함수는 이와 같이 다양한 형태의 데이터를 처리하고, 배열을 기반으로 한 계산이나 객체 생성 등 복잡한 데이터 변환 작업을 수행하는 데 매우 유용하다.

'WEB > 자바스크립트' 카테고리의 다른 글

[TypeScript] TypeScript - Basic 문법  (0) 2024.02.16
[JS] async와 await  (0) 2024.01.08
[JS] Promise  (0) 2024.01.08
[js] 비구조화 할당  (1) 2024.01.06
[Javascript] onkeydown 속성을 이용한 예제  (0) 2021.05.14
Comments