JS-12 로또 번호 생성기-2 (22/11/14)

(지난 포스트의 이슈 해결하기)

[목차]
1. 중복값 없이 로또 번호 추출하기
2. 숫자 정렬하기

1. 중복값 없이 로또 번호 추출하기

랜덤으로 뽑은 숫자가 이미 뽑은 숫자와 같은지 체크하는 것은 까다롭다.
(indexOf, linearSearch...)

뽑을 숫자가 애초에 중복되지 않도록 설정하는 것이 더 쉬울지도?

이를 위해선 뽑을 숫자 = 배열의 인덱스가 되도록 만들어서
숫자를 뽑을 때마다 그 배열을 제거하는 코드를 짜야한다.

let lotto = []
let lottoArr = []
for (let i = 0; i<45; i++) {
    lottoArr.push(i+1)
}

// let index = Math.floor(Math.random() * 45) // 0~44
// // result : 33

let index = Math.floor(Math.random() * lottoArr.length) 
// 0~43
// 배열 = 로또숫자


//lottoArr[33]
lotto.push(lottoArr[index])
lottoArr.splice(index,1) // 0~43. 뽑아낼 값과 인덱스는 별개...

let index2 = Math.floor(Math.random() * lottoArr.length) // 0~43

lotto.push(lottoArr[index2])
lottoArr.splice(index2, 1)
// 뽑아낸 인덱스값을 바로 날려버린다

console.log(lottoArr)
console.log(lotto)


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

이 형태를 6번 반복하면 중복값이 생기는 것을 방지할 수 있다.

↓ 반복문으로 축약

for (let i =0; i<6; i++) {
    let index = Math.floor(Math.random() * lottoArr.length)
    lotto.push(lottoArr[index])
    lottoArr.splice(index,1)
}

console.log(lottoArr)
console.log(lotto)

const serviceNumber = lotto[lotto.length -1]

2. 순서대로 정렬하기

[19, 15, 14 ,26 ,36 ,7, 44]

하나의 숫자를 정렬하는데도 생각보다 많은 연산과정이 필요하다

Array.prototype.sort()

sort() 메서드를 쓰는 것은 간단하지만,
그 이전에 정렬의 원리를 알고 납득하는 것이 중요!

javascript 정렬 알고리즘 중 버블정렬 알고리즘을 구현해보자

버블 정렬 알고리즘

[19, 15, 14 ,26 ,36 ,7, 44]

1) A < B. 후자가 크면 true. false일 경우 두 수의 자리를 바꾼다.

2) 19 < 15. false이므로 [15, 19]
3) 19 < 14. false이므로 [14, 19]
4) 19 < 26. true이므로 제자리에.
5) 26 < 36. true
6) 36 < 7. false이므로 [7, 36]
7) 36 < 44. true
8) > [15, 14, 19, 26, 7, 36, 44]

이 사이클을 6번(arr.length-1) 반복하면 정렬이 끝난다.

[5, 3, 1, 6, 8 ,7, 2, 4]

위 배열을 순서대로 정렬하는 코드 구성하기

/**
0 1
1 2
2 3
3 4
4 5
5 6
6 7

0 1
1 2
2 3
3 4
4 5
5 6

0 1
1 2
2 3
3 4
4 5

0 1
1 2
2 3
3 4

0 1
1 2
2 3

0 1
1 2

0 1
*/


const sortArr = [5, 3, 1, 6, 8 ,7, 2, 4]

// 7번 반복해야 하므로 length-1
for (i=0; i<sortArr.length-1; i++) {
    // console.log(i , i+1)
    console.log(sortArr[i], sortArr[i+1])
}

/**
>
  5 3
  3 1
  1 6
  6 8
  8 7
  7 2
  2 4
*/

만약 2단은 x9, 3단은 x8, 4단은 x7...
9단은 x2에서 종료되는 구구단을 만들어보자

for(let i=2; i<=9; i++) {
    for(let j=1; j<=9-(i-2); j++) {
        console.log(i + "*" + j + "=" + i*j)
    }
    console.log("====")
}

