Reduce 메서드
Coddy JavaScript 여정의 논리 & 흐름 섹션에 포함된 레슨 — 65개 중 54번째.
reduce() 메서드는 배열의 각 요소에 대해 제공된 함수를 실행하여 배열을 단일 값으로 "축소(reduce)"할 수 있게 해줍니다. 이 단일 값은 숫자, 문자열, 객체 또는 심지어 다른 배열이 될 수도 있습니다.
리듀서의 구문은 다음과 같습니다:
array.reduce(function(accumulator, currentValue, currentIndex, array) {
// 업데이트된 누산기 값을 반환합니다
}, initialValue);주요 구성 요소:
- accumulator: 콜백의 반환 값을 누적합니다 (이를 현재까지의 합계라고 생각하세요)
- currentValue: 배열에서 처리 중인 현재 요소
- currentIndex: (선택 사항) 현재 요소의 인덱스
- array: (선택 사항) reduce()가 호출된 배열
- initialValue: (선택 사항) 콜백 함수의 첫 번째 호출 시 첫 번째 인자로 사용할 값
예를 들어 - 숫자들의 합계:
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // 15단계별 작동 방식:
const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, curr) => {
console.log(`Accumulator: ${acc}, Current Value: ${curr}`);
return acc + curr;
}, 0);
// Output:
// Accumulator: 0, Current Value: 1
// Accumulator: 1, Current Value: 2
// Accumulator: 3, Current Value: 3
// Accumulator: 6, Current Value: 4
// Final result: 10
챌린지
쉬움식료품 품목을 나타내는 객체 배열을 인자로 받는 calculateGroceryTotal이라는 이름의 함수를 작성하세요.
각 객체는 두 개의 속성을 가집니다:
name: 문자열 (품목의 이름)price: 숫자 (품목의 가격)
함수는 다음을 수행해야 합니다:
- 모든 품목의 총 비용을 계산합니다.
- 할인 적용: - 총액이 100을 초과하면 10% 할인을 적용합니다.
- 총액이 50을 초과하고 100 이하인 경우 5% 할인을 적용합니다.
- 총액이 50 이하인 경우 할인이 없습니다.
다음 내용을 포함하는 객체를 반환하세요:
originalTotal: 할인 전 합계discount: 절약된 금액finalTotal: 할인 후 최종 금액
치트 시트
reduce() 메서드는 각 요소에 대해 함수를 실행하여 배열을 단일 값으로 줄입니다:
array.reduce(function(accumulator, currentValue, currentIndex, array) {
// 업데이트된 accumulator 값을 반환합니다
}, initialValue);주요 구성 요소:
- accumulator: 콜백의 반환 값을 누적합니다 (누계)
- currentValue: 현재 처리 중인 요소
- currentIndex: (선택 사항) 현재 요소의 인덱스
- array: (선택 사항) reduce()가 호출된 배열
- initialValue: (선택 사항) accumulator의 시작 값
예제 - 숫자 합계:
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // 15단계별 실행:
const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, curr) => {
console.log(`Accumulator: ${acc}, Current Value: ${curr}`);
return acc + curr;
}, 0);
// 출력:
// Accumulator: 0, Current Value: 1
// Accumulator: 1, Current Value: 2
// Accumulator: 3, Current Value: 3
// Accumulator: 6, Current Value: 4
// 최종 결과: 10직접 해보기
function calculateGroceryTotal(items) {
// 여기에 코드를 작성하세요
return {
originalTotal: Math.round(originalTotal * 100) / 100, // 소수점 둘째 자리까지 반올림
discount: Math.round(discount * 100) / 100,
finalTotal: Math.round(finalTotal * 100) / 100
};
}
실력 점검이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.
