reduce

reduce

 

reduce 는 잘 사용하면 정말 유용한 내장 함수임

 

배열의 총합을 구한다고 해보자

 

변수 sumEx 는 그냥 대충지은거임 현재 열어놓은 크롬창에 sum이 선언되어있어서..ㅇㅇㅋ

 

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

let sumEx = 0;
numbers.forEach(n => {
    sumEx += n;
});
console.log(sumEx);

결과는 15

 

여기서 sumEx 를 계산하려고 선언을 하고, forEach 를 사용해서 계속해서 덧셈 해줬음

 

근데 reduce 를 사용하면 아래와 같다.

 

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

let sumEx = numbers.reduce((acc, current) => acc + current, 0);

console.log(sumEx);

결과는 같다 ㅗㅜㅑ,...

 

reduce 함수는 두개의 파라미터를 전달

첫번째 파라미터는 accumulator 와 current 를 파라미터로 가져와서 결과를 반환하는 콜백함수

두번째 파라미터는 reduce 함수에서 사용할 초깃 값

 

---

위의 코드를 아래와 같이 수정해보자

 

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

let sumEx = numbers.reduce((acc, current) => {
    console.log({ acc , current });
    return acc + current;
}, 0);

console.log(sumEx);

배열을 처음부터 끝까지 반복하면서 전달한 콜백 함수가 호출된다

제일 처음엔 accumulator (누적계산기)의 값이 0임 (두번째 파라미터에 초깃값을 0으로 설정해서)

 

처음 콜백시 0 + 1 을 해서 1이 반환

그러면 그 1이 다음 accumulator 값으로 설정됨

 

그렇게 쭉~~~~ 계산이 되는것임

 

reduce 를 사용해서 평균도 계산 가능

 

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

let sumEx = numbers.reduce((acc, current, index, array) => {
    
    if (index === array.length -1) {
        return (acc + current) / array.length;
    }
    return acc + current;
}, 0);

console.log(sumEx);

위 코드에서 reduce 에서 사용한 콜백함수에서 추가로 파라미터를 index, array 를 받아왔음

index 는 현재 처리하고 있는 항목이 몇번째 인지 가르키고, array 는 현재 처리하고 있는 배열 자신을 의미한다.