티스토리 뷰
JavaScript의 reduce 함수는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환한다. 이 함수는 배열을 순회하면서 각 요소에 대해 실행되는데, 이 때 누적된 결과값과 현재 요소를 함수의 인자로 받아 처리한다.
reduce 함수는 배열의 요소를 하나씩 처리하면서 최종적으로 단일 값(예를 들어, 합계, 평균, 객체 등)을 생성하는 데 사용된다.
바로 한번 알아보자.
우선, reduce 함수의 기본 구조는 다음과 같다.
array.reduce(function(accumulator, currentValue, currentIndex, array) {
// 로직 실행
}, initialValue);
여기서 accumulator는 누적값을 의미하며, currentValue는 현재 처리하고 있는 배열의 요소, currentIndex는 현재 요소의 인덱스, array는 원본 배열을 의미한다.
initialValue는 accumulator의 초기값을 설정하는 데 사용되며, 이 값은 선택적으로 설정할 수 있다.
- 예제 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
최근에 올라온 글
최근에 달린 댓글
TAG
- 인천 구월동 맛집
- Promise
- redux
- AsyncStorage
- 정보보안기사 #실기 #정리
- 이탈리안 레스토랑
- javascript
- 맛집
- await
- redux-thunk
- react
- 파니노구스토
- 인천 구월동 이탈리안 맛집
- react-native
- Async
- Total
- Today
- Yesterday