JS 로또뽑기 만들기

JS 로또뽑기 만들기

JS로 간단한 프로젝트 만들기 2탄. IT 도서라고 해도 의외로 좀 단순무식한 코드들이 들어있는 경우가 많은데 이건 리팩토링하는 방법도 알려주고 정말 괜찮은 책인것같다. 설명이 상세해서 후루룩 따라하기도 좋고... 하드코딩을 참을수 없어하는 저자의 집념(?)이 돋보이는듯. 책 추천합니다.

(1) 리스트로 로또상자 만들기

물론 로또도 엄밀히 생각하면 일종의 랜덤뽑기이므로 단순히 Math.random()을 이용하여 여섯번 연속하여 공을 뽑는것 또한 한 방법이다. 하지만 포인트는 로또 공은 '중복되지 않는 여섯개의 값'이라는 것이다. 공을 하나 뽑을때마다 그 이전 공들과 같은 값인지를 비교하는 로직은 지나치게 비효율적이다. 따라서 실제 로또 번호 추첨처럼 리스트에 뽑을 값들을 담아놓고 한개씩 뽑아내는 방식이 훨씬 효율이 좋다.

빈 배열을 하나 선언하고 for문으로 나올 수 있는 값들을 쭉 넣어준다.

(2) 랜덤하게 공 뽑기

뽑을 공의 번호를 담당할 index변수를 선언하고 Math.random() 함수로 뽑을 공의 번호를 골라준다. 소수점 이하 부분은 필요치 않으므로 Math.floor()함수로 쓸모없는 부분을 버려준다.

(+) array.length 에 관하여

여태 length를 늘 길이 구하는 용도로만 사용해서 read-only 속성으로 알고있었는데 원하는 값을 설정할 수도 있다고 한다. 예를 들어. array.length = 0으로 지정하면 배열이 초기화된다. 반대로 현재 배열의 길이보다 length값을 더 크게 설정하면 배열의 크기가 늘어나며 남은 인덱스들이 undefined로 채워진다고 한다.

한번 뽑은 공이 다시 나와서는 안되므로 splice 메소드를 이용하여 index에 해당하는 공을 뽑아준다. splice의 리턴값은 Array 타입이라고 하는데 굳이 뽑힌 공 리스트를 이차원배열로 만들 이유는 없으니 그냥 평범하게 index값을 넣어준다.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

for문으로 로또 배열에 공 집어넣기 + 공 빼내기를 여섯차례 반복하고 시험삼아 콘솔에 한차례 찍어본다.

잘나옴

(3) GUI 추가하기

로또는 뽑은 공만 보여주면 되는 간단한 형식이므로 그냥 document.write를 이용해 화면에 직접 요소들을 찍는다.

span태그로 결과값을 감싸준다

이제 스타일만 적용해주면 됨

적당한 CSS코드를 작성해주면 공 모양 만들기 완성.

(4) 공 오름차순 정렬하기

상식적으로 생각했을때 sort 함수를 실행하면 바로 공이 정렬되어야 할 것 같지만 그렇지가 않다. sort()는 정렬을 수행하기 전 모든 요소들을 String으로 변환하기 때문이다.

숫자가 큰 것이 아니라 맨 앞 숫자가 큰 것 순서로 정렬되었다

참고도서:

[자바스크립트 프론트엔드 프로젝트 가이드]

from http://hardblackpencil.tistory.com/44 by ccl(A) rewrite - 2021-09-20 23:27:50