Reduce란

자바스크립트 배열 메서드중 난이도가 높다 ... 정말 높다
아직은 간단한 예제랑 개념만 알지만 꼭 나중에는 어려운 로직에도 활용해보고 싶다

Reduce가 주로 하는일은 배열을 가져다가 배열안의 값을 점차 줄여나가면서 결국 하나의 값만 남기는것이다,
Reduce는 자동적으로 배열안에 있는 모든 요소를 처리하지는 않으며
간단한 비유를 들자면 많은 액체를 유리병에 섞어 넣는데 유리병에 있는 작은 구멍에 한방울만 나오는것이다

 

코드 예시를 통해 봐보자

[3,5,7,9,11].reduce(([3,5,7,9,11].reduce(
(accumulator, currentValue)=> { return accumulator + currentValue}
)

결과값 // 35

reduce 파라미터에는 2개의 매개변수를 받는데,
첫번째 accumulator(누산기) 는 말 그대로 총 합계를 나타내며 계속해서 값을 더하며 줄여나갑니다
두번째 currentValue(현재값) 은 말 그대로 현재값이며 배열의 각각 요소를 나타냅니다 이후 설명에 더 자세히 풀어드리겠습니다.

accumulator 가 돌면서 currentValue 값을 더합니다

첫번째값은 3이므로 accumulator(3) + currentValue(5) => 8이 나오고 8의 값이 다시 accumulator로 돌아가면서

두번째값은 accumulator(8) + currentValue(7) = > 15 가 나옵니다 해당 반복을 값이 하나가 될때까지 진행합니다

for of 문으로도 구현할수 있습니다.

const arr = [3,5,7,9,11];
let total = 0;

for(let num of arr){
 total += num
}

console.log(total)

비교했을때 Reduce가 러닝커브면에서 어려울수 있지만 코드가 더욱더 간결해보이는걸 알수 있습니다.

Reduce의 또다른 특징이 있는데 Reduce의 두번째 인수에 accumulator 의 초기값을 설정해줄수 있는것인데요

[3,5,7,9,11].reduce(([3,5,7,9,11].reduce(
(accumulator, currentValue)=> { return accumulator + currentValue}
, 100)

해당 코드에는 첫번쨰 인수 뒤에 100이라는 숫자를 추가로 넣었습니다 이는 accumulator가 반복을 돌떄 초기값을 100으로 설정하겠다는 뜻입니다

기존 코드는 처음에 3 + 5 => 8 , 8 + 7 = 15 ..... 이렇게 시작이 되었다면
초깃값 100을 설정하면 100 + 3 => 103, 103 + 5 => 108, 이런식으로 100을 시작으로 값을 더해나갑니다.

개념을 알기위해 간단한 예시를 들며 Reduce에 대해 설명하였으며 이를 활용하면 배열의 최댓값과 최솟값도 구할수 있습니다

max 상수에는 a가 c보다 크면 return a를 하고 그게 아니면 return c를 합니다.

결과값으로는 5가 나오는데 처음에 왜 5가 나오지? 의야 했습니다 분명 a는 누적값이니까 6이 나와야는데 왜 5가 나오지 했는데

지금은 비교등호를 사용하고 있다는걸 깨달았습니다 a와 c를 곱하거나 또는 합칠떄는 누적으로 식이 되지만 

지금은 비교이기때문에 

첫번째 a : 1, c : 2 
두번째 a : 2, c : 3
세번째 a : 3, c : 4
네번쨰 a : 4, c : 5

이렇게 순서대로 가다보면 결국 a 는 c 보다 크지 못하기 때문에 결과값으로 5가 출력이 됩니다 

 

그럼 상수 min은 어떨까요?  a가 c보다 작으면 a를 출력하는것입니다.

첫번째 a : 1, c : 2

시작하자마자 a가 c보다 작으니까 결과값으로 1이 출력됩니다

 

이처럼 reduce를 사용하면 배열의 최솟값과 최대값을 쉽게 구할수 있습니다 :)