자바스크립트 문제 풀기 (set(),펼침연산자,forEach) 로또 번호만들기
set() 함수를 이용하여 로또 번호 랜덤만들기를 해봤습니다.
문제 1
자바스크립트를 사용해서 자동으로 복권 번호를 생성해 주는 프로그램을 작성하세요.
번호는 중복되면 안되므로 Set() 함수를 이용 하고, 숫자는 1~45 범위안, 6개의 숫자를 무작위 추출
<!DOCTYPE html>
<html lang="ko">
<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>
* {
padding: 0;
margin: 0;
}
#wrap {
width: 500px;
height: 300px;
text-align: center;
padding-top: 30px;
background-color: #d3fffe;
}
#wrap h2 {
margin-bottom: 20px;
}
#wrap button {
width: 100px;
height: 50px;
border-radius: 15px;
background-color: #e8e8e8;
margin-bottom: 40px;
transition: all 0.3s;
cursor: pointer;
}
#wrap button:hover {
background-color: #919191;
}
.number {
display: flex;
justify-content: center;
}
.number * {
width: 40px;
font-weight: bold;
font-size: 24px;
}
</style>
</head>
<body>
<div id="wrap">
<h2>로또 번호 생성기</h2>
<button>생성</button>
<div class="number">
<div class="num"></div>
<div class="num"></div>
<div class="num"></div>
<div class="num"></div>
<div class="num"></div>
<div class="num"></div>
</div>
</div>
</body>
<script>
//선택자
const num = document.querySelectorAll(".num");
const button = document.querySelector("#wrap button");
//중복을 없애주는 Set() 함수
const number = new Set();
button.addEventListener("click",()=> {
number.clear(); //버튼을 누르면 객체를 초기화 시키고 시작(초기화 안할시 버튼을 눌러도 숫자고정)
while(number.size < 6){ //set() 요소가 6개 꽉찰때까지 중복없이 숫자추가
let random = Math.ceil(Math.random() * 45);
number.add(random); //.add (객체에 요소추가)
}
const arrNumber = [...number]; //펼침연산자를 이용해 배열에 넣기
arrNumber.forEach((values, i)=>{ //forEach를 이용하여 배열의 요소만큼 반복돌리기
num[i].innerText = values+", "; //innerText를 이용해 출력하기
});
});
</script>
</html>document.querySelectorAll(".num")은 HTML 문서 내에 클래스 이름이 "num"인 모든 요소를 선택합니다. 이렇게 선택된 요소들은 num이라는 이름으로 배열 형태로 저장됩니다.
document.querySelector("#wrap button")은 HTML 문서 내에 id가 "wrap"인 요소 내에서 button 요소를 선택합니다. 이렇게 선택된 요소는 button이라는 이름으로 저장됩니다.
//중복을 없애주는 Set() 함수
const number = new Set();중복을 제거하는 Set() 함수를 사용하여 number 객체를 생성합니다.
Set() 함수는 객체 내의 요소들이 중복되지 않는 유일한 값으로만 구성되어 있다는 것을 보장합니다. 따라서 number 객체는 중복되지 않는 6개의 숫자를 담게 됩니다.
button.addEventListener("click",()=> {
number.clear(); //버튼을 누르면 객체를 초기화 시키고 시작(초기화 안할시 버튼을 눌러도 숫자고정)
// ...
});button 요소를 클릭할 때마다 실행됩니다. 즉, 사용자가 버튼을 클릭할 때마다 로또 번호가 생성됩니다.
Set.clear() 메소드는 Set 객체에서 모든 요소를 제거합니다.
버튼을 클릭할 때마다 number 객체를 초기화합니다.
while(number.size < 6){ //set() 요소가 6개 꽉찰때까지 중복없이 숫자추가
let random = Math.ceil(Math.random() * 45);
number.add(random); //.add (객체에 요소추가)
}Math.random() 함수는 0부터 1사이의 난수를 반환합니다. 따라서 이 함수를 이용하여 1부터 45사이의 난수를 생성할 수 있습니다. Math.ceil() 함수는 올림을 수행합니다. 즉, 0과 1 사이의 값은 1, 1과 2 사이의 값은 2, ..., 44와 45 사이의 값은 45가 됩니다.
const arrNumber = [...number]; //펼침연산자를 이용해 배열에 넣기
arrNumber.forEach((values, i)=>{ //forEach를 이용하여 배열의 요소만큼 반복돌리기
num[i].innerText = values+", "; //innerText를 이용해 출력하기
});number.add(random)은 number 객체에 random 값을 추가합니다. 이때, Set 객체는 중복되는 값을 허용하지 않기 때문에 중복되지 않는 값을 추가합니다.
[...] 구문은 spread 구문이라고 불리며, 배열이나 객체 등의 iterable 객체를 하나씩 분해하여 새로운 배열이나 객체를 생성할 때 유용합니다.
forEach() 함수는 배열의 각 요소마다 지정된 함수를 실행합니다. 여기서는 num 배열의 요소마다 값을 출력하는 함수를 실행합니다.