[JS] 중복된 if문 function으로 바꿔주세요

타이머를 만들었을 때 중복되는 코드가 눈에 거슬렸다. 그리고 구현이 먼저라는게 목표였고 그 뒤에는 코드의 중복제거나 효율적으로 만들어본 적이 없는데 코드리뷰를 받아서 수정해봤다.

중복 제거 되기 전의 코드

전체 코드

let seconds = 0;
const appendSeconds = document.querySelector(".num-sec");
const appendMinutes = document.querySelector(".num-min");
const appendHours = document.querySelector(".num-hour");

const btnStart = document.querySelector('.btn-disabled');
const btnReset = document.querySelector('.btn-reset-disabled');

let intervalId;
const src = './src/images/button/';

// 시작버튼 눌렀을 때
btnStart.addEventListener('click', function(){
  
  // default에서 눌렀을 때 stop으로 변환
  if( btnStart.id == 'btn-disabled' ){
    btnStart.src = `${src}pause.png`;
    btnStart.id = "btn-pause";

    btnReset.src = `${src}reset-default.png`
    btnReset.id = 'btn-reset-default'
    start()

  } else if( btnStart.id == 'btn-pause' ){ // pause 일때 누르면 default로 변환
    btnStart.src = `${src}start-default.png`;
    btnStart.id = "btn-start";

    stop()
  } else if( btnStart.id == 'btn-start' ) {
    btnStart.src = `${src}pause.png`;
    btnStart.id = "btn-pause";
    start()
  }
})

// reset 버튼 눌렀을 때
btnReset.addEventListener('click', function(){
  if( btnReset.id == 'btn-reset-default'){
    btnReset.src = `${src}reset-disabled.png`;
    btnReset.id = 'btn-reset-disabled'

    btnStart.src = `${src}start-disabled.png`;
    btnStart.id = "btn-disabled";
    reset()
  }
})

function timer() {
  seconds ++;

  let hours = Math.floor(seconds / 3600);
  let mins = Math.floor((seconds - hours * 3600 )/ 60);
  let secs = seconds % 60;

  if( secs < 10 ){
    appendSeconds.textContent = `0${secs}`;
  } else {
    appendSeconds.textContent = secs;
  }

  if( mins < 10) {
    appendMinutes.textContent = `0${mins}`;
  } else {
    appendMinutes.textContent = mins;
  }

  if( hours < 10) {
    appendHours.textContent = `0${hours}`;
  } else {
    appendHours.textContent = hours;
  } 
}

function start() {
  if(intervalId) {
    return
  }
  intervalId = setInterval(timer, 1000);
}

function stop() {
  clearInterval(intervalId);
  intervalId = null;
}

function reset() {
  stop();
  seconds= 0;
  appendSeconds.textContent = '00';
  appendMinutes.textContent = '00';
  appendHours.textContent = '00';
}

function timer() {
  seconds ++;

  let hours = Math.floor(seconds / 3600);
  let mins = Math.floor((seconds - hours * 3600 )/ 60);
  let secs = seconds % 60;

  if( secs < 10 ){
    appendSeconds.textContent = `0${secs}`;
  } else {
    appendSeconds.textContent = secs;
  }

  if( mins < 10) {
    appendMinutes.textContent = `0${mins}`;
  } else {
    appendMinutes.textContent = mins;
  }
  
  if( hours < 10) {
    appendHours.textContent = `0${hours}`;
  } else {
    appendHours.textContent = hours;
  } 
}

코드 설명
- 타이머에서 secs, mins, hours가 증가할 때 자리수가 10 미만( 한 자리수라면) textContent에서 앞에 0을 붙여준다.
아니라면 현재의 수를 그대로 출력한다.

나의 질문

" if문을 너무 많이 쓴 것 같아요. 간결하게 만들고 싶은데 방법을 모르겠어요 "

피드백

"조건문 남발이라고 했는데 사실 이정도면 괜찮다고 생각된다.
다만! 중복코드의 문제라고하면 좋지 못하다. 같은 기능이 있는경우에는 함수로 만들어서 사용하면 좋다"

MISSION : 중복 코드 제거하기

function timer() {
  seconds ++;

  let hours = Math.floor(seconds / 3600);
  let mins = Math.floor((seconds - hours * 3600 )/ 60);
  let secs = seconds % 60;

  appendZero(secs, appendSeconds);
  appendZero(mins, appendMinutes);
  appendZero(hours, appendHours);
}

function appendZero( times, appendTimes ) { 
  if( times < 10) { 
    appendTimes.textContent = `0${times}`;
  } else {
    appendTimes.textContent = times;
  }
}

매개변수로 times, appednTimes를 받는 함수 appendZero를 만든다.
함수 내부에서는 중복된 코드인 조건문을 그대로 넣었다.
timer 함수에서 파라미터로 기존에 중복되었던 값들을 넣었다.

짧은 회고

간단한 코드라 코드에 대한 내용은 이정도에서 끝이지만 이걸 만들어내는 과정에서 생각보다 오래걸렸다. 중복제거를 어떻게 접근해야할지 막막해서 하는게 두려웠는데 해내고 나니 꽤 뿌듯하다.