hello world

map, reduce 자바스크립트 누적합 구하기 본문

WEB/Front

map, reduce 자바스크립트 누적합 구하기

sohyun_92 2022. 12. 7. 14:54
728x90

 

통계화면 개발중 하위부서의누적합을 구현하는것이 필요했다.

mysql에서 recursive 기능을 제공하지않는 버전을 사용하고 있었기에

자바스크립트에서 map, reduce 메서드를 통해

통계 누적합을 구함

 

참고코드

<script>
var dataList = [
	{
        used : 0,
        division : "1",
        parent : "",
		name: "FC채널"
    }, {
        used : 0,
        division : "1.1",
        parent : "1",
		name: "  강남사업본부"
    }, {
        used : 41503,
        division : "1.1.1",
        parent : "1.1",
		name: "  강남BM105지점"
    }, {
        used : 136684,
        division : "1.1.2",
        parent : "1.1",
		name: "  강남BM108지점"
    }, {
        used : 32166,
        division : "1.1.3",
		parent : "1.1",
		name: "  강남BM109지점"
    }, {
        used: 64842,
        division: "1.1.4",
		parent : "1.1",
		name: "  강남BM110지점"
    }, {
        used: 45869,
        division: "1.1.5",
		parent : "1.1",
		name: "  강남FC영업지점"
    }, {
        used: 1,
        division: "1.2",
		parent : "1",
		name: "  강남대치사업본부"
    }, {
        used: 37606,
        division: "1.2.1",
		parent : "1.2",
		name: "  강남대치BM100지점"
    }
]

// Update one division, children first
var _update_service_sums = function(division, dataList) {
    var children = dataList.filter(s => s.parent === division.division)
    children.forEach(c => _update_service_sums(c, dataList))
    division.used_sum = division.used + children.map(c => c.used_sum).reduce((a, b) => a + b, 0);
}

// Update all dataList
var update_service_sums = function(dataList) {
    var roots = dataList.filter(s => s.parent === undefined || s.parent === '')
    roots.forEach(r => _update_service_sums(r, dataList))
}

update_service_sums(dataList)
console.log(dataList)
</script>

map 메서드

- map 메서드는 다음과 같이 사용함

 배열.map((요소, 인덱스, 배열) => {return 요소});

- map은 반복문을 돌면서 배열 안의 요소들을 1대1로 짝지어줌 (매핑한다고 표현)

const hello = [1, 2, 3];
let result = hello.map((v) => {
  console.log(v);
  return v;
});
hello; // [1, 2, 3]
result; // [1, 2, 3]
const number = [1,2,3,4]
const mapnum = number.map(val=>val*2)
console.log(mapnum);

//[2,4,6,8]

 

reduce 메서드

- reduce 메서드는 다음과 같이 사용함

이전값이 아니라 누적값!(초기값이 없으면 자동으로 0번째 인덱스의 값이됨)

배열.reduce((누적값,현잿값, 인덱스,요소) => {return 결과}, 초깃값);

 

result = oneTwoThree.reduce((acc, cur, i) => {
  console.log(acc, cur, i);
  return acc + cur;
}, 0);
// 0 1 0
// 1 2 1
// 3 3 2
result; // 6

 

< 구현한 코드 >

  this.sumData = function(){    	
    	        // url 호출해서 response값 받아오는 로직 생략 
                
    	    	 var updateServiceSumData = new Array();    	
    	    	 updateServiceSumData = this.update_service_sums(response);
    	    	 gridData = this.update_service_sums(response);    	
    	    
 }
    
   // 누적 합계 계산 
    this.update_service_sums = function(dataList) {
    	if(dataList!=null){
	       	var roots = dataList.filter(s => s.parent === '1')
           	       	
	       	roots.forEach(r => this._update_service_sums(r, dataList))
    	}
       
        return dataList;        
    }
   
    // 누적 합계 계산 
    this._update_service_sums =function(r, dataList){    
    	 var children = dataList.filter(s => s.parDivnCd === r.divnCd)
    	 children.forEach(c => this._update_service_sums(c, dataList)) 	
    	 r.aAmtSum = r.aAmt + children.map(c => parseInt(c.aAmtSum)).reduce((a, b) => a + b, 0);
  }

 

Comments