reduce()는 배열에 내장된 메서드이다.
reduce메서드는 콜백함수와 초기값을 인자로 전달 받을 수 있다.
배열의 모든 요소에 전달 받은 reducer함수를 실행을 하고 하나의 결과값을 리턴한다.
arr.reduce(callback[, initialValue])
reduce메서드의 인자로 들어가는 콜백함수는 총 4가지의 인자를 받을 수 있다.
첫번째는 누적된 값(acc), 두번째는 현재값(cur), 세번째는 현재값의 인덱스(idx), 네번째는 원본 배열(src)이다.
여기서 누적된 값인 acc에는 어떤 값이 누적되냐면, 콜백함수가 return 하는 값이 누적이 된다.
먼저 reduce메서드를 사용할 때 크게 2가지의 경우를 생각해 볼 수 있다.
첫번째는 초기값을 전달한 경우, 두번째는 초기값을 전달하지 않은 경우다.
초기값을 전달하지 않은 경우
먼저 초기값을 전달하지 않은 경우 acc는 배열의 첫 번째 값과 같고 cur는 두 번째와 같다.
const arr = [1,2,3,4,5]
const add = arr.reduce( ( acc, cur, idx, src) => {
console.log('---------')
console.log('acc:', acc)
console.log('cur:', cur)
console.log('idx:', idx)
console.log('src:', src)
return
})아래의 결과를 보면 초기값을 전달하지 않았기 때문에 acc에 배열의 첫번째 요소가 할당이 되었고, cur에는 배열의 두번째 요소가 할당이 된 것을 확인할 수 있다.
두번째 부터 acc에 undefined가 할당이 되는 이유는 acc에는 콜백함수가 리턴하는 값이 누적되는데, 현재 아무것도 리턴하고 있지 않기 때문에 두번째 부터 undefined가 할당이 되는 것이다.
초기값을 전달 한 경우
초기값을 전달 한 경우, acc는 초기값과 같고 cur은 배열의 첫 번째 값과 같다.
const arr = [1,2,3,4,5]
const add = arr.reduce( ( acc, cur, idx, src) => {
console.log('---------')
console.log('acc:', acc)
console.log('cur:', cur)
console.log('idx:', idx)
console.log('src:', src)
return acc
},0)
초기값으로 0을 전달을 했기 때문에 아래와 같은 결과가 나온다.
초기값을 전달하지 않았을 경우와 했을 경우의 차이
위의 2가지 경우의 결과를 비교해 보면 초기값을 전달하지 않았을 경우는 4개의 결과가 나왔고, 초기값을 전달 한 경우는 5가지의 결과가 나왔다.
즉, 초기값을 제공하지 않으면, reduce()는 인덱스 0번째가 아닌 1번째 부터 시작해 콜백 함수를 실행하고 0번째 인덱스는 건너 뛴다. 반면 초기값을 전달 하면 인덱스 0번째 에서 시작한다.
따라서 초기값을 전달하는 것이 좀 더 권장 되는 방법이다.
그러면 reduce메서드는 언제 사용 하면 좋을까??
reduce메서드는 결국 배열의 처음 부터 끝까지 요소들을 누적한 값을 알고 싶을 때 사용한다.
reduce메서드를 활용하여 배열의 처음 부터 끝까지의 합을 구해 보자
const arr = [1,2,3,4,5]
const add = arr.reduce( ( acc, cur, idx, src) => {
console.log('---------')
console.log('acc:', acc)
console.log('cur:', cur)
return acc + cur
},0)
console.log(add)아래의 결과를 보면 먼저 초기값을 전달했기 때문에 acc에는 초기값 0, cur에는 배열의 0번째 인덱스 값인 1이 할당이 되었고 acc와 cur의 합을 return하고 있으므로 1이 다시 acc에 할당이 된다.
그리고 cur에는 배열의 1번째 인덱스 값인 2가 할당이 되었고, 둘의 합인 3이 acc에 다시 할당이 된다.
이렇게 배열의 처음 부터 끝까지 합을 구할 수 있다.
개발 블로그