Wealth List (6) - Reduce()

 

 

// calculate entire wealth
function calEntireWealth() {
  const total = data.reduce((acc, user) => (acc += user.money), 0);

  const div = document.createElement("div");
  div.innerHTML = `<h3>Total: <strong>${formatMoney(total)}</strong></h3>`;
  main.appendChild(div);
}

 

reduce Method는 하나의 value를 return해준다.

data를 받아온다

=> reduce method를 돌리는데 acc(accumulator)에 user.money 값을 하나하나씩 더해준다. (시작 값은 0)

=> 그러면 data에 있는 모든 money 값이 다 더해져서 total에 저장된다.

 

그럼 우리는 이 total 값을 javascript를 이용해서 동적으로 화면에 띄워준다.

div를 만들고 div 안에 total 값을 넣어준다.

(total은 그냥 숫자이니까 저번시간에 만들었던 formatMoney 함수를 이용해서 돈처럼 보이게 만들어서 ㅎㅎ 출력시킨다.)

마지막으로 이 div를 main에 append해주면 저렇게 화면에 나타난다!

(물론 CSS style도 더 해서 좀 보기 좋게 꾸며야한다.)