[JavaScript] reduce() 함수 정리

자바스크립트 배열 메서드 reduce()

---

reduce() 함수는 배열의 모든 요소에 콜백 함수를 적용하여 하나의 결과값을 생성하는 함수이다.

기본 문법

---

어떤 배열 arr이 있다고 할 때, reduce() 메서드를 호출하면 arr 배열을 상대로 각 인자로 넘어온 콜백함수를 실행해서 누적된 하나의 결과값을 반환한다.

arr.reduce(<callback>, <initialValue>);

이 때, callback 함수에는 총 4개의 인자를 가지는데, accmulator, currentValue는 필수값이다.

• accumulator: 누산기라고 함. 이전 요소를 상대로 콜백 함수를 실행한 결과임.
• currentValue: 처리할 현재 요소
• currentIndex: 처리할 현재 요소의 인덱스, initalValue를 제공한 경우 0, 아니면 1부터 시작
• array: reduece()를 호출한 배열

initialValue는 최초의 호출에서 첫 번째 인수에 제공하는 값으로, 초기값을 제공하지 않으면 배열의 첫 번째 요소를 사용한다.

설명

---

reduce()는 빈 요소를 제외하고 배열 내에 존재하는 각 요소에 대해 callback 함수를 한 번씩 실행한다.

예시

---

1. 배열의 모든 요소 더하기

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

const sum = (total, number) => {
	return total + number;
}

const result = numbers.reduce(sum);
console.log(result); // 출력: 15

2. 배열의 모든 요소 곱하기

const numbers = [2, 3, 4, 5];

const sum = (total, number) => {
	return total * number;
}

const result = numbers.reduce(sum, 1);
console.log(result); // 출력: 120

3. 배열의 최솟값 찾기

const numbers = [5, 3, 9, 2, 7];

const min = (min, item) => {
    return (item < min) ? item : min;
}

const result = numbers.reduce(min, numbers[0]);
console.log(result); // 출력: 2

4. 배열의 최댓값 찾기

const numbers = [5, 3, 9, 2, 7];

const max = (max, item) => {
    return (item > max) ? item : max;
}

const result = numbers.reduce(max, numbers[0]);
console.log(result); // 출력: 9

5. 배열 반환하기

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

const square = (accumulator, currentValue) => {
    // 현재 요소의 제곱 값을 계산하고 배열에 추가
    accumulator.push(currentValue * currentValue);
    return accumulator; // 누적된 배열을 반환
}

const squaredArray = numbers.reduce(square, []);

console.log(squaredArray); // 출력: [1, 4, 9, 16, 25]