배열의 각 요소에 대해 주어진 함수(callback)을 실행하여 단일한 결과값을 만들어낸다.
배열의 총합, 최대 or 최소값, 평균, 또는 배열을 객체로 변환할 때 유용하다.
기본형
array.reduce((accumulator) => { return.. }, initialValue);
- 첫번째 매개변수: 배열의 각 요소에 대해 실행할 콜백함수
- accumulator (누적값)
- currentValue (현재 요소 값) : accumulator가 0이라면 1, 아닌 경우 0부터 시작
- currentIndex (현재 인덱스)
- array (배열 전체)
- 두번째 매개변수: initialValue (선택 사항): accumulator의 초기값. 생략하면 첫 번째 요소가 초기값으로 설정된다.
예제
numbers 배열에 있는 모든 요소의 합을 구하는 경우, 다양한 방식이 있다.
// 메소드 없이 for문으로 순회
const numbers = [1, 2, 3, 4]
let total = 0
for (let i = 0, i <= numbers.length, i++) {
total += numbers[i]
}// forEach 메소드 활용
const numbers = [1, 2, 3, 4]
let total = 0
numbers.forEach((number) => {
total = total + number
})
// reduce 사용한 경우
const numbers = [1, 2, 3, 4]
const total = numbers.reduce((accumulator, currentValue) => {
return accumulator + currentValue
}, 0) // 0은 accumulator의 초기값
최대값을 구해보자.
// 최대값 구하기
const numbers = [8, 10, 24, 7]
numbers.reduce((accumulator, currentValue) => {
if (accumulator < currentValue){
return currentValue // accumulator의 값을 currentValue로 업데이트
}
else {
return accumulator
}
}) //초기값을 지정하지 않았으므로 [0]번째부터 시작
이번에는 배열 내 객체 요소의 합을 구해보자.
const account = [
{name: "A",
cost: 100,
},
{name: "B",
cost: 600,
},
{name: "C",
cost: 20,
},
]
account.reduce((accumulator, elem) => {
return accumulator + account.cost
}, 0)
'개념 정리' 카테고리의 다른 글
| 새로운 리액트 프로젝트 생성하기 (0) | 2024.10.16 |
|---|---|
| Javascript Class를 활용해 모듈화 하기 / 브라우저 저장소 (0) | 2024.02.05 |
| HTML의 noreferrer, nopener, nofollow (0) | 2024.01.21 |
| Flex와 Grid (0) | 2024.01.21 |
| 반응형 작업과 mediaquery 최소화 (0) | 2024.01.21 |