Javascript

Cart 내 제품 가격 합계내기 .reduce()

don_Kim 2021. 2. 28. 18:31
const data = [
	{
    	id: 0,
	    name: "product 1",
    	desc: "fancy shoes",
	    qty: 2,
    	price:  1000
    },
    {
    	id: 1,
	    name: "product 2",
    	desc: "blue jean",
	    qty: 1,
    	price:  3000
    },
    {
        id: 2,
	    name: "product 3",
    	desc: "white shirt",
	    qty: 3,
    	price:  2000
    },

]

const getTotalPrice = (data) => {
    let total = data.reduce((sum, i) => sum + i.price * i.qty, 0);
	/* 	
    	sum 은 누적값
    	i는 배열의 인덱스
        마지막 0은 초깃값이다 0으로 세팅을합니다(이미 저장되어있는 값이있다면 저장된값에 누적을 시켜야됨)
        초깃값을 적지않으면 자동으로 배열의 0번째값이 초깃값이된다고합니다
        
        data.reduce는 배열을 반복하면서 i번째 price와 qty을 곱해 sum에 값을 넣습니다.
        첫번째 iterate을하면 product 1의 price = 1000, qty = 2 를 곱해서 2000을 sum에 넣고
        두번째 iterate을할땐 product 2의 price = 3000, qty = 1 를 곱해서 3000을 sum(누적값2000이니까 이번 반복문이 돌면 5000이됩니다)
        세번째도 마찬가지로 두 value를 곱하면 6000이되므로 최종적으로 total에는 11,000원이 됩니다.        
    */

    return total;
    
    //만약 해외 달러를 이용한다면 소숫점 2자리까지 나타낸다
    //return (Math.round(total * 100) / 100).toFixed(2); 

  };

제 글솜씨가 엉망이고, 웹개발 공부를하면서 제방식대로 이해하며 머릿속으로 풀이한 내용을 그대로 글로 옮겨적느라 내용전달이 제대로 안될수도있습니다. 

 

이 글을 참조하였습니다. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce

 

Array.prototype.reduce() - JavaScript | MDN

The reduce() method executes a reducer function (that you provide) on each element of the array, resulting in single output value. The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive exam

developer.mozilla.org