Javascript reduce사용법

reduce는 전체 배열 값을 합해주는 역할을 한다. 

첫 번째 인자에는 콜백함수를, 두번째 인자에는 sum의 초기값을 넣는다. sum의 초기값을 넣지 않으면 자동으로 0이 된다. 콜백함수에는 2가지 인자가 들어가는데 첫번째는 초기값이 들어가고 두번째에는 배열이 하나씩 들어가서 더해진다. 

 

 

1. acc가 sum값을 의미하고 curr가 1,2,3,4가 차례대로 대입되며 전체 배열 값을 더해준다. 

const numbers = [1,2,3,4];
const answer = numbers.reduce((acc, curr)=>{
  return acc+curr;
},5)
//두번째 인자값 : acc의 초기값
console.log(answer)

답 : 15. 

 

2. 숫자가 아닌 문자값을 넣었을 때. 쌓인값과 현재 값을 찍어보았다 

const numbers = ["가","나","다","라"];
const answer = numbers.reduce((acc, curr)=>{
  console.log(acc)
  console.log(curr)
  return acc+curr;
})
console.log(answer)

답 : 

"" , 가

가, 나

가나, 다

가나다, 라

가나다라

 

3. reduce다음에 함수를 넣으면 함수가 차례로 돌아가면서 누적된다. 

reduce두번째 인자로 초기값을 넣지 않으면 첫번째 배열값으로 초기값이 설정된다. 

var numbers = [175, 50, 25];

document.write(numbers.reduce(myFunc));

function myFunc(total, num) {
  return total - num;
}

답 : 100
1) 175 - 50
2) 125 - 25
3) 100

 

4) 두번째 인자로 초기값을 넣으면 해당 초기값부터 계산이 시작된다. 

var numbers = [175, 50, 25];

document.write(numbers.reduce(myFunc, 20));

function myFunc(total, num) {
  return total - num;
}

20 - 175

-155 -50

-205 - 25

답 : -230

 

 

5)손익을 계산해보는 문제. 구조분해 할당을 좀 잘 써보도록 하자~ 

let stocks = [
  { name: '엘리스전자', purchasePrice: 80000, currentPrice: 100000, count: 5 },
  { name: '엘리톡', purchasePrice: 60000, currentPrice: 90000, count: 10 },
  { name: '엘리스', purchasePrice: 30000, currentPrice: 50000, count: 5 },
];

//Q: 손익을 계산해보자. 
function cal(acc, curr) {
  const {name, purchasePrice, currentPrice, count} = curr;
  let acculate = (purchasePrice - currentPrice) * count;
  return acc+ acculate;
}

console.log(stocks.reduce(cal,0));

1) acc : 0, curr : 엘리스전자객체
2) acc : 합산값(-100000), curr : 엘리톡객체
3) acc : 합산값(-400000), curr : 엘리스객체
4) 마지막으로 합산값 acc(-500000) 리턴됨