구조분해할당
구조분해할당이란 객체나 배열의 속성을 해제하여 변수에 담아 사용할수 있게 하는 자바스크립트 표현식을 말한다.
ES6에서 도입되었으며 코드의 길이가 줄어들어 가독성 및 코드 작성시 시간 절약이 가능하다.
기본 문법
let arr2 = [1, 2, 3];
let [one1, two1, three1] = arr2;
console.log(one1, two1, three1);
let [a, b] = [1, 2];
console.log(a, b);
let [c, d] = [1];
console.log(c, d);
let [e, f] = [1, 2, 3];
console.log(e, f);
let [g, h, i = 1] = [1, 2];
console.log(g, h, i);
let name1 = { firstName: "oh", lastName: "lee" };
let { firstName, lastName } = name1;
console.log(firstName, lastName);
let name4 = ({ firstName = "kim", lastName } = { lastName: "park" });
console.log(firstName, lastName);
문자열의 길이 구하기
let str = "sdasdf";
let { length } = str;
console.log(length);
특정값만 가져오기
let list1 = [
{ id: 1, content: "dasfkdjf", isActive: true },
{ id: 2, content: "dasfkdjf", isActive: true },
{ id: 3, content: "dasfkdjf", isActive: true },
{ id: 4, content: "dasfkdjf", isActive: true },
];
list1.forEach(function (i) {
let { id } = i;
console.log(id);
});
let user = {
name: "oh",
address: {
city: "seoul",
},
};
let {
address: { city },
} = user;
console.log(city);
스프레드 연산자
let temp = [1, 2, 3];
let temp2 = [4, 5, 6];
let temp3 = [...temp, ...temp2];
console.log(temp3);
let obj = {
a: 1,
b: 2,
};
let obj2 = {
a: 1,
b: 3,
c: 1,
};
let obj4 = {
a: 3,
b: 4,
c: 4,
};
let obj3 = { ...obj, ...obj2, ...obj4 };
console.log(obj3);
구조분해할당을 활용한 로또 추첨기 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.lotto-box,
.lotto-box2 {
display: flex;
flex-wrap: wrap;
}
.lotto-box div,
.lotto-box2 div {
border: 6px solid;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
}
</style>
</head>
<body>
<div>Lotto</div>
<h1>로또 박스</h1>
<div class="lotto-box"></div>
<button class="lotto-btn">로또 추첨</button>
<div class="lotto-box2"></div>
</body>
<script>
let lottoBtn = document.querySelector(".lotto-btn");
let lottoNum = [];
let lottoResult = [];
function init() {
for (let i = 1; i <= 45; i++) {
lottoNum.push(i);
let _div = document.createElement("div");
_div.className = "item" + i;
_div.innerHTML = i;
document.querySelector(".lotto-box").append(_div);
}
}
init();
lottoBtn.addEventListener("click", function () {
while (lottoResult.length < 6) {
let num = Math.floor(Math.random() * 45 + 1);
if (lottoResult.indexOf(num) === -1) {
lottoResult.push(num);
let lottoItem = document.querySelector(".item" + num);
document.querySelector(".lotto-box2").append(lottoItem);
}
}
let [txt1, txt2, txt3, txt4, txt5, txt6] = lottoResult;
console.log(txt1, txt2, txt3, txt4, txt5, txt6, "당첨번호");
});
</script>
</html>
Lotto
로또 박스
728x90
'JavaScript' 카테고리의 다른 글
| [Javascript] 생성자 함수, 구조분해할당을 활용한 묵찌빠 게임 만들기 (0) | 2023.03.29 |
|---|---|
| [Javascript] 슬라이드 만들기 (0) | 2023.03.27 |
| [Javascript] cookie를 활용한 팝업창 만들기 (0) | 2023.03.27 |
| [Javascript] localstorage를 활용한 todolist 만들기 (0) | 2023.03.27 |
| [Javascript] 마우스 관련 메소드를 활용한 상자 색 옮기기 (0) | 2023.03.24 |
