Refactoring ) Vanilla JS - lotto

jeongdopark·2021년 7월 29일
0
  • set() 사용하면서 array에 담을 때 , set과 배열

  • 함수 내부에 있는 변수를 외부에서 사용해야할 때

  • array.from을 통해서 유사배열을 배열로 재정의하고 배열 메서드 사용가능
    querySelectorAll을 사용하면 유사배열로 접근이 된다.
    forEach는 사용이 가능하지만 map,filter 메소드는 사용이 안된다.
    map 메소드를 사용하기 위해서 배열로 변환시켜주는 작업 array.from
export const clickShowResultBtn = () => {
    $OPEN_RESULT_MODAL.addEventListener('click', () => {
        
        let $$COPY_WINNING_NUMBER_INPUT_BOX = Array.from($$WINNING_NUMBER_INPUT_BOX) //array.from 유사배열을 배열로 만들어주기
        
        const GET_WINNING_NUMBER = $$COPY_WINNING_NUMBER_INPUT_BOX.map(x => Number(x.value))
        BONUS_NUMBER.push(Number($BONUS_NUMBER_INPUT_BOX.value))
        WINNING_NUMBER.push(GET_WINNING_NUMBER)

        clickToOpenResultModal()
        compareNumber()
    })
}



selector , classListAdd 함수화?

$ = selector => (document.querySelector(selector))
selector 함수를 지정하여 간편화 ? 

const classListAdd = (target, className) =>{
    return target.classList.add(className)
}

classListAdd 함수로 만들어서 간편화, (HIDE, SHOW)

set을 사용하여 중복 없이 유사배열 생성

spread operator(전개 연산자)를 사용하여 배열로 전환


export class AutoLottoNumber{
    construcotr(){
    }
    getLottoNumberArray(){
        const sixNumber = new Set()   ***
            
        while(sixNumber.size < SIX_NUMBER){
            sixNumber.add(getRandomNumber(MIN_NUMBER, MAX_NUMBER))
        }
        return sixNumber // 중복 안되는 숫자 랜덤 6개 set을 이용하여 코딩
    }
    addArray(){
        for(let i = 0; i < ticketCount($MONEY_INPUT.value); i++){
            const setToArray = [...this.getLottoNumberArray()]  *** 
            EVERY_ARRAY.push(setToArray)
        }	
        return EVERY_ARRAY // 전체가 담겨있는 배열 티켓 개수만큼 배열 개수
    }
}

Question

TicketUI와 각 Ticket마다 번호를 부여할때 forEach말고 다른 방법

함수 내부에 변수 인식 X (scope?)

0개의 댓글