[JavaScript] 자바스크립트 reduce 함수 사용법과 예시

자바스크립트의 reduce 함수는 배열의 요소를 하나로 줄이는(reduce) 작업을 수행하는 함수이다. reduce 함수로 배열의 각 요소를 순회하면서 누적된 값을 계산하고 최종 결과를 반환할 수 있다.

---

기본 문법

reduce 함수는 다음과 같은 형태를 가지고 있다.

array.reduce(callback[, initialValue])

• array : recude를 적용할 배열
• callback : 배열의 각 요소에 대해 실행할 콜백 함수. 콜백 함수는 다음 매개변수를 가진다.
  • accumulator : 콜백 함수의 반환 값 또는 이전 순회에서의 최종 결과값. 초기 값(initialValue)이 제공된 경우 첫 번째 순회에서는  initialValue로 설정된다.
  • currentValue : 현재 순회 중인 배열의 요소
  • currentIndex (옵션) : 현재 순회 중인 배열의 요소 인덱트
  • array (옵션) : reduce 함수가 호출된 배열
• initialValue (옵션) : 콜백 함수의 첫 번째 순회에서 accumulator로 사용될 초기 값. 초기 값이 제공되지 않으면 배열의 첫 번째 요소가 초기 값이 된다.

 

reduce 함수는 배열을 순회하면서 각 요소에 대해 콜백 함수를 실행시키고, 콜백 함수의 반환 값을 accumulator에 계속해서 누적시킨다. 그리고 순회가 완료되면 accumulator의 최종 값을 반환한다.

 

---

함수 동작 과정

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);

console.log(sum); // 출력 결과: 15

1. reduce() 함수가 호출되면 첫 번째 순회 단계에서 accumulator 값은 initialValue로 설정되거나 배열의 첫 번째 요소로 설정된다. 위 코드에서는 초기 값이 0이 주어졌으므로 처음 누적된 accumulator의 값은 0부터 시작한다.
2. reduce() 함수는 배열의 두 번째 요소부터 마지막 요소까지 순회하며, 각 요소에 대해 콜백 함수를 실행한다.
3. 콜백 함수는 현재 요소의 값을 가지고 필요한 연산을 수행한 후, 그 결과를 accumulator에 할당한다.
4. 다음 순회 단계에서 accumulator 값은 이전 단계에서 반환된 값으로 설정되고, 다음 요소에 대해 콜백 함수를 실행한다.
5. 배열의 마지막 요소까지 순회가 완료되면, reduce() 함수는 최종 accumulator 값을 반환한다.

---

예시 코드

1. 배열의 합 구하기

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

const sum = numbers.reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
}, 0);

console.log(sum) // 출력 결과 : 15

위 코드에서 numbers 배열의 모든 요소를 합산하여 sum 변수에 할당한다. reduce 함수의 콜백 함수에서는 누적값(accumulator)과 현재 값(currentValue)만 사용하고, 초기값으로 0을 전달했다. 콜백 함수에서는 각 요소를 누적값에 더하여 합을 계산하고, 최종적으로 계산된 합 15가 sum 변수에 저장된다.

 

 

2. 배열의 최대값 구하기

const numbers = [10, 5, 8, 3, 9];
const max = numbers.reduce((accumulator, currentValue) => Math.max(accumulator, currentValue), -Infinity);
console.log(max); // 출력 결과: 10

자바스크립트에서 -Infinity는 음수의 무한대를 나타내는 특수한 값이다.

 

위 코드에서 -Infinity는 reduce() 함수의 초기값으로 사용되었다. 즉, 초기값은 그냥 음수다. 초기값은 reduce() 함수의 두 번째 인자로 전달되고, 이 값은 누적값(accumulator)의 초기값을 설정하는데 사용된다.

Math.max() 함수는 주어진 숫자들 중에서 가장 큰 값을 반환하는데, 초기값이 -Infinity로 설정되면 배열의 첫 번째 요소부터 시작해서 큰 값을 찾아가게 된다. 즉, 배열의 첫 번째 요소인 10부터 비교를 시작하며, -Infinity(음수)보다 큰 값이 나타나면 해당 값이 누적값으로 설정된다.

 

 

3. 배열 각 요소의 문자열 길이 구하기

const strlist = ["Hello", "World", "JavaScript"];
const arr = strlist.reduce((a, b) => [...a, b.length], []);

console.log(arr); // 출력 결과 : [5, 5, 10]

reduce() 함수를 호출할 때 사용되는 콜백 함수는 (a, b) => [...a, b.length] 이다. 이 콜백 함수는 두 개의 매개변수 a와 b를 받으며, a는 현재까지의 누적값이고 b는 배열의 현재 요소이다. 

콜백 함수에서 [...a, b.length]는 현재까지의 누적 배열 a에 현재 요소 b의 길이(b.length)를 추가한 새로운 배열을 생성한다. 초기값이 빈 배열로 주어졌으니 처음 누적값은 없는 채로 시작한다. reduce() 함수에서 두 번째 매개변수에 빈 배열( [] )을 전달하고, 순회하면서 문자열의 길이를 누적해가며 최종적으로 생성된 배열을 반환한다.

 

callback	accumulator	currentValue	리턴 값
1번째 호출	[]	Hello	5
2번째 호출	[5]	World	5
3번째 호출	[5, 5]	JavaScript	10

 

4. 배열의 평균 구하기

const numbers = [5, 7, 3, 9, 12];
const average = numbers.reduce((accumulator, currentValue, index, array) => {
  accumulator += currentValue;
  if (index === array.length - 1) {
    return accumulator / array.length;
  } else {
    return accumulator;
  }
}, 0);

console.log(average); // 출력 결과: 7.2

위 코드에서 reduce() 함수는 각각 다른 목적에 따라 사용되고 있다. 콜백 함수의 매개변수로 accumulator(누적값), currentValue(현재 요소), index(현재 요소의 인덱스), array(원본 배열) 등이 사용된다.