[Javascript] 로또 번호 출력_실습

로또 번호 출력

당첨 번호와 번호 자동 생성기(5가지 출력) 2가지의 기능으로 당첨 번호와 자동 생성된 번호 중 일치하는 번호는 노란색으로 표시하는 프로그램이다.

어려워서 정답 코드를 보고 공부하려고 한다. 공부해서 안보고 쳐봐야지..

코드의 전체적인 구조는
1. 6자리로 된 1 ~ 45까지의 랜덤 숫자를 오름차순으로 출력하는 함수
2. 1번에서 출력된 번호와 당첨 배열의 번호를 받아 css추가하고 HTML로 출력하는 함수
3. 당첨 버튼 눌렀을 때 함수
4. 번호자동생성 버튼 눌렀을 때 함수

4가지 함수로 정리된다.

당첨버튼 눌렀을 때 번호 출력 함수를 실행시켜 HTML출력 함수에 넣어 화면 호출시키고
번호자동생성 버튼 눌렀을 때 번호 출력 함수를 실행시켜 HTML출력 함수에 넣어 화면 호출시키는 구조이다.
HTML출력 함수는 매개변수를 출력된 번호, 당첨 번호 2가지로 받아 상황에 맞게 css를 추가하든 하지 않든 한다.

노드 객체 변수 선언

const generateWinningNumbers = document.getElementById(
  'generateWinningNumbers'
);
const generateLottoNumbers = document.getElementById('generateLottoNumbers');
const winningNumContainer = document.getElementById('winningNumbers');
const lottoNumContainer = document.getElementById('lottoNumbers');

• 필요한 노드 객체 선언했다. 순서대로 당첨번호 버튼, 자동생성번호 버튼, 당첨번호 보여질 컨테이너, 자동생성번호 보여질 컨테이너이다.

번호 출력 함수

function generateNumbers() {
  let numbers = [];
  while (numbers.length < 6) {
    let number = Math.floor(Math.random() * 45) + 1;
    if (!numbers.includes(number)) {
      numbers.push(number);
    }
  }
  return numbers.sort((a, b) => a - b);
}

• 우선 번호를 담을 numbers 배열 선언
• numbers 길이가 0~5 총 6번 반복할 때까지 while문 실행
• number 변수에 1이상 46미만까지의 범위의 랜덤 숫자를 정수만 호출
• 중복된 값을 방지하기 위해 numbers에 number가 포함되지 않는 정수만 number > numbers으로 push함
• 최종 리턴값은 numbers를 오름차순한 6자리의 정수.

sort로 오름차순하는 함수는 잘 모르는 메소드라 알아보았다.
처음엔 sort()로 적용해주고 끝인 줄 알았으나 비교 함수를 넣어야한다고 한다.
비교함수를 임시로 a, b라고 잡아주고 a에서 b를 뺐을 때 0보다 작을 경우 a, b순으로 정렬되고 그 반대이면 반대로 정렬된다고 한다.

HTMl 출력 함수

function displayNumbers(numbers, winningNumbers = []) {
  const numSetElement = document.createElement('div');
  numSetElement.classList.add('number-set');

  numbers.forEach((number) => {
    const numElement = document.createElement('span');
    numElement.classList.add('number');
    if (winningNumbers.includes(number)) {
      numElement.classList.add('match');
    }
    numElement.textContent = number;
    numSetElement.appendChild(numElement);
  });

  return numSetElement;
}

• numbers, winningNumbers = [] 2가지를 매개변수로 받는 함수 선언
  (winningNumbers = []의 경우 따로 winningNumbers를 전달하지 않는 이상 빈 배열)
• 로또 번호를 담을 엘리먼트 선언 및 css 추가
• numbers인자로 받은 정수를 number이라는 임시 매개변수로 받음
• span 노드 객체 변수와 css 추가
• winningNumbers로 받은 정수와 number 정수가 겹친다면 match라는 css 적용
  (winningNumbers이 빈 배열일 경우 if문은 그대로 통과됌)
• number 임시 매개변수의 내용을 span 노드 객체의 텍스트로 사용
• 로또 번호 담을 엘리먼트에 자식으로 추가해줌
• 리턴값은 number 6자리 정수 담은 span을 담은 로또번호 담은 엘리먼트

