자바스크립트 배열 요소의 총합 구하기

첫 프로젝트 진행이 마무리 단계에 접어들면서, 8월이 밝았다. 그러나 모든 개발이 그렇듯 예상치 못한 이슈가 생겼다. 다행히(?) 크리티컬 한 이슈는 아니었지만, 이번 이슈로 인해 몇 가지 경우의 수가 발생할 수 있음을 깨달을 수 있었던 좋은 계기가 되었다. 그래서 이번 시간엔 해결했던 이슈를 기록해보고자 했다.

---

1️⃣ Issue - 월초에 데이터 리셋이 될 경우 - 빈 데이터가 넘어오기 때문에 화면에 데이터 조회가 되지 않는다.

나는 자바스크립트 reduce라는 메서드를 사용하여 배열의 각 요소의 합을 구하는 로직을 짠 적이 있다.  Vue.js의 계산된 속성 / 계산된 데이터를 만들어 내는 computed 속성에 total이라는 데이터를 새로 만들었는데 그 리턴 값을 reduce를 통해 구현한 것이다.  그래서 초기 값을 0으로 세팅해놓고 배열을 순회하면서 요소 하나하나를 더하는 것이라고 생각하면 되는데, 문제는 이때 배열의 요소가 모두 0이거나, null, undefined가 넘어올 때 에러가 발생한다는 것이다. 그래서 이때 분기 처리를 해줬어야 하는데

 

pieChartData라는 데이터에서 sum 값만 뽑아내어 data라는 이름의 새로운 배열을 하나 만들고, 그 data라는 배열의 값이 모두 0일 경우(Vue.js data속성에서 미리 초기 값을 0으로 할당해놓음)를 조건으로 하여 분기 처리를 해주었다. 따라서 every라는 메서드를 활용하여 배열의 모든 value를 조회해보고 빈 데이터가 넘어올 때, 모두 0으로 초기 할당이 되기 때문에 모든 value가 0일 때, 동일한 값으로 채워 넣어 버리는 로직을 짜보았다. 그리고 그렇지 않을 때는 본래 sum이 할당된 값이 조회되는 것이고.

---

2️⃣ 정리 - reduce, every, fill 메서드에 대해서

먼저 reduce는 배열의 요소 하나하나를 순회하면서 최종적으로 그 요소들의 총 합을 구할 때 사용하는 함수이다.

 

다음으로 every는 배열 안의 모든 요소가 주어진 판별 함수를 통과하는지 테스트하는 함수이다. Boolean 값을 반환한다. 그래서 나는배열의 value 하나하나의 값을 순회하면서 그 값이 0인지 아닌지 판별했다.

 

마지막으로 fill은 배열의 시작 인덱스부터 끝 인덱스까지 정적인 값 하나로 채우는 함수이다.