시간 무조건 두자리 표시 - padStart()

🟠 결론 코드

const clock = document.querySelector("h2#clock");

function getClock() {
    const date = new Date();
    const hours = String(date.getHours()).padStart(2, "0");
    const minutes = String(date.getMinutes()).padStart(2, "0");
    const seconds = String(date.getSeconds()).padStart(2, "0");
    clock.innerText = `${hours}:${minutes}:${seconds}`;
}

// 이걸 해 주는 이유는 시간이 바로 보여지게 하기 위해서.
getClock();
setInterval(getClock, 1000);
// setTimeout(getClock, 5000);  // 5초 뒤 getClock()함수 한 번 실행 됨

🟠 padStart(표현할 자릿수, 채울 문자)

1 -> 01
2 -> 02
3 -> 03
.
.
.
10 -> 10
이런색으로 표현하고 싶을 경우
padStart()라는 함수를 사용해 쉽게 표현이 가능하다.
(padStart()는 문자열에서 사용 가능한 함수)

"1".padStart(2, "0");	// 결과: '01'

👉 "1"이라는 문자를 만나면 꼭 2자리게 되게 표현하고 싶은데요 그 앞에는 0으로 채워주세요. 라는 의미

"10".padStart(2, "0");	// 결과: '10'

👉 10이라는 문자는 기본적으로 2자리 수이기 때문에 0이 따로 붙지 않음.

"coco".padStart(10, "test");	// 결과: 'testtecoco'

👉 이렇게도 활용 가능