Wealth List (3) - map()

 

double money 버튼을 클릭하면 사람들의 재산이 2배가 되게 만들어 볼 것!

사용할 array 함수는 map()

 

 

 

doubleBtn.addEventListener("click", doubleMoney);

event listener을 만들고

 

function doubleMoney() {
  data = data.map((elem) => {
    return { name: elem.name, money: 2 * elem.money };
  });
  console.log(data);
  updateDOM(data);
}

우선은 강의 보기 전에 내가 만들어 본 doubleMoney 함수다.

원래 data array를 받아와서 각 element의 name은 그대로, money만 두배를 해서

return 해준 후에

그 data array를 updateDOM 함수에 전달해서 DOM을 다시 update해서 보여준다.

 

 

근데...

당연히 선생님은 훠어어ㅓ어얼ㅆ니 더 쉽게 하셨다....

 

 

 

function doubleMoney() {
  data = data.map(user => {
    return { ...user, money: user.money * 2 };
  });

  updateDOM();
}

 

map을 사용하는 것은 똑같은데

spread opreator을 이용해서 user 그대로 가져오는데

money만 원래 가진 돈의 2배로 만들어서 return 해줬다.

그리고 마지막에 updateDOM(); 만하면 끝!

 

그냥 놀랍다....

 

{...user, money:user.money*2};

이렇게 하면 이름은 그대로 복사 되는데 돈만 2배로 바뀌고 각 object들이 다시 data array로 저장된다니.............

 

전혀...전혀.. 상상도 못했따...........................

 

 

 

 

 

 

 

 

 

 

 

 

 

 

----------------------------------

forEach와 map의 가장 큰 차이점은,

 

forEach는 array를 loop through하면서

콜백 함수에서 하고 싶은 일을 다 마치고(;) 아무것도 return하지 않지만

map은 새로운 array를 return해준다.