JS - sort 메서드 / 로또번호 생성하기

오늘은 예전에 만들어둔 싸이월드 사이트를 새로 만드는 복습을 하다가,

전에는 완성하지 못했던 로또번호 생성기를 완벽히 만들어보기로 했다.

해야 할 것

• 중복 없는 랜덤 번호 생성하기
• 오름 차순 정렬하기
• HTML 에 띄우기

중복 없는 랜덤 번호 생성

const lottoArr = []

    function lottoRender () {
        for(let i = 0 ; i < 6 ; i++){
            const lottoNum = Math.floor((Math.random()*45)+1)
            if(lottoArr.includes(lottoNum) == false){
                lottoArr.push(lottoNum)
            } else {
                console.log("중복값 생성되었음")
                i--
            }
        }
    }
    lottoRender()

먼저 로또번호를 생성하는 과정은 이렇다.

6개를 생성하기 때문에, 반복문 조건식은 i<6 이며, 1~45 사이의 수를 생성하는 함수를 변수 lottoNum에 할당했다.

이후, 생성한 번호가 이미 배열에 존재하지 않는다면 lottoArr 라는 빈 배열에 넣어주고,

생성한 번호가 배열 내에 이미 존재한다면 배열에 추가해주는 과정없이 i를 -1 하여 6개를 모두 만들게 한다.

 

오름 차순으로 정렬하기

lottoArr.sort(function(a,b) {
        return a-b;
    })

그리고 위와 같이 오름 차순으로 정렬하게 되는데, 새로 써보게 된 sort 메서드에 대해 가볍게 기록한다.

sort (오름 차순과 내림 차순)

우선, sort 메서드는 정렬에 관련된 함수이다.

return 으로 반환된 값이 음수라면 a가 b보다 앞에 있게 되고,

return 으로 반환된 값이 양수라면 b가 a보다 앞에 있게 된다.

exArr = [2, 3, 1]

exArr.sort(function(a,b) {
	return a-b
}
// 라는 코드가 있다고 한다면
// 2 - 3 < 0 으로 음수이기 때문에, 2는 3보다 앞.
// 2 - 1 > 0 으로 양수이기 때문에, 1은 2보다 앞.
// 3 - 1 > 0 으로 양수이기 때문에, 1은 3보다 앞.
// exArr == [1, 2, 3]

반대로 내림 차순의 경우, return b-a 라고 입력해주면 된다.

HTML 에 띄우기

const lottoOutput = document.querySelector('#lotto_output')
const lottoStr = lottoArr.toString()
const result = lottoStr.replaceAll(",","  ")
    
lottoOutput.textContent = result

마지막 HTML 에 띄우는 과정에는 몇가지 과정이 필요했다.

배열을 직접 HTML에 넣게 되면, 배열 내 값들 사이에 존재하는 ',' 반점까지 자연스레 입력되기 때문에

사용자들이 보기 편하게 하기 위해선 이를 문자열화하고 반점을 제거해줄 필요가 있었다.

때문에 toString 을 활용하여 해당 배열을 문자열화하였고,

이전에도 활용했었던 replaceAll을 통해 반점을 공백으로 대체했다.

그리고 끝.