블랙커피스터디 내 코드 피드백

1) map함수의 내부함수 분리

분리전

 carNameArray.map((val) => {
    if (val.length > 5 || val.length < 1) {
      alert(Message.overFiveError);
      isSmallerFive = false;
    }
  });

분리 후

const checkOverFiveError = (val) => {
  if (val.length > 5 || val.length < 1) {
    alert(Message.overFiveError);
    isSmallerFive = false;
  }
};
carNameArray.map((val) => {
    checkOverFiveError(val);
  });

2) 실패에 대한 예외처리를 먼저하기

예외처리를 else에

  if (tryNumber >= 1) {
    startRacing(tryNumber, carNameArray);
    tryButtonDom.disabled = true;
  } else {
    alert(Message.countError);
  }

실패에 대한 예외처리를 if문으로 먼저 한 후 return으로 alert 처리

if (tryNumber < 1) return alert(Message.countError);
startRacing(tryNumber, carNameArray);
tryButtonDom.disabled = true;

3) 파라미터를 여러개가 아닌 객체 하나로 처리하기

파라미터가 3개로 함수에 전달을 하고 있다.

const timerCheck = (count, carNameArray, tryNumber, carMovingDom) => {
  let timer = setInterval(() => {
    isGo = carNameArray.map(() =>
      Math.floor(Math.random() * 10) >= 4 ? true : false
    );
    goCarMove(carNameArray, isGo, carMovingDom);
    count++;
    compareCountAndTryNumber(timer, count, tryNumber);
  }, 1000);
};
const compareCountAndTryNumber = (timer, count, tryNumber) => {
  if (count === Number(tryNumber)) {
    clearInterval(timer);
    $All(".relative").forEach((x) => x.remove());
    checkWinner();
    resultDom.innerHTML = result(maxCarName);
    $All(".btn-cyan")[2].addEventListener("click", returnToOriginalHandler);
    setTimeout(() => {
      alert(Message.success);
    }, 2000);
  }
};

파라미터를 tryObject 객체 하나로만 전달 해준다.

let tryObject = {};
const timerCheck = (count, carNameArray, tryNumber, carMovingDom) => {
  tryObject.count = count;
  tryObject.tryNumber = tryNumber;
  tryObject.timer = setInterval(() => {
    isGo = carNameArray.map(() =>
      Math.floor(Math.random() * 10) >= 4 ? true : false
    );
    goCarMove(carNameArray, isGo, carMovingDom);
    tryObject.count++;
    compareCountAndTryNumber(tryObject);
  }, 1000);
};
const compareCountAndTryNumber = (tryObject) => {
  if (tryObject.count === Number(tryObject.tryNumber)) {
    clearInterval(tryObject.timer);
    $All(".relative").forEach((x) => x.remove());
    checkWinner();
    resultDom.innerHTML = result(maxCarName);
    $All(".btn-cyan")[2].addEventListener("click", returnToOriginalHandler);
    setTimeout(() => {
      alert(Message.success);
    }, 2000);
  }
};

코드를 좀 더 보기쉽게 함수로 분리하기

원래대로 돌아가는 부분을 다 쭉 작성했다.

const returnToOriginalHandler = () => {
  while (progressTitle.hasChildNodes()) {
    progressTitle.firstChild.remove();
  }

  while (resultDom.hasChildNodes()) {
    resultDom.firstChild.remove();
  }
  countArray = {};
  max = -Infinity;
  maxCarName = [];

  sectionRaceTimes.hidden = true;
  carButtonDom.disabled = false;
  tryButtonDom.disabled = false;

  $("#inputCarName").value = "";
  $("#inputTryNumber").value = "";
};

분리하니 명확하게 확인 할 수 있다. (나름 역할과 책임을 분리하듯이)

const returnToOriginalHandler = () => {
  initializeDom();
  initializeValue();
  initializeAttr();
};

const initializeDom = () => {
  while (progressTitle.hasChildNodes()) progressTitle.firstChild.remove();
  while (resultDom.hasChildNodes()) resultDom.firstChild.remove();
};

const initializeValue = () => {
  countArray = {};
  max = -Infinity;
  maxCarName = [];
  $("#inputCarName").value = "";
  $("#inputTryNumber").value = "";
};

const initializeAttr = () => {
  sectionRaceTimes.hidden = true;
  carButtonDom.disabled = false;
  tryButtonDom.disabled = false;
};

변하지않는 값에 대해서는 const를

idx는 해당 countArray 객체의 프로퍼티를 나타내고 변하지 않으므로 const로 한다.

const checkWinner = () => {
  for (let idx in countArray) {
    if (max < countArray[idx]) {
      maxCarName = [];
      maxCarName.push(idx);
      max = countArray[idx];
    } else if (max === countArray[idx]) {
      maxCarName.push(idx);
      max = countArray[idx];
    }
  }
};

수정

const checkWinner = () => {
  for (const idx in countArray) {
    if (max < countArray[idx]) {
      maxCarName = [];
      maxCarName.push(idx);
      max = countArray[idx];
    } else if (max === countArray[idx]) {
      maxCarName.push(idx);
      max = countArray[idx];
    }
  }
};

빈칸을 제거해주는 trim 함수

trim함수 : 공백제거 , 문자열에 사용가능

const a = '    a'
const b = 'b       '
const c = '        c      '
console.log(a,b,c)
//    a b                c      
console.log(a.trim(),b.trim(),c.trim())	//공백제거 적용
//a b c

굳이 문자열 변수로 만들 수 있는 것을 함수로 만들 필요는 없다.

기존코드

const moving = () => `<div class="forward-icon mt-2">⬇️️</div>`;

수정

const moving = `<div class="forward-icon mt-2">⬇️️</div>`;