배열의 reduce 메서드

안녕하세요, 프로독학러 입니다.

이번 포스팅에서는 배열의 여러 메서드 중 reduce 메서드에 대해서 알아보겠습니다.

배열에는 매핑을 위한 map 메서드라든지, 하나의 조건을 만족하는 요소를 찾기 위한 some 메서드라든지, 여러 메서드가 있습니다.

현재 map 메서드에 대해서는 포스팅이 돼 있는 상태입니다만, 다른 여러 매서드들에 대해서도 차근차근 포스팅하도록 하겠습니다.

그럼 본격적으로 reduce메서드에 대해서 알아보도록 하겠습니다.

reduce메서드는 배열의 요소들을 하나씩 돌며 이전 콜백의 리턴값과 현재 콜백의 리턴값을 가지고 어떤 작업을 하는데 유리한 메서드 입니다. 

표현식은 다음과 같습니다.

arr.reduce(callbackFunction(accumulator, currentValue[, currentIndex, array]){...}[, initialValue])

배열에 붙여서 사용하는 메서드입니다.

첫 번째 인자로 콜백함수가 들어오고, (생략가능한) 두 번째 인자는 콜백의 첫 호출에서 accumulator로 적용될 값입니다.

콜백함수의 매개변수에 대해서 알아보도록 하겠습니다.

• accumulator : 직전의 콜백이 리턴한 계산값
• currentValue :현재 콜백의 요소 (배열의 요소 값)
• currentIndex : 현재 콜백이 진행되고 있는 시점의 배열의 인덱스 값
• array : 작업을 수행하는 배열 자체

이해를 돕기 위해 아래의 예제를 살펴보도록 하겠습니다.

var arr = [1, 2, 3, 4, 5];
arr.reduce(function(pre, current){
    return pre + current ;
},0); // 15

첫 번째 줄에서 arr라는 변수에 배열을 할당했습니다.

두 번째 줄에서 reduce메서드를 이용해 배열의 모든 원소의 값을 더했습니다.

(콜백함수의 세 번째, 네 번째 인자는 생략이 가능합니다)

모두 더한 결과 15가 잘 찍히는 것을 알 수 있습니다.

reduce메서드는 배열의 요소들을 하나씩 돌며 어떤 계산을 할 때, 전의 결과가 현재 계산에 필요할 때 사용하시면 좋겠습니다.

** 참고자료

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

*다녀가셨다는 표시는 공감으로 부탁드릴게요! (로그인 하지 않으셔도 공감은 가능합니다 ㅎㅎ)