JavaScript를 공부해보자, reduce() 예외사항

안녕하세요?
이번 포스팅에선 자바스크립트 배열 Array의 메소드, reduce()의 예외사항에 대해 알아보겠습니다

일단 그 전에, reduce() 메소드에 대해 간단히 알아야겠죠?

Reduce

배열의 요소를 모두 더해줄 때 사용하는 메소드입니다
reduce함수는 배열의 각 요소를 순회하며 callback 함수의 값을 누적하여 결과값을 반환합니다

Array.reduce(callback[, initialValue])`

callback

• accumulator : callback 함수의 리턴값을 누적한다
• currentValue : 배열의 현재 값
• option) index : 배열의 현재값 인덱스
• option) array : 현재 배열 자체

option) initialValue

• 최초 함수 실행 시, accumulator에게 제공되는 초기값입니다
• initialValue를 입력하지 않을 시, 배열의 첫 번째 요소를 사용하고 빈 배열이라 초기값이 없을 경우 에러가 발생된다.

const arrayNumber = [1,2,3,4,5,6,7,8,9,10]
// 초기값을 안줬을 경우, 초기값이 배열의 첫번째 요소인 1로 지정되어 결과값은 55
arrayNumber.reduce((a, c) => a + c)

// 초기값을 5로 설정할 경우, 배열의 모두 합산 + 5로 인해 값은 60
arrayNumber.reduce((a, c) => a + c, 5)

예외사항

reduce 함수에서 초기값을 설정하지 않으면 배열의 첫 번째 데이터를 사용한다고 했습니다
첫 번째 데이터를 초기값으로 가져가기 때문에, 인덱스 0번의 값은 건너뛰고 1번의 값부터 시작해 콜백 함수를 진행합니다
빈 배열에 대해서 reduce함수를 실행시킨다면, 초기값이 있는 경우 초기값 이후로 누적 계산이 진행되므로 결과값은 초기값 그대로입니다. 하지만 초기값이 없다면 빈 배열에 대해 reduce함수가 진행되므로 타입에러가 발생합니다

const array = [];
const reducer = (x, y) => x+y;
console.log(array.reduce(reducer));

// "Uncaught TypeError TypeError: Reduce of empty array with no initial value"

추가로 배열이 object로 구성되어있고, 초기값을 지정하지 않아 object를 초기값으로 가져가게 될 경우, 초기값이 원시값이 아니기 때문에 원하는 결과값이 나오지 않을 수 있습니다.

const array = [{ number: 4 }, { number: 8 }, { number: 6 }];

const result = arr.reduce((x, y) => x + y.number);
        
console.log(`result : ${result}`);

// result : [object Object]86
// 초기값을 지정하지 않음 

const array = [{ number: 4 }, { number: 8 }, { number: 6 }];

const result = arr.reduce((x, y) => x + y.number, 1);
        
console.log(`result : ${result}`);

// result : 18
// 초기값을 0으로 지정해줌