Cộng đồng Hỏi & Đáp của Inflearn

// 요소 선택 및 상수 선언 
let lottoEl = document.querySelector('.lotto');
let numbersDiv = lottoEl.querySelector('.numbers');
let drawButton = lottoEl.querySelector('#draw');// 추첨
let resetButton = lottoEl.querySelector('#reset');// 다시

let lottoNumbers = []; // 6개의 추첨 번호가 들어갈 배열
let colors = ['#d44052','#F5A623','#F5E123','#7ED321','#4A90E2','#4A53E2'];

let paintNumber = (num) => {
    let eachNumDiv = document.createElement('div');
    let colorIndex = Math.floor(num/10);
    eachNumDiv.classList.add('eachnum');
    eachNumDiv.style.backgroundColor = colors[colorIndex];
    numbersDiv.appendChild(eachNumDiv);
}

function drawNum(){
    // ran 변수가 여기 위치에 위치하면 자꾸 무한루프에 빠짐 ;ㅁ; 
//무한루프 발생 주의 
    let ran = Math.floor(Math.random()*44)+1;
    
    while(lottoNumbers.length < 6) { 
        //let ran = Math.floor(Math.random()*44)+1;
        if(lottoNumbers.indexOf(ran) === -1){
            lottoNumbers.push(ran);
            paintNumber(ran);
        }
    }
}
function clearNum(){
    lottoNumbers.splice(0,6);
    numbersDiv.innerHTML = '';
}

drawButton.addEventListener('click', drawNum);
resetButton.addEventListener('click', clearNum);

예제코드 무한루프 코드 입니다. 실행 시 무한 루프 발생합니다.

과제 하던 중 무한루프를 만났습니다.

이 경우 변수가 밖에 있으면서 while의 조건문이 충족되지 못해서 무한 루프가 만들어지는 경우가 맞을까요?