[TIL] 클린코드- Day11_2022.01.31

Day11

📔 미션 : 코드 고쳐보기

고치기 전에 코드.

const merry = document.querySelector(".js-clock");

function getClock() {
const christmas = new Date("2021, 12, 25");
const date = new Date();
const timeGap = christmas - date;

const xDay = Math.floor(timeGap / (1000 * 60 * 60 * 24));
const xHours = Math.floor(
(timeGap - xDay * 1000 * 60 * 60 * 24) / (1000 * 60 * 60)
);
const xMinutes = Math.floor((timeGap % (60 * 60 * 1000)) / (60 * 1000));
const xSeconds = Math.floor((timeGap % (60 * 1000)) / 1000);

const day = String(xDay).padStart(2, "0");
const hours = String(xHours).padStart(2, "0");
const minutes = String(xMinutes).padStart(2, "0");
const seconds = String(xSeconds).padStart(2, "0");

merry.innerText = `${day}d ${hours}h ${minutes}m ${seconds}s`;
}

getClock();
setInterval(getClock, 1000);

이렇게 고쳐봤다.

function getChristmasCountdown() {
  const countDown = document.querySelector(".js-clock");

  const christmas = new Date("2022, 12, 25");
  const today = new Date();
  const timeGap = christmas - today;

  const second = 1000;
  const minute = second * 60;
  const hour = minute * 60;
  const day = hour * 24;

  const countdownDay = Math.floor(timeGap / day);
  const countdownHour = Math.floor((timeGap % day) / hour);
  const countdownMinute = Math.floor((timeGap % hour) / minute);
  const countdownSecond = Math.floor((timeGap % minute) / second);

  countDown.innerText = `${countdownDay}d ${countdownHour}h ${countdownMinute}m ${countdownSecond}s`;
}

setInterval(getChristmasCountdown, 1000);

• 변수명을 조금 더 직관적으로 변경
• 크리스마스까지 남은 일, 시, 분, 초를 구하는 수식을 어떤식으로 구하는지 한눈에 봤을 때 알기쉽게 변경
• countDown 변수 자체는 getChristmasCountdown 안에쓰만 쓰이기 때문에 전역변수가 아닌 지역변수로 변경
• 함수를 실행하고 setInterval의 함수의 인자로 다시 넘겨줄 필요가 없다고 생각하여, 인자로 getChristmasCountdown의 함수를 바로 넘겨줌

🤔 어려운 점
최대한 클린코드 책에서 배운 것들을 활용하여 고쳐볼려고 노력했지만,
어떤식으로 구현하는게 좋은코드인지 아직은 어려운 것 같다.
리뷰를 받고싶다!