TIL 24.11.10

📍 문제

로또 번호 생성기

버튼을 클릭하면 1 ~ 45의 랜덤한 숫자가 6개 선택이 되도록 해주세요.

✨ 완성된 화면

기본 html, css 코드 제공 받음

🥔 내 코드

1차 시도 ❌

문제점: 숫자 중복 제거 로직이 빠져있음

function pickNumber() {
  // console.log("눌림");
  const liEls = document.querySelectorAll('#lucky-numbers > li');

  let lottoNumber = () => Math.floor(Math.random() * 45) + 1;

  liEls.forEach((li) => {
    li.textContent = `${lottoNumber()}`;
  });
}

2차 시도 ✅

function pickNumber() {
  // console.log("눌림");
  const liEls = document.querySelectorAll('#lucky-numbers > li');

  let randomNumber = () => Math.floor(Math.random() * 45) + 1;

  const lottoNumber = new Set();
  while (lottoNumber.size < 6) {
    lottoNumber.add(randomNumber());
  }
  const lottoNumberArr = [...lottoNumber];
  // console.log(lottoNumberArr);

  liEls.forEach((li) => {
    li.textContent = `${lottoNumberArr.pop()}`;
  });
}

✅ 풀이 과정

1. DOM 요소 선택: 'querySelectorAll'을 사용하여 로또 번호를 표시할 모든 'li' 요소 선택
2. 랜덤 숫자 생성 함수: 'randomNumber' 화살표 함수로 1부터 45 사이의 랜덤 숫자 생성
3. 중복 없는 숫자 생성: 'Set' 객체를 사용하여 중복 없는 6개의 숫자 생성
4. 배열로 변환: 'spread' 연산자를 사용하여 Set을 배열로 변환
5. 번호 할당: 'forEach' 루프를 사용하여 각 'li' 요소에 생성된 번호 할당
6. 'pop' 메서드 사용: 배열의 마지막 요소부터 차례로 가져와 번호 할당

💬 마치며

생각보다 너무 술술 풀렸는데 중복숫자라는 함정이 있었다. Set 객체 처음 사용해 보는데 앞으로도 유용하게 잘 쓸 듯 싶다!