디지털 시계 만들기 질문 드립니다.

Question

강의를 듣고 먼저 배운대로 new 연산과 Date 객체, setInterval 메소드를 활용해서 현재 시간을 반영한 디지털 시계를 만드는 코드를 짜봤는데요. 제 생각으로는 변수 안에 new 연산이 있으니, setInterval로 1초 마다 getTime 함수가 실행될 때마다, new 연산을 하는 변수 hour, min, sec가 실행되어서 1초마다 다시 연산을 해서 현재 시간을 업데이트해 줄 것으로 예상했는데, 실시간으로 업데이트가 안되더라구요. (멈춰있음) 그래서, hour, min, sec 변수 선언들을 getTime 함수 안에 넣어서 실행했더니 실시간으로 1초마다 시간이 반영이 되었습니다. 똑같은 변수인데, 함수 밖에 있는 것과 안에 있는 것이(전역변수인지 아닌 지에 따라) 차이가 있는건가요?

배하람 · Answer

먼저, setInterval 로 1초마다 getTime 을 실행하려고 하시는데, 이 때 1번째 케이스의 경우는 hour , min , sec 변수가 이미 할당된 상태에서 이미 할당된 변수를 기준으로 실행하게 됩니다. 이런 문제 때문에 처음의 시도로 의도하지 않은 문제가 발생한 것입니다. 2번째 케이스의 경우는 매번 Date 객체를 사용하기 때문에 의도한 동작대로 getTime 이 실행되면서 원하는 문자열을 뽑아낼 수 있게 됩니다. 더 정확한 해결 법은 매번 new Date() 를 실행하지 않고 const date = new Date() 로 한번 뽑아낸다음 date.getHours() 로 사용하는 것입니다. 이래야 정확한 값이 매번 바뀌지 않기 때문이죠.