[바닐라자바스크립트] DOM Array Methods - javascript

👩🏻‍💻 코드

const main = document.getElementById("main");
const addUserBtn = document.querySelector(".add-user");
const doubleBtn = document.querySelector(".double");
const showMillionairesBtn = document.querySelector(".show-millionaires");
const sortBtn = document.querySelector(".sort");
const calculateWealthBtn = document.querySelector(".calculate-wealth");

let data = [];

getRandomUser();
getRandomUser();
getRandomUser();

// ✅ Fetch random user and add money : api를 통해 랜덤 이름, 자산 불러오기
async function getRandomUser() {
  const res = await fetch("https://randomuser.me/api");
  const data = await res.json();

  const user = data.results[0];

  const newUser = {
    name: `${user.name.first} ${user.name.last}`,
    money: Math.floor(Math.random() * 1000000),
  };

  addData(newUser);
}

// ✅ Add new obj to data arr : 데이터 배열에 새로운 객체 추가
function addData(obj) {
  data.push(obj);

  updateDOM();
}

// ✅ Update DOM (forEach 메서드 사용)
// 계속 DOM을 새롭게 갱신해주는 함수
// 매개변수를 아래와 같이 쓰면 인자가 전달되지 않았을 때 해당 변수를 쓰겠다는 뜻!
function updateDOM(providedData = data) {
  // Clear main div
  main.innerHTML = "<h2><strong>Person</strong> Wealth</h2>";

  providedData.forEach((item) => {
    const element = document.createElement("div");
    element.classList.add("person");
    element.innerHTML = `<strong>${item.name}</strong> ${formatMoney(
      item.money
    )}`;
    main.appendChild(element);
  });
}

// ✅ Format number as money - https://stackoverflow.com/questions/149055/how-to-format-numbers-as-currency-string
// 돈 단위로 보일 수 있도록 수정
function formatMoney(number) {
  return "$" + number.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, "$&,");
}

// ✅ Double Money (map 메서드 사용)
function doubleMoney() {
  data = data.map((user) => {
    return { ...user, money: user.money * 2 };
  });

  updateDOM();
}

// ✅ Sort users by richest
function sortByRichest() {
  data.sort((a, b) => b.money - a.money);

  updateDOM();
}

// ✅ Filter only millionaires
function showMillionaires() {
  data = data.filter((user) => user.money > 1000000);

  updateDOM();
}

// ✅ Calculate Total Wealth
function calculateWealth() {
  const wealth = data.reduce((acc, user) => (acc += user.money), 0);

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

// ✅ Event listeners
addUserBtn.addEventListener("click", getRandomUser);
doubleBtn.addEventListener("click", doubleMoney);
sortBtn.addEventListener("click", sortByRichest);
showMillionairesBtn.addEventListener("click", showMillionaires);
calculateWealthBtn.addEventListener("click", calculateWealth);

📃 정리

✔️ Fetch random user and add money

• https://randomuser.me/api를 통해 랜덤 유저의 정보를 가져오는 코드
• async await를 이용해서 구현
• newUser객체를 생성해서 data배열에 추가하기

✔️ Add new obj to data arr

• 생성된 newUser객체를 data배열에 추가하는 메서드

✔️ Update DOM

• 새로운 객체가 생성되거나, 정렬하거나 DOM에 변화가 생겼을 때 계속 업데이트해줄 수 있도록 갱신해주는 메서드
• forEach메서드를 활용해서 data 배열에 저장된 요소들을 하나씩 계산해주기

✔️ Format number as money

• 숫자 형태의 값을 원화 단위로 변경시켜주는 메서드
• 정규 표현식 사용

✔️ Double Money

• 값을 두 배로 바꿔주는 메서드
• map메서드를 활용해서 배열의 요소에 주어진 함수를 호출하여 새로운 배열을 반환
• spread를 사용해서 user값은 그대로 가져오되 money값을 두 배로 변경

✔️ Sort users by richest

• sort메서드를 활용해서 내림차순으로 요소들 정렬

✔️ Filter only millionaires

• filter메서드를 활용해서 백만 이상의 자산을 가지고 있는 요소들만 반환

✔️ Caculate Total Wealth

• reduce메서드를 활용해서 숫자 값들을 누적시키기

✔️ DOM 조작 메서드

• innerHTML : 요소 내에 포함된 HTML 또는 XML 마크업을 가져오거나 설정
• createElement("tagName") : 지정한 tagName의 HTML 요소를 만들어 반환
• appendChild : 한 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 붙임