js 코드 리팩토링

미마모코딩·2022년 12월 1일
0

리팩토링 연습1

목록 보기
1/2
post-thumbnail

오늘은 유튜브 프롱트 님의 영상을 보다가 내용이 너무 좋아 포스팅을 하려한다.

아래 코드는 프롱트님의 예시 코드이고 먼저 영상을 다 보지 않은 상태에서 먼저 리팩토링 해보고

영상이랑 비교하려한다.

<script>

function orderCoffee(el, orderList) {
  if (el) {
    if (Array.isArray(orderList)) {
      el.addEventListener("click", function () {
        setTimeout(function () {
          for (let i = 0; i < orderList.length; i++) {
            document.querySelector(
              "#log"
            ).innerHTML += `${orderList[i]}가 완료되었습니다 <br />`;
          }
        }, 2000);
      });
    }
  }
}

orderCoffee(document.querySelector(".but"), ["americano", "cafeLatte"]);
</script>

코드는 위와같다 .

먼저 if문의 el를 수정하겠다. 조건문을 하나로 합쳐 아래처럼 표현했다.
조건문을 통과해야 코드가 돌테니 통과하지못하면 return을 사용해 {}리터럴 하나를 줄였다.

엘리먼트가 없거나 , 오더리스트의 형태가 배열이 아니라면 즉시 종료하고

두가지 조건을 충족한다면 이벤트를 걸어 클릭하면 2초후에 오더리스트에서 받은 오더가 완료되는 로직이다 .

또한 for문의 쿼리셀럭터 구문이 단문이므로 {}리터럴을 하나 삭제할 수 있다.

<script>
function orderCoffee(el, orderList) {
  if (!el || !Array.isArray(orderList)) return;
  el.addEventListener("click", function () {
    setTimeout(function () {
      for (let i = 0; i < orderList.length; i++) 
        document.querySelector(
          "#log"
        ).innerHTML += `${orderList[i]}가 완료되었습니다 <br />`;
    }, 2000);
  });
}

orderCoffee(document.querySelector(".button"), ["americano", "cafeLatte"]);
</script>

이번엔 위에 addEventListner의 함수부분을 분리해보겠다.

<script>
function orderCoffee(el, orderList) {
  function clickHandler() {
    setTimeout(function () {
      for (let i = 0; i < orderList.length; i++)
        document.querySelector(
          "#log"
        ).innerHTML += `${orderList[i]}가 완료되었습니다 <br />`;
    }, 2000);
  }
  if (!el || !Array.isArray(orderList)) return;
  el.addEventListener("click", clickHandler);
}

orderCoffee(document.querySelector(".button"), ["americano", "cafeLatte"]);
</script>

위와같이clickHandler함수를 분리해서 깊어진 뎁스를 개선했다.

또한 setTimeout의 부분에서 함수를 한 번 더 분리 할 수 있을 것이다.

<script>
function orderCoffee(el, orderList) {
  function orderPaint() {
    for (let i = 0; i < orderList.length; i++)
      document.querySelector(
        "#log"
      ).innerHTML += `${orderList[i]}가 완료되었습니다 <br />`;
  }

  function clickHandler() {
    setTimeout(orderPaint, 2000);
  }

  if (!el || !Array.isArray(orderList)) return;
  el.addEventListener("click", clickHandler);
}

orderCoffee(document.querySelector(".button"), ["americano", "cafeLatte"]);
</script>

콜백함수의 경우 각각의 기능을 분리해 코드를 개선했다.

함수는 하나의 기능만 가지게 만든다는게 꽤 힘든 작업이고 영상에선 나와같이 개선하지않고
프로미스 패턴을 이용해 조금 더 다채롭게 리팩토링했다 .

그 점을 학습하고 포스팅으로 남겨놓으려 한다.

0개의 댓글