Array.reduce

reduce 메소드는 자신을 호출한 배열의 모든 요소를 순회하며 인수로 전달받은 콜백 함수를 반복 호출한다. 그리고 콜백 함수의 반환값을 다음 순회시에 콜백 함수의 첫 번째 인자로 전달하면서 콜백 함수를 호출하여, 하나의 결과값을 만들어 반환한다. 원본 배열은 변경되지 않는다.

reduce 메소드는 첫 번째 인수로 콜백 함수, 두 번째 인수로 초기값을 전달받는다. reduce 메소드의 콜백 함수에는 4개의 인수, 초기값, 배열 인덱스, 호출한 배열이 들어간다.

작동 원리

const sum = [1, 2, 3, 4].reduce((acc, cur, index, array) => acc + cur, 0);
console.log(sum); // 10

reduce의 콜백 함수는 4개의 인수를 전달받아 배열의 length만큼 총 4회 반복된다. 이때 반환값은 다음과 같다.

1 번째 순회 acc : 0(초기값), cur : 1, index : 0, array : [1, 2, 3, 4]
콜백 함수의 반환값 => 1 (acc + cur)

2 번째 순회 acc : 1(초기값), cur : 2, index : 1, array : [1, 2, 3, 4]
콜백 함수의 반환값 => 3 (acc + cur)

3 번째 순회 acc : 3(초기값), cur : 3, index : 2, array : [1, 2, 3, 4]
콜백 함수의 반환값 => 6 (acc + cur)

4 번째 순회 acc : 0(초기값), cur : 1, index : 0, array : [1, 2, 3, 4]
콜백 함수의 반환값 => 10 (acc + cur)

첫 번째 요소값을 콜백으로 전달, 다음 순회에서는 콜백 함수의 반환값과 두번째 요소값을 콜백으로 전달...

reduce 메소드는 하나의 결과값을 반환한다!

자신을 호출한 배열의 모든 요소를 순회하며, 하나의 결과값을 구할때 사용한다.