버블정렬도 위와 같은 2중 for문 구조를 가진다

const sortArr = [5, 3, 1, 6, 8 ,7, 2, 4]
for (i=0; i<sortArr.length-1; i++) {
    for (let j=0; j < sortArr.length -1-i; j++) {
        console.log(i,j + 1)
    }
    console.log("=========")
}

비교의 사이클은 구현되었다.
이제 값을 비교하면서 위치를 바꾸는 if문 구조를 만들려면?

j가 하는 역할은 비교대상 A, j+i이 하는 역할은 비교대상 B가 되어야 한다.
(j는 5, j+1은 3)

• [5, 3, 4]의 배열을 [3, 5, 4]로 정렬하기

const arr2 = [5, 3, 4]

let temp = arr2[0] 
// temp: 5 (5를 temp라는 변수에 잠시 담아둔다)
arr2[0] = arr2[1]   // > [3, 3, 4] (5라는 요소 삭제)
arr2[1] = temp // > [3, 5, 4]

console.log(arr2)
// > [3, 5, 4]

이제 위 코드를 반복문에 집어넣으면 된다.

const sortArr = [5, 3, 1, 6, 8 ,7, 2, 4]
for (i=0; i<sortArr.length-1; i++) {
    for (let j=0; j < sortArr.length -1-i; j++) {
        let temp // 효율을 위해 변수 선언은 if문 위로 당김
        if (sortArr[j] > sortArr[j+1]) {
            temp = sortArr[j]
            sortArr[j] = sortArr[j+1] 
            // > [3, 3, 1, 6, 8 ,7 , 2, 4]
            sortArr[j+1] = temp
            // > [3, 5, 1, 6, 8 ,7 , 2, 4]
        }
    }
    console.log(i, sortArr)
    console.log("=========")
}

/**
0 (8) [3, 1, 5, 6, 7, 2, 4, 8]
=========
8) [1, 3, 5, 6, 2, 4, 7, 8]
=========
(8) [1, 3, 5, 2, 4, 6, 7, 8]
=========
(8) [1, 3, 2, 4, 5, 6, 7, 8]
=========
(8) [1, 2, 3, 4, 5, 6, 7, 8]
=========
(8) [1, 2, 3, 4, 5, 6, 7, 8]
=========
(8) [1, 2, 3, 4, 5, 6, 7, 8]
=========
*/

이것으로 버블정렬 완성.

but 버블정렬의 문제점은 과정 도중에 정렬이 끝나도
반복문이 끝날 때까지 계속 정렬식이 돌아간다는 것...

↓ 아래는 완성 코드

// [js]

const btn = document.querySelector("#btn");


function lottoHandler(e) {
  for (let i = 0; i < 6; i++) {
    const num = randomLotto();
    const className = getClassName(num);

    lottoBox[i].innerHTML = num;
    lottoBox[i].className = className;
  }
  lottoDisplay.classList.remove("none");
}

let lotto = [];
let lottoArr = [];
let index;
let arrNumber;
function Handler() {
  lotto = [];
  lottoArr = [];
  for (let i = 0; i < 45; i++) {
    lottoArr.push(i + 1);
  }

  for (let i = 0; i < 6; i++) {
    index = Math.floor(Math.random() * lottoArr.length);
    lotto.push(lottoArr[index]);
    lottoArr.splice(index, 1);
  }
  console.log(lottoArr);
  // > [1, 2, 3, 4, 5, 6, 8, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 32, 33, 34, 36, 37, 38, 39, 40, 42, 43, 45]
  console.log(lotto);
  // > [31, 7, 44, 9, 41, 35]
  

  arrNumber = lotto[lotto.length - 1];

  for (i = 0; i < lotto.length - 1; i++) {
    for (let j = 0; j < lotto.length - 1 - i; j++) {
      let temp;
      if (lotto[j] > lotto[j + 1]) {
        temp = lotto[j];
        lotto[j] = lotto[j + 1];
        lotto[j + 1] = temp;
      }
    }
  }
  console.log(lotto);
  // > [7, 9, 31, 35, 41, 44]
}






btn.addEventListener("click", Handler);