인프런 커뮤니티 질문&답변

강의를 듣다가 이해되지 않는 부분이 생겨 질문드립니다.

$screen.addEventListener('click', (event) => {
            if (event.target.classList.contains('waiting')) {
                event.target.classList.replace('waiting','ready');
                event.target.textContent='초록색이 나오면 클릭하세요';
                setTimeout(function(){
                    event.target.classList.replace('ready','now');
                    evnet.target.textContent='클릭하세요!';
                    startTime=new Date(); //startTime===undefined
                },Math.floor(Math.random()*1000)+2000);
            } else if (event.target.classList.contains('ready')) {
                alert('너무 빨리 클릭했습니다.');
                event.target.classList.replace('ready','waiting');
                event.target.textContent='클릭해서 시작하세요';
            } else if (event.target.classList.contains('now')) {
                //끝 시간 재기
                endTime=new Date();
                $result.textContent=`${startTime} ms`;
                event.target.classList.replace('now','waiting');
                event.target.textContent='클릭해서 시작하세요';
            }
        });

제가 작성한 반응속도 게임 만들기의 addEventListener부분입니다. 해당 코드의 변수 startTime에 Date가 할당되는 시기가 이벤트타겟의 값이 now로 변경되는 시기보다 뒤에 오게되면 undefined가 할당됩니다. 아래의 코드는 startTime의 값이 undefined가 아닌 제대로 된 날짜가 저장되도록 수정한 코드입니다.

위 코드의 startTime 이 undefined가 되는 이유를 알려주세요.

setTimeout(function(){
                    startTime=new Date(); //startTime===`Thu Oct 13 2022 18:13:10 GMT+0900 (한국 표준시)`
                    event.target.classList.replace('ready','now');
                    evnet.target.textContent='클릭하세요!'; 
                },Math.floor(Math.random()*1000)+2000);