어려웠던 함수.. 사실상 매개변수가 1개인지 2개인지에 따라 if문 비교를 통해 css가 추가될 지 안될지 정하는 것이다.

당첨번호 버튼 누르면? 함수

let winningNumbers = [];

generateWinningNumbers.addEventListener('click', () => {
  winningNumbers = generateNumbers();
  winningNumContainer.innerHTML = '';
  winningNumContainer.appendChild(displayNumbers(winningNumbers));
});

• winningNumbers 배열 선언 (당첨번호를 넣을 배열.)
• 당첨 번호 클릭한다면? 함수 선언
• 번호 출력 함수 리턴값을 winningNumbers 배열에 대입
• 당첨번호 넣을 컨테이너 비우기 (버튼 누르면 기존 번호 지워지고 바로 새로운 번호 추가하기 위함)
• 당첨번호 넣을 컨테이너에 바로 winningNumbers를 numbers 매개변수로 받은 HTMl 출력 함수의 리턴값을 넣는다.
  (당첨번호 넣었단 얘기)

번호 자동 생성 버튼 누르면? 함수

generateLottoNumbers.addEventListener('click', () => {
  if (winningNumbers.length !== 0) {
    lottoNumContainer.innerHTML = '';
    for (let i = 0; i < 5; i++) {
      const lottoNumbers = generateNumbers();
      lottoNumContainer.appendChild(
        displayNumbers(lottoNumbers, winningNumbers)
      );
    }
  } else {
    alert('당첨 번호를 먼저 생성하세요.');
  }

• 번호 자동 생성 버튼 클릭한다면? 함수 선언
• winningNumbers의 길이가 0이 아닐 경우 (당첨 번호가 있을 경우. 당첨 번호 버튼 누른 후에만 작동한다는 얘기) 자동 생성 번호 넣을 컨테이너 비우기
• 0~4 총 5번 반복문 안에 lottoNumbers 변수 안에 번호 출력 함수 5번 대입
• 자동 생성 번호 넣을 컨테이너에 HTML출력 함수에 방금 5번 출력한 lottoNumbers와 winningNumbers를 매개변수로 전달하여 받은 리턴값 자식으로 넣음
  (HTML출력 함수에서 매개변수 2가지를 모두 받았으니 match css가 추가되어 나올 것임)

1. 함수 구조를 간략히 정리한다면 전체적으로 if문 안에 싸여있다. 당첨번호 유무에 따라 자동생성번호 5개를 만들건지 alert를 띄울건지.
2. 당첨번호가 있다면 내용 비우고 반복문으로 lottoNumbers 변수에 번호를 5번 출력시킨다.
3. 출력시킨 번호들은 모두 HTML출력함수로 화면에 호출된다.

이렇게 하여 먼저 당첨번호 버튼을 눌러 당첨 번호를 출력한 뒤 자동번호생성 버튼을 눌러 5개의 자동생성된 번호(당첨번호와 일치하는 숫자는 노란색 표시)를 출력하는 프로그램이 완성됐다.

4개의 함수 블록을 만들어 필요할 때 호출하고 전달되는 매개변수의 수를 조절하여 if문으로 조절하는 로직이었다.

회고: 어려웠다.. 안보고 다시 풀어봤는데 1시간 10분 걸렸다. 가장 오래걸린 부분은 번호 자동 생성 버튼 함수 클릭한다면? 함수였다. 5번 번호를 출력시키는 부분이 어려웠고 lottoNumbers 변수에 5개의 배열이 동시에 들어간다고 착각해서 헤맸다.
동시에 들어가는게 아니라 5개가 순서대로 촤촥 만들어지고 빠지고 하는거였는데!

HTML함수의 매개변수 2가지 받는 부분이 이해하기 시간이 좀 걸렸다. 복잡하게 느껴지는 코드가 사실 4개의 함수를 적절히 연결하여 사용하는 로직이었다고 생각하니 정리가 되는 느낌이다.
앞으로 복잡하게 느껴지는 기능이더라도 천천히 1개 혹은 2개씩의 기능을 가진 함수로 만들어 정리하면 코드 짜기 쉬워질 것 같다.