DOM Array Methods
배운점
- 비동기 함수를 다룰 때 유용한 async키워드와 await 키워드를 이론적으로는 알고 있었지만, 이번 예제를 통해 활용하는 법을 학습 했습니다.
- async와 await 키워드는 비동기 함수를 동기함수처럼 선언할 수 있게 해주는 일종의 syntatic sugar이다.
// Fetch random user and add money
const getRandomUser = async () => {
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);
};
- Spread 를 활용해 축약적으로 특정 프로퍼티를 변경하는 법을 배웠습니다.
- Spread로 파이썬의 딕셔너리 컴프리헨션처럼
const changed = { ...{ x: 1, y: 2 }, y: 100 };
와 같이 y프로퍼티를 변경하는 법을 학습했습니다.
// 특정 프로퍼티 변경
const changed = { ...{ x: 1, y: 2 }, y: 100 };
// changed = { ...{ x: 1, y: 2 }, ...{ y: 100 } }
console.log(changed); // { x: 1, y: 100 }
// Double eveveryones money
const doubleMoney = () => {
console.log('1');
userData = userData.map((user) => {
return { ...user, money: user.money * 2 };
});
updateDOM();
};
- reduce 메소드가 헷갈렸는데, 이번 예제를 통해 적절히 활용하는 법을 학습 했습니다.
- arr.reduce(callback[, initialValue]) 에서 initialValue로 reduce를 시작하기 전 초기값을 설정 할 수 있고, callback 함수의 인자로는 (state: U, element: T, index: number, array: T[]) state는 누적값, element는 처리할 현재값, index는 처리할 현재값의 인덱스, array는 reduce를 호출한 배열을 나타낸다.
// Calculate Wealth
const calculateWealth = () => {
const totalWealth = userData.reduce((acc, user) => (acc += user.money), 0);
const wealthEl = document.createElement('div');
wealthEl.innerHTML = `<h3>Total Wealth: <strong>${formatMoney(
totalWealth
)}</strong></h3>`;
main.appendChild(wealthEl);
};
- 데이터를 정제하고, 조작하는 부분과 웹페이지에 조작한 데이터를 업데이트 하는 부분을 나눠 더 가독성이 좋게 코드를 짜는법을 학습했습니다.
// Update DOM 웹페에지에 업데이트를 담당하는 함수
const updateDOM = (providedData = userData) => {
// 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);
});
};
// Add new obj to data arr
const addData = (obj) => {
userData.push(obj);
updateDOM();
};
// Sort by richest
const sortByRichest = () => {
userData.sort((userA, userB) => userB.money - userA.money);
updateDOM();
};
Leave a comment