TIL(과제)
1) 배열과 객체 만들고 console.log로 출력하기
const people = [
{
이름: "철수",
나이: 19,
성별: "남",
},
{
이름: "짱구",
나이: 20,
성별: "남",
},
{
이름: "유리",
나이: 21,
성별: "여",
},
];
console.log(people);문제2) 문제1에서 만든 데이터를 html에 보여주기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div class="infoPeople"></div>
</div>
<script src="./script.js"></script>
</body>
</html>.infoPeople {
border: 1px solid black;
}const container = document.querySelector(".container");
people.forEach((person) => {
const html = `
<div class="infoPeople">
<div>이름: ${person.이름}</div>
<div>나이: ${person.나이}</div>
<div>성별: ${person.성별}</div>
</div>`;
container.innerHTML += html;
});문제3) find 메소드
const woman = people.find((person) => {
return person.성별 === "여";
});
console.log(woman);문제4) filter 메소드
return person.성별 === "남";
});
console.log(result);문제5) map 연습 문제
// 문제 5
const levelUp = people.map((person) => ({
...person,
나이: person.나이 + 10,
}));
console.log("원래나이: ", people);
console.log("업데이트된 나이: ", levelUp);문제6) sort 연습 문제
// 문제 6
const peopleCopy = [...people];
peopleCopy.sort((a, b) => {
return b.나이 - a.나이;
});
console.log("sort전:", people);
console.log("copy, sort 후: ", peopleCopy);문제7) destructuring (구조 분해 할당) 문법 활용
// 문제 7
const user = {
이름: "병수",
나이: 20,
주소: "시골",
};
const { 이름, 나이, 주소 } = user;
console.log(이름);
console.log(나이);
console.log(주소);
