reduce()

reduce() 메서드는 배열에서 사용이 가능하며 배열을 더 단순한 값으로 줄이는 것이 가능합니다.

 

예를 들어 배열 안의 숫자를 모두 더하여 줄일 수 있으며 이것 외에도 모든 배열을 원하는 모든 값으로 줄이는 것이 가능합니다.

 

reduce() 메서드는 배열을 단일 숫자나 단일 문자열로 줄이는 것으로 사용됩니다.

 

사용법

const 값을 담을 상수명 = 기존배열.reduce((초깃값, 기존 배열의 첫번째 요소, 현재 요소의 인덱스, 기존 배열) => {
  return 반환값;
}, 선택적 인수);

reduce() 메서드는 매개변수에 함수를 전달받습니다.

 

해당 함수는 초깃값, 배열의 요소를 담을 변수, 현재 요소의 인덱스, 기존 배열을 인수로 전달받을 수 있습니다.

(거의 현재 요소의 인덱스나 기존 배열은 인수로 전달받아 사용하지 않습니다.)

 

마지막으로 reduce() 메서드는 다른 선택적 인수나 매개변수를 취할 수 있습니다.

 

아래 예시 코드와 함께 정리해보도록 하겠습니다.

 

 

 

const nums = [10, 5, 3, 6, 4, 2];

const sum = nums.reduce((prevValue, curValue) => {
  return prevValue + curValue;
}, 0);

console.log(sum); // 30 출력

위의 예시 코드처럼  reduce() 메서드의 첫 번째 인자로 함수를 전달하게 되면

 

reduce() 메서드는 첫 번째 인자를 취하지 않고 다른 선택적 두 번째 인수를 취하게 됩니다.

 

즉 첫 번째 인자로 전달한 함수는 취하지 않고 두 번째 인수로 전달한 0을 취하게 되는 것입니다.

 

두 번째 인자로 전달된 값은 시작하는 초깃값이 되게 됩니다. 여기서는 0을 전달했기 때문에 초깃값은 0으로 시작되는 것입니다.

 

이렇게 두 번째 선택적 인수를 전달하게 되면 함수의 초깃값, 즉 prevValue는 초깃값으로 전달받은 0이 되게 됩니다.

 

다음으로 기존 배열의 모든 요소에 함수의 본문을 실행하게 되고 마지막으로 값을 반환하게 됩니다.

 

 

실행 순서를 정리해보겠습니다.

 

1. 첫 번째 실행에서 prevValue의 값은 초깃값으로 전달받은 0이며 curValue의 값은 배열의 첫 번째 요소인 10이 되고 

prevValue + curValue의 결과인 10이 prevValue에 담기게 됩니다.

 

2. 두 번째 실행부터는 prevValue는 더 이상 설정한 초깃값을 참조하지 않고 이전 실행의 결과 값을 전달받게 되고 curValue의 값은 배열의 두 번째 요소인 5가 되며 prevValue + curValue의 결과인 15가 prevValue에 담기게 됩니다.

 

3. 배열의 마지막 요소까지 진행되며 마지막 요소까지 진행되었을 때 값을 반환하게 됩니다.