로또추첨기 | ZeroCho

🤑 JavaScript  |  로또추첨기 미니 게임 만들기

 

 

1. 0~45까지의 숫자가 있는 배열 만들기

 

let 후보 = Array(45);

// 후보
// [empty × 45]

 

( ) 괄호를 사용하여 45개의 빈 공간(empty)이 있는 배열을 만들어준다.

empty는 반복문이 불가하다.

보통 이런 방법은 잘 사용하지 않는다.

 

fill( );

 

let 필 = 후보군.fill();
// 필
// (45) [undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined]

 

- fill( ) 메서드는 배열의 시작 인덱스부터 끝 인덱스의 이전까지 정적인 값 하나로 채운다.

 

 

 

forEach문을 사용하여 배열전체에 함수를 돌려준다.

 

필.forEach(function(요소, 인덱스){
  console.log(요소, 인덱스);
})

//undefined undefined 1 undefined 2 ...

 

 

🔺 인덱스+1로 숫자를 넣을 수 있지만 더 좋은 방법이 있다. (억지스러운..? 방법이라고 하심)

 

필.forEach(function(요소, 인덱스){
   필[인덱스] = 인덱스 + 1;
})

//(45) [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45]

 

🔴 map 활용하기

 

let 맵 = 필.map(function(인덱스){
  return 인덱스 + 1
})

//맵
//
(45) [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45]

 

 

👍 합쳐서 변수 하나로 사용하기

 

let 후보군 = Array(45)
  .fill()
  .map(function(요소, 인덱스){
    return 인덱스 + 1
});

//(45) [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45]

 

(실습시, map 콜백함수 첫번째 인자 요소를 빼고 인덱스만 넣어서 출력해보니 NAN 오류가 생겼다. 요소, 인덱스 모두 작성해야 오류가 생기지 않음)

 

---

Array.map(callback function(currentValue, index, array), this{ });

 

map 메서드의 첫번째 인자,

callback function 에는 배열의 각 원소 currentValue 와 생략가능한 해당 원소의 index, 전체배열 array

map 메서드의 두 번째 인자,

this 는 callback 함수를 실행할 때 this로 들어오는 값을 지정하는 것입니다. 생략 가능하며, 기본 값은 Window객체이다.

 

---

 

2. 6개의 랜덤 숫자 뽑기

 

for문을 쓸때, while을 쓸때 

for문 정확하게 몇번 반복문을 돌아야되는지 알때, 기준값이 바뀌지 않을 때while문 정확하게 몇번 반복문을 돌아야되는지 모를 때, 기준값이 자꾸 바뀔때

 

let 셔플 = [];
while (후보군.length > 0) {
  let 이동값 = 후보군.splice(Math.floor(Math.random() * 후보군.length), 1)[0];
  셔플.push(이동값);
}
console.log(셔플);

//(45) [31, 42, 30, 24, 17, 10, 11, 21, 13, 2, 7, 15, 35, 38, 18, 14, 3, 26, 4, 23, 41, 44, 32, 27, 12, 43, 34, 45, 20, 28, 36, 9, 16, 33, 37, 1, 25, 8, 29, 39, 40, 19, 5, 6, 22]

 

로또 추첨기는 while문을 사용하는게 적합하다. 랜덤으로 숫자를 뽑아서 배열에 push할것이기 때문에 기준값이 자꾸 바뀌기 때문.

 

Math.random은 엄밀하게 수학적으로 완전한 랜덤 숫자가 아니다

 

---

splice(인덱스, 제거 할 요소의 개수, 추가할 요소);

 

slice (인덱스, 인덱스);

- 몇 ~ 몇 까지 배열 자르기

---

 

3. 당첨숫자, 보너스 숫자 뽑기

 

 

let 당첨숫자 = 셔플.slice(0, 6);

let 보너스 = 셔플[셔플.length - 1];

console.log("당첨숫자",당첨숫자.sort(function (p, c) {return p - c;}),"보너스",보너스);

//당첨숫자 (6) [7, 17, 25, 28, 36, 44] 보너스 27

 

- index 0~6 까지 임의로 뽑은 숫자이다. 숫자는 어떤걸 넣어도 상관없음

- 보너스 숫자도 마찬가지로 임의로 배열의 가장 마지막 숫자를 뽑은 것

 

---

sort 제대로 사용하기 (오름차순)

 

sort(function (p, c) {return p - c;})

---

 

+) 

1. setTimeOut 사용하여 1초마다 숫자가 출력되는 비동기함수 만들기

(반복문안에서 비동기함수 사용시 클로저개념 - 추후 공부해서 추가 예정)

 

2. Html에서는 class,  JavaScript에서는 classname이다.