JavaScript 입문 : 로또추첨기 - 무작위 섞기 1단계 (배열로 공 45개 준비)

이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. 

 

지금부터는 로또추첨기를 만들기 위해 순서도상 45개의 공을 무작위 섞는 내용에 대해 공부를 해 보로록 하겠습니다. 우선 로또추첨기에 베이스가 되는 HTML을 만들어 놓을 필요가 있고 공에 대한 기본적 틀만 CSS로 만들어 놓는 과정을 하겠습니다. 

 

순서도를 조금 추가하면 다음과 같습니다. 

 

1. 기본이 되는 HTML과 기본 공모양 CSS

 

VS Code에서 작성하면 다음과 같을 수 있습니다.

기본 HTML

 

상기 기본 공모양 CSS를 만들어 놓고 향후 자바스크립트로 CSS를 연결시키는 공부를 할 예정입니다. 아울러, 강좌에서는 없지만 로또추첨기에서 뽑혀진 공들에게 애니메이션을 입혀 보도록 하겠습니다. 

 

2. 45개 숫자 무작위 섞기 (피셔 예이츠 셔플, Fisher-Yates Shuffle)

 

① 45개 숫자 준비

 

로또추첨기에서 무작위 번호를 추출하기 위해서는 모집단이 필요합니다. 모집단의 수는 1부터 45번까지의 정수로 이루어져 있구요. 배열과 fill(), map(e, i)를 이용합니다. 물론 for문을 이용할 수도 있을겁니다. 

 

fill( )메소드와 map( )메소드에 대한 정리는 아래 글을 참조하여 주기 바랍니다.

2022.04.15 - [컴퓨터 알아가기/JavaScript] - javaScript 입문 : fill( )함수 메소드

javaScript 입문 : fill( )함수 메소드

2022.04.14 - [컴퓨터 알아가기/JavaScript] - JavaScript 입문 : map( ) 함수 메소드

JavaScript 입문 : map( ) 함수 메소드

 

그럼 fill( ) 메소드와 map( ) 메소드를 이용하여 1 ~ 45번까지 배열로 나타내고 변수에 저장하도록 하겠습니다. 

 

▶ Array(45).fill( );

 

배열 45개를 undefined로 45개가 나열됩니다. 여기서 Array(45)는 0부터 44까지입니다. 

▶ Array(45).fill( ).map((e, i) => i + 1);

 

45개 만들어진 배열의 index에 1을 더하면 1부터 45번까지의 번호가 생성이 됩니다. 

 

▶ 변수 저장 

 

45개 숫자가 준비가 되었으니 변수에 저장을 합니다. 향후 이 숫자들이 추첨되면서 공(Ball)과 연계시켜 화면에는 번호가 새겨진 공이 출력하는 원리로 생각하면 되겠습니